Vitality Journal

Context

Led end-to-end user research and design for The Vitality Journal, a mobile-first website serving as a comprehensive scheduling assistant and healthcare journal. Conducted user research, usability testing, and iterative prototyping to create an intuitive platform that helps users efficiently manage their health.

Role: UI/UX Researcher and Designer

Tools used: Figma, Figjam

Duration: 16 weeks

Layout 5.png

User Research and Insights

  • Evaluated four existing health management apps to identify strengths, weaknesses, opportunities, and threats (SWOT) that informed the design and development of the Vitality Journal app.

    The key finding was that there was not a place where someone could manage all their health needs in one place.

  • Gathered insights from 5 potential users by conducting in person user interviews to understand their needs, preferences, and pain points in managing health appointments and check-ups, which informed the design of the Vitality Journal app.

    The main pain points discovered were that users wanted more reminders and access to their health history.

Ideation and Design Process

  1. Affinity mapping

From the user interviews, I took the key points from each interview and organized them into categories to find the main pain points.

2. POVs and HMWs

After finding the common pain points among users, I came up with some POV and HMW statements to help think about possible solutions.

POV


I’d like to explore ways to help health conscious people better manage their health because they are frustrated with how many different tools/methods they currently have to use.

HMW

  • How might we make healthcare appointments easier to remember?

  • How might we make taking and sharing notes on one's health easier and more organized?

  • How might we make monitoring one's health easier to see?

  • How might we make the user's full health history visible in one place?

  • How might we get rid of the complexities of knowing which appointments to schedule and when?

3. User Personas

From the user interviews and POV and HMWs I was able to come up with two user personas to help get into the thinking of designing for an end user.

4. Story boarding

To further put myself in the users shoes, I developed a storyboard for each of the user personas.

Lauren

George

5. Card Sorting

Conducted card sorting with 5 potential users to help with content prioritization. After the card sorting, I came up with seven categories.

  • Calendar

  • Profile

  • Explore

  • History

  • Settings

  • Tracking

  • Journal

6. Sitemap

Using the findings from the card sort, I developed a sitemap for the pages on the site.

7. User Flows and Task Flows

To help figure out which screens I would need to develop, I created some user flows and task flows.

Next, I developed some low-fidelity wireframes to see how it would all come together.

8. Low/Mid-Fidelity Wireframes

9. Responsive Design for Desktop

I also created some low-fidelity wireframes for the desktop version of the site. These were not developed further due to time constraints, but given more time I would develop these out further.

10. Branding

The next step was working on the branding. I designed the logo, created the color palette, and picked fonts to create the branding and component library.

11. High-Fidelity Wireframes

I then applied this branding to my designs to create my high-fidelity wireframes.

12. Interactive Prototype

From there, I created an interactive prototype to use for my usability testing.

13. Usability Testing

Brief:

The usability test for the high-fidelity prototype was run over about a week and five users participated. All five participants completed the task of signing in and creating an event on the calendar. Success rate was measured by if the user was able to complete the task and any errors they encountered along the way. Some errors included: not being able to go back to a screen, having to enter a certain amount of information to create an event on the calendar, etc. All participants were able to overcome any errors they encountered though and complete the task.

Goals:

  • Determine if the flow of creating an event on the calendar is intuitive and clear

  • Does the prototype lack any essential features a user would need to complete the task?

  • Does the user need any clarification on the layout/organization of the product?

Finding:

Categorized based on whether they worked, need to change, questions, and ideas.

14. Revisions and Final Prototype

From the usability testing I was able to see what aspects of my design were intuitive and which could be improved. Below are a few of the revisions I made based on the feedback I gathered during the usability testing.

Moved the sign-in page from the profile icon to the top of the page for a greater call to action

Before

After

Changed the list vs calendar view to be clearer and moved the “add” button from the bottom to the top of the page for a better visual hierarchy

Added a back button to the event creation page and changed the color of the “Cancel” button to red for familiarity and clarity.

Before

After

Before

After

Next Steps and Reflection

Next Steps

Reflection

  • Add health history feature

  • Continue user research usability testing to further improve the design and functionality

This project gave me the opportunity to design an end-to-end mobile-first website and I am struck by the invaluable lessons I learned. This project taught me the importance of responsive design, user-centered thinking, and iterative testing. Navigating the challenges of creating an intuitive and engaging mobile experience honed my skills in wireframing, prototyping, and user research. The experience was both challenging and rewarding, solidifying my passion for creating seamless digital experiences.