My Health Intake

A responsive web application for busy professionals who want to stay on top of their health.

OVERVIEW

This concept app is part of an end-to-end design project for a UX immersion course. I was the sole UX researcher and designer responsible for designing and prototyping 3 core functions in a health app. This course asked us aspects of the design thinking process to move through the project and get feedback from users in specific phases.

The timeframe for this project was 6 months.

TOOLS

  • Pen and paper for sketches

  • Figma

  • Optimal Workshop

  • UsabilityHub

  • Google Slides and MS PowerPoint for decks

  • Zoom

MY ROLE

  • UX Research

  • UX Design (ideate and prototype)

  • User Testing

  • Incorporating feedback and refinement

OUTCOMES

  • This is a concept project without a launch. But I delivered UX artifacts and insights at each design phase. In the end, I delivered a final refined prototype, recorded an app demo, prepared a style guide and other assets.

  • If this product moved ahead, I would be curious to see metrics on user engagement (patients of providers) and further iterate based on feedback.

The Challenge

Online medical portals help patients book physician appointments and access their medical records. But medical portals lack engaging features that are inclusive of their users’ needs—physical, social, emotional, and psychological.

The challenge is to design an app for health-conscious users with features that address these issues. The core features need to appeal to a specific context while addressing inclusivity, educational opportunities and privacy concerns.

Problem Statement

Health-conscious users need a way to quickly and safety access a variety of health and wellbeing information and services because they want to easily stay on top of their health needs.

We know this to be true when we see users researching online for answers and help to their physical, social, emotional and psychological conditions.

Solution

My Health Intake helps health-conscious people quickly and safety access a variety of health and wellbeing information and services through one portal.

The portal will be organized around a user’s health goals, with tools to upload medical information, set appointments, and find resources that align with those goals. The portal’s interface will be intuitive and simple.

Requirements include designing 3 core features to include:

  • Onboarding

  • Sign up and Login

  • A home screen or dashboard

  • Navigational menu

  • Education and training feature(s)

Mockups

Design Process

To move this end-to-end project forward in an iterative way, I designed in the following phases. In each phase, I submitted and received feedback from my course mentors, users, or other designers.

Competitive Analysis

This project started with an understanding of competitors in this problem space. These competitors serve a large pool of in-network mobile app users. I analyzed two companies with medical portals and reviewed their apps’ user interfaces.

Competitors:

To see my full research findings, see the competitive analysis deck.

Key Takeaways:

  • Educational resources should be added but also easy to find.

  • Prevention and health tracking features encouraging behavioral change should be inviting and designed with accessibility in mind.

  • Wellness features should group activities according to user expectations. Apps should revisit their overall information architecture.

User Research

To learn about the target audience for this app, I conducted one-to-one interviews remotely with participants. The purpose of this user research was to discover participants’ beliefs, needs, motivations, and pain points when it comes meeting health and wellness goals.

To meet the deadline in this phase, I remotely interviewed:

  • 5 people

  • who cared about their health

  • between the ages of 24-35

I recruited these participants through a network of friends, colleagues and family members. Each interview took about 45 minutes.

User Insights

Participants had a lot to say about their health and apps they use.

To make sense of participant responses, I conducted affinity mapping and synthesis activities to spot common themes or patterns in participant answers.

Key takeaways:

  • Successful preventative healthcare is a shared and engaging experience.

  • Medical information needs to be trustworthy and credible.

  • Health goals are comprehensively tied to other areas and include health, fitness and mental health.

  • There were common reasons that goals were tough to met including distraction, stress, tiredness, and interruption.

  • Accountability, consistency and data visualization helped people understand and meet their goals.

User Groups

My next step I took was to visualize user insights in a way that I can design for specific user groups. Based on user research and attributes, I decided to focus on three user groups:

  • The single busy professional who relies on social groups or joining group health challenges to support in her health goals

  • The married busy professional who is needs to track vitals so she can show her doctor.

  • The managerial professional at work who needs more information about his health first before deciding to see a doctor.

I prepared user personas to make sure I kept the user needs and pain points front and center. Feel free to view the full user personas.

Next, I mapped out each persona’s journey within a specific scenario. Mapping each persona’s journey helped me track the highs and lows that a user may go through while competing a specific healthcare scenario.

