As a designer, my goal is to be learning constantly and improving upon my skills. Due to this fact, I signed up for CareerFoundry's UX Design program. This 6 - 10 month course taught me all the aspects of UX Design, and allowed me the opportunity to work with a tutor and mentor that helped me refine and develop my skills.
For the bootcamp, I chose the 'Olive' project brief. The objective of this brief is to:
Allow health-conscious individuals to log in to a responsive health and wellbeing portal to record their health and medical information, and access general physical and mental wellbeing features.
The first step to approaching the project brief was to conduct research and learn more about the health and wellbeing field.
I first conducted a competitor analysis to learn more about what solutions are currently in the market, and if there are any possible opportunities.
To see the full competitive analysis document, click here.
After conducting competitor analysis, I was able to learn that there are opportunities for a platform that targets a younger audience either in school or just starting their careers, who need help with managing their stress and burnout.
I wanted to confirm my theory by surveying and interviewing potential users and learn more about what sort of problems they struggle with when it comes to mental health and burnout.
I set out and conducted User Surveys by using Google Forms, and User Interviews with 3 potential users who fit the demographic I wish to target.
I had 3 main goals when conducting my user surveys, those were:
After drafting up, and sending out survey, I received 16 responses. From these responses, I learnt the following.
Users also described which features they enjoy and dislike about the apps they use.
I had 3 main goals when conducting my user interviews, those were:
The full documentation of the user interviews can be seen here.
With the interviews complete, I took all my findings and began affinity mapping my findings. Affinity mapping helps me categorize and restructure my findings into something that describes an aspect of human behaviour and helps me see how might I take actions to solve a problem.
I was able to gather the following insights after completing my affinity map.
These insights will help me in building a platform that takes these human behaviours in mind, and will hopefully solve my users problems.
My next step was to create user personas. By having these personas as references, I can make sure that I will create user-centric designs that actually aim to solve their problems.
By utilizing the insights from the affinity map, and the findings from both the user survey and user interviews, I mocked up these two user personas.
With the user personas complete, I then transitioned to quickly creating their user journey maps to visually understand their emotions during their journey.
The user journey maps help me pinpoint which stage of the user journey can be improved upon. It will also help me with future decisions such as how the platform approaches these problems.
With my users defined and understood, my task now is to determine how information such as the screens, will be organized and connected, and present them in the form of a sitemap.
I want to make sure that the way I organize and connect my pages makes sense to my users. To do so, I conducted an open card sort survey and analyzed the results to understand how users think. Out of 10 responses, I was able to analyze the following.
Using the best merge method dendogram, I was able to gather that users categorized the different pages into 3 main groupings. “Settings”, “About/Help”, and, “Tasks”. These 3 groups had their own internal groupings as well. Using this information, I was able to properly create a sitemap that reflects my potential user mental model.
Using the results from the open card sort survey, and the dendogram analysis, I created the sitemap to help me organize and connect my screens.
With the information all organized, it’s time to draft up mid-fidelity wireframes and layout the important components such as text fields, buttons, and, graphics on the three main flows: View Progress, Daily Check in, and Appointments.
The wireframes were designed around the idea of data visualization and helping the user keep track of multiple health factors both mental and physical. More emphasis was on seeing numbers, graphs, and on the “tracking” aspect of the platform.
My next steps were to test and validate these designs before I go on to design the high-fidelity wireframes.
In order to validate and get feedback on my wireframes, I had to test them with potential users and observe how they interact with the platform.
I conducted 6 remote moderated usability tests, with each participant coming from a slightly different background and knowledge about mental & physical health. The usability tests consisted of 3 main parts. The test began with some background questions to learn more about how the participant would use the platform. After that I asked the participant to look at the screens, scroll, click around and give their general feedback and feelings about what they see. Finally, I gave the participant 2 task scenarios where they had to accomplish a specific goal.
With all the usability tests concluded, I gathered all the feedback, quotes, and behaviour patterns, and organized them into an affinity map.
The affinity map helps me categorize similar behaviour patterns and feedback into categories and have a visual representation of the most common issues in my designs.
The most recurring issue I noticed from the participants was that the focus on data visualization actually made the platform difficult to read over, and they felt stressed trying to make sense of everything that is going on.
Participants also had difficulty with completing tasks such as creating a habit tracker.
With the amazing feedback and help from my participants, I realized that my current designs isn’t what my users were asking for.
I went back and revisited my user personas and user journey maps. I realized that my users were asking for a platform that allows them to help themselves. They want to be given a tool box of resources where they can pick and choose which ones they want to use. With that in mind, I redesigned my mid-fidelity wireframes.
My focus now while designing the wireframes was self-help. I included a mental health tools page, and restructured how the users would see their data.
Now, instead of using graphs, users are shown their weekly progress in the form of card components. The data compares their current progress with last weeks progress to indicate to the user whether they are improving or not. This new layout is much easier to look at, skim, and understand.
I also included a new page full of mental health tools. This is in response to the findings from the user surveys, and usability tests. Users are able to favourite their most used tools and have the information be displayed on the progress page.
With the pivot complete, and the deadline for this project slowly creeping up, I decided to slightly improve the fidelity of the designs. If I had more time, I would validate the second iteration of my Mid-Fidelity wireframes once more.
Before finalizing my designs and going to create the high-fidelity wireframes and mockup, I wanted to set up a Design Language document to make sure that components and colours are consistent throughout the platform.
The entire document can be seen here.
Using the style guide as a foundation, I went ahead and updated all my designs to reflect the proper colours, buttons, components, and text.
With all the screens designed, I connected them all together and created an interactive prototype.
All in all, I had a great time going through the design process and building a platform from scratch. It was a lot of fun and I was able to not only practice existing skills like researching, wireframing, and prototyping, but I also learnt new skills such as how to conduct card sort surveys, drafting up affinity maps, and fleshing out a design language for the platform. It was also an amazing experience to work alongside a tutor and mentor to help and guide me throughout the process. I was able to ask questions, ask for feedback, and learn some helpful tricks along the way.
My main learnings from this project were:
During my calls with my mentor, he would always tell me to make sure I have a concrete “why” behind every decision during my design process. “Why is this a pop up and not a new page?”, “Why is this component positioned here?”.
As a UX designer, it’s important that our decisions and designs are based on user research, or are validated through the use of usability testing.
I tried my best during this project to always know why I made my decisions, but this is something I definitely need to continue to improve on in my future projects.
It’s very easy to get carried away and start designing the first thing in your head. It’s what I did in my first iteration of mid-fidelity wireframes, and that caused me to go in the wrong direction. By keeping the user persona near by while designing, you can easily look over and ask yourself, “How would this help them?” or “Is this feature really improving their emotions during this part of their user journey?”.
In my future projects, I will keep my personas near by and always try to make sure I create user-centric designs.