Health and wellness can be difficult to achieve. Cardia is application that aims to make health and wellness easy and accessible for all by creating a one stop shop for users to find and track workouts, meal plans, and meditations in addition to securely uploading, sharing, and storing medical records.
My Role: UX Research, UX/UI design
Client: Career Foundry UX Certification Course Project
Tools: Figma, Optimal Workshop and Photoshop
Duration: 4 months
In a saturated market filled with countless applications aimed at health and wellness most Americans find themselves overwhelmed with information overload and poor results regarding their diet, fitness, and mental health. How can we provide a user friendly, accessible platform that empowers users with powerful, customized science based information that can make a positive impact on their health while also encouraging users to regularly build good habits by using the program on a regular basis?
- Build a robust platform that provides all the information a user would need to achieve their health and wellness goals.
- Allow users to customize the application to fit their specific needs and goals.
- Make the platform fun and exciting for users so they build good habits by achieving their goals while also being more likely to subscribe to the Cardia service.
In order to achieve project goals and create an application that satisfied user needs and filled the gap within the market I began by implementing my design process. The process offered a solid foundation and road map for keeping users centered in all the design decisions made throughout the project. My design process consisted of 5 phases.
Phase 1. Empathize - Comprehend the health and wellness market and the users that are a part of it.
Phase 2. Understand - Make sense of data collected during user interviews.
Phase 3. Design - Formulate information architecture and wireframes that bring the research to life.
Phase 4. Test - Take the design and test it with real users to discover what works and what needs improvement.
Phase 5. Refine - Improve the design to meet user needs while polishing and refining the user interface to create a final product that solves business goals and creates an impression with users.
In order to effectively design solutions to fulfill project goals I needed to first understand the current state of health and fitness applications on the market. I conducted a competitive analysis of popular applications like 8Fit and My Fitness Pal. Analysis of each application offered powerful insights highlighting individual and collective strengths and weaknesses of each application. The strengths and weaknesses provided insight into areas where Cardia could fill in the gaps and provide a more robust fulfilling experience to users within the market for a health and wellness application.
To see a detailed look at my competitive analysis click here.
In order to further empathize with users, interviews were conducted with various participants with a general interest in health and wellness. Participants spanned a variety of ages and backgrounds for the purpose of collecting data that could impact a wider audience. Insights from each interview participant are compiled below.
In order to better understand the data collected during the interview sessions quotes and insights were assigned a color based upon the user being interviewed. After adding data to each users color all the notes were assembled between challenges, diet, functionality, desires and motivations. Each of these categories were chosen to give a big picture look into users current state and the desires they would like to have fulfilled by a health and wellness application.
After compiling and making sense of the insights and quotes from interviews I then began the process of taking all I had learned and began developing personas. I developed two personas: Peter represents the younger larger user base aged 20-44 and Mary represents a more mature audience of users aged 45-65. For more detail please see below.
In order to keep Cardia user centered I took a step back and focused on the flows users would take when navigating through the application. This process was two fold as it allowed me to see the bigger picture of how users would actually use the application to complete tasks and it helped me to define what pages and navigation would be required for those tasks to be accomplished. For more detail please see my three users flows below. There is a legend key that helps explain each aspect of the user flow.
I created 20 cards from different screens and categories from my sitemap. I then recruited 5 participants to sort the cards in a digital open card sort using Optimal Sort. The results from all 5 participants were then used to help me refine my original site map.
Card sorting was a great exercise to see and understand some of the ways in which users visualize, organize, and interpret data. Looking over the results provided some interesting insights. I noticed in a couple of the sorts users mentioned community so I added that to my site map. Another insight I discovered was that users took the information and simplified it down as much as they could. This helped me justify the simple navigation for the application. Overall this was a good exercise that allowed me to peek inside the mind of users and get a feel for how they interrupt and organize the content and information of the app. Please see the original and revised sitemap below.
Low Fidelity Prototypes
After refining and completing my site map it was time to layout the high level details in a visual way. I began by creating some low fidelity prototypes. These prototypes omitted color and most of the text to help establish the core structure of the application. This rapid prototyping allowed me to quickly build out ideas without getting distracted by the fine details. Some examples of my low fidelity prototypes are shown below.
Mid Fidelity Prototype
After working out the high level details of the application with low fidelity prototypes. I then began the process of conveying more of the UI detail. I continued to keep the wireframes in grayscale so as to not distract from the UX of each page and the application as a whole. These mid fidelity wireframes would be used for user testing. Please see my mid fidelity wireframes below.
After working out user research and creating mid fidelity prototypes it was time to take what I designed and allow real users to interact with it in the confines of usability testing sessions. But before I could start the testing I first needed to develop a plan that laid out the goals and details in order to conduct successful testing sessions. Following the plan I developed a script to give me a framework of what needed to be asked and discussed during each session. I didn't read the script verbatim but used it as a guide so each testing session followed the same frame work thereby providing consistent data. Below you will see an outline of how each testing session was conducted. It was interesting to see some of the overlap in testers general thoughts and areas of the app they had trouble with. Overall I collected a wealth of value feedback for improving my design in the next iteration.
Testers were given some background on what they would be doing. I made all testers aware that they were not being tested and couldn’t do anything wrong during the session. After signing recording consent forms testers were asked a variety of demographic questions and given an opportunity to ask their own questions before we got started.
Static Screen Interpretation
Testing participants were given a static screenshot of the home page to look at. After looking at the page for a minute I asked the testers a variety of questions related to the screen and their interpretation of the information being presented.
Testing participants were then given a link to a Figma prototype were they ran through a series of tasks. I reminded users to think out loud as much possible during each of the tasks. Valuable feedback was collected from the recordings of each session.
After testing sessions were completed I created an affinity map to make sense of all the data collected during the usability testing sessions. The affinity map allowed me to collectively sort the information and data from each individual testing session. I broke the data up into 4 categories: Observations, Positive Quotes, Negative Quotes, and Errors. The affinity map helped me to condense the collected data into simple pieces of information that could be easily grouped together.
In an effort to uncover and visualize patterns all of the data from the above affinity map was then taken and applied to a rainbow spreadsheet (shown below). The rainbow spreadsheet helped to classify observations and errors in a visually organized way.
The information from the testing sessions and the findings from the rainbow spreadsheet were reviewed and the most critical errors were added to a usability testing report. The purpose of the report was to covey what changes needed to be made and why. Below are some of the changes that needed to be made to the prototype based on the usability testing sessions data.
Changes and updates were made to the prototype based on the usability test report findings. In addition to making the needed changes the design went through a polishing phase. Grids were used to distribute the weight of the design and provide a sense of balance and structure. I used 4 columns with a 16px gutter and 16px margins. I placed the columns over the existing design of my home screen. From there elements of the screen were expanded to fit the grid more appropriately. The final result was a more highly polished design. The grid helped to balance the design by adding symmetry within the elements throughout the screen. I made a point of not adding content directly into the gutters of the grid. Below you can see my process of adding the grid to the existing design and adjusting the components of the screen to the fit within the grid.
Design Language System
The design continued to evolve and progress. In order to provide consistency and focus throughout the application I created a design language system which contained typography, color palette, language guidelines, UI elements, and icons. This resource allowed me to stay focused and consistent with every aspect of the design throughout the application. The consistency gathered from the design language system allowed me to take the existing earlier design and refine it into a more elegant and effective design that more clearly communicated the information and fulfilled user goals while providing remedies to previous issues outlined from my usability testing data.
After four months of diligent work Cardia went from an idea to a fully functional prototype. Each phase of the design process outlined above offered powerful insights into how important keeping the user centered within the design process was. Below you can check out a video demo of my application.