When you can understand your user’s journey, you can better empathize with your target end-user and spot areas of improvement (for future features).

User Flows

With my clearly defined user groups in mind, I went back to review the project requirements. Based on prior discovery work, I identified 3 features to design for users in this app.

I then completed a task analysis for each feature and mapped out user flows. User flows allowed me to get a high-level view of the paths each user group would take to accomplish their goals in the app. If I needed to work with other stakeholders, I would use this flow to explore user interactions, feature placement, and to help estimate a level of effort in the build of the app.

For this concept project, I focused on designing the direct “happy” path. But I also looked at some alternative paths (such as “forgotten password”).

Information Architecture

At this point, I had some assumptions about how users would navigate in this app. I decided to run an open card sort with 5 participants to test specific assumptions on labels (copy), navigation and content organization.

Even though I didn’t get a clear agreement on navigational labels, I did get 100% agreement on certain content groupings. Dendrograms and a similarity matrix were tools that helped me what health topics and tasks should belong together.

Key takeaways:

  • Health Portal task groupings: searching for, chatting with, and setting a telehealth appointment together.

  • Wellbeing task groupings: personal goal setting, learning and discovery activities, and social outreach and connection.

  • Health portal documents. I confirmed my expectation that doctor or provider-generated records should be a separate category from a participant’s generated health diaries and logs.

A final sitemap (below) was refined to reflect user input.

Ideation

Next, with some of the preliminary UX work done, it was time to design a prototype so that I could test it with real users. I started to explore design solutions iteratively by doing the following activities:

  • Sketching solutions fast

  • Low-fidelity wireframing

  • Mid-fidelity prototyping

I applied a mobile-first approach to help me place navigation and the most important content first on screen.

Prototype

As my designs increased in fidelity, I added more UI elements and copy. Examples of those wireframes are below. I made a few decisions in this phase:

  • I kept the design in grayscale to avoid users being distracted by color or branding choices at this point.

  • I also named the app “My Health Intake” to give some realism to the app before user testing was done. The name reflects the app’s capabilities to empower people with tools that help them assess their own health.

User Testing

With enough fidelity in the wireframes, I decided it was time to put the prototype back into the hands of users to test for usability. For results, feel free to reference the Full Usability Report. User testing results led to significant design changes to onboarding, data entry and search features.

Process:

  • Moderated remote testing. Remote testing during a global pandemic had its own challenges, including background noise and connectivity issues. But I was able to record participants (with consent) and listen and watch user feedback.

  • 6 new participants

  • Reason: to test for functionality and interaction.

Usability Metrics: To prioritize any fixes, I applied Jakob Nielsen’s 5 Components of Usability (Errors) to pinpoint the most severe design errors and tracked it on a rainbow spreadsheet.

Refining the Design

Key Changes. The following are top revisions based on user testing:

  1. Coach marks and certain onboarding screens slowed down users or were unhelpful. They were replaced with an empty state UI pattern.

  2. Form fields and dropdown menus were revised to cover important data entry scenarios.

  3. The initial home screen was distracting. Users preferred a list of health topics as a starting point to learning.

  4. Content was moved around and prioritized on screens based on user testing results.

Feedback. I also considered feedback from other designers in my UX/UI course. This feedback led to consistent color, typography and other visual placement. I referenced WCAG 2.0 accessibility guidelines during the design refinement stage. The final changes improved overall visual hierarchy.

Design Documentation

As part of building our a design language system, I also put together a style guide.

  • I referenced an industry standard design like Material Design when designing components.

  • In addition to color palettes and UI elements, I included voice and tone guidelines to create consistent branding language for the app.

  • Accessibility concerns were also added based on WCAG 2.0 guidelines.

Key Learnings

  • The health care industry is constantly catching up in the digital space so it is important to go back and plan for future through competitive and user research.

  • I learned that the customer is goal-oriented in health portals and they explore later after establishing trust and credibility. Trust and credibility is very important for medical apps and design can help reinforce or question it. Without it, you won’t solve customer problems.

  • If I had the chance to go back or take further steps towards final delivery, I would additionally consider testing for alternative paths in the flow.