Menu
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.
User Journey Map – Charlotte
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.
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.
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.
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.
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.
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.
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)
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.
H I G H – F I D E L I T Y M O C K – U P S
Dedicated Mobile App Mock Ups
Responsive Website – Screen Size Variations
Responsive Website – Main Screens (Desktop 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.
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
I used headings with different sized text and weights to provide visual hierarchy.
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
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.
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.