Conquer ANYTHING - Dedicated Mobile App and Responsive Website

Image showing Conquer Anything, a dedicated mobile app and responsive website design.

R O L E S  &  R E S P O N S I B I L I T I E S

I was the UX designer leading the Conquer Anything mobile app and responsive website design.

Conducting interviews, competitor research and auditing, paper and digital wireframing, low and high-fidelity mock-ups and prototyping, conducting usability studies, accounting for accessibility, iterating on designs, responsive designs for various website screen sizes, plus a dedicated mobile application design.

T H E  P R O B L E M

Many people have developed mental health issues because of external issues like the recent pandemic. Schools don’t teach us the techniques we need to overcome mental health challenges so we can lead a happy and prosperous life.

We can learn things to help and can quickly forget how to put these learnings into practise.

U N D E R S T A N D I N G  T H E  U S E R

I conducted user interviews then converted findings into empathy maps to better understand the target user and their needs. I discovered that many users would often complete courses to help themselves, but quickly forget what they had learned by the time a situation had arisen, where they needed to apply this knowledge.

From this I focused the dedicated mobile app on a feature that enabled users to review their own notes and bullet points on various lessons learned, so they could recall the information whenever needed, while they were out-and-about.

User Personna – Charlotte

Charlotte is a busy single parent who needs bite sized tips, advice, and notes on overcoming her anxiety while she is on the go. Remembering key tips when a situation arises would help her push past her anxiety when she needs to the most.

Image shows a user persona that I created for the project.

User Journey Map – Charlotte

Image showing a user journey map created during the project.

Competitor Audit

An audit of a few competitor’s products provided direction on gaps and opportunities to address with the dedicated app and responsive website.

The image below shows a preview of the competitor audit spreadsheet that I used to scope out the competition.

The image shows notes taken during an audit of competitor websites and apps.

T H E  S O L U T I O N

Conquer Anything is a British-based organisation focused on helping all types of people overcome mental challenges. The organisation needs a tool to help people learn and grow personally and professionally. Its users can learn new and old techniques from emerging science, discoveries and tried and tested techniques that have been used for centuries.

 The solution was to design a responsive website that users could use to learn such techniques.
To accompany the website, a dedicated mobile app was designed so users could recall learned information and learn new topics while on-the-go, or away from their computer at home.

Sitemap

An over-complicated website navigation and user flow was a primary pain point for users, so I designed the information architecture and site map to guide the initial designs.

My goal here was to make strategic information architecture decisions that would improve the overall website navigation. The structure I chose was designed to make the flow easy and intuitive. View the full sitemap here.

Image showing an early site map for the project.

P A P E R  W I R E F R A M E S

Next, I sketched out paper wireframes for each page in my app, keeping user pain points like an easy user flow and intuitive navigation in mind.

Image showing paper wireframes created during the project.

The image showing paper wireframes, focus on ease of flow, while keeping the app visually engaging. Studies carried out show users would often loose interest when there is too much text and not enough visual context.

D I G I T A L  W I R E F R A M E S

Moving from paper to digital wireframes made it easy to understand how the redesign could help to address user pain points and improve the user experience.

Prioritising and minimising the options that could be selected in the main menu helped to create a more intuitive navigation flow, as seen in the mockups to the right.

Image showing low-fidelity mockups, before and after usability studies.

L O W – F I D E L I T Y  P R O T O T Y P E  (M O B I L E  A P P)

Next, a low fidelity prototype was created in Adobe XD in preparation for usability testing.

Based on insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes was by splitting and rearranging one of the forms on the site so it was more logical, which also made the task less daunting by splitting the form up into small step-by-step chunks.

Image showing screen connections of the low-fidelity prototype for this project.

L O W – F I D E L I T Y  W I R E F R A M E S (R E S P O N S I V E  W E B S I T E)

Image showing low-fidelity mockups of the responsive website at three different screen sizes.

U S A B I L I T Y  S T U D I E S

Based on insights from further usability studies, I made changes to improve the dedicated mobile applications navigation, which included a simplified home screen, and a menu Icon, which when clicked revealed the full navigation which made everything accessible from every screen.

Below is a sample of some of the observations recorded, during one of the unmoderated usability studies.

Image showing my note taking spreadsheet following a usability study.
Image showing differences and changes following a usability study of the dedicated mobile app.

H I G H – F I D E L I T Y  M O C K – U P S

Dedicated Mobile App Mock Ups

Image shows high-fidelity mockups of the dedicated mobile app.

Responsive Website – Screen Size Variations

Image showing various pages of the responsive website at various screen sizes.

Responsive Website – Main Screens (Desktop Size)

Image showcasing various pages in desktop screen size.

H I G H – F I D E L I T Y  P R O T O T Y P E

Below shows an overview of the connections between pages for the responsive website, at different screen sizes.

Prototypes were also created to test the dedicated mobile app in further usability studies.

Image showing screen connections of the high fidelity prototype for this project.

A C C E S S I B I L I T Y  C O N S I D E R A T I O N S

Typography Hierarchy

I used headings with different sized text and weights to provide visual hierarchy.

Landmarks

I used landmarks to help users navigate the site, particularly those users who reply on assistive technology.

K E Y  T A K E A W A Y S

Impact

Participants who used the website at high fidelity and tested the prototype shared that they thought the design was engaging and appealing. Further into the project most users easily followed through the user flow and journey without any issues.

What I Learned

I learned that users’ needs, and pain points can be overly broad on a topic such as self-improvement.

I found that carrying out more user research would reveal more valuable information for the Conquer This website and app, enabling a refined User Experience that that would appeal to a larger audience and user base.

Need a user-focused product service mobile app responsive website user interface design?