Revamping ChartNeo's UI and Driving User Retention

Spearheading user research and rebranding a FemTech app

WHO

Software Engineer

Doctor

Business Owner

UX Researcher (me)

UX Designer (also me)

TIMEFRAME

13 weeks

Remote contract work

MY ROLE

UX Research, UX/UI Design,

Competitive Analysis, User Testing

Mid-fi prototyping, Hi-fi prototyping,

Design Presentations

CONTEXT

“People kept telling me the app looked like it was designed by a software engineer.”

ChartNeo, a HIPAA-compliant cycle charting app, has about a thousand users who use the mobile application with the goal(s) of a) avoiding pregnancy, b) achieving pregnancy, or c) tracking their health. However, the app is run by a three-person team, meaning there isn’t much time for UX Research or design. That’s where I came in.

Since users were feeling lost when they first started using the cycle charting app, I approachedresearch and the redesign with two questions:

How might we make navigating the app more intuitive for users unfamiliar with cycle charting?
How might we help users enjoy the experience of cycle charting with ChartNeo?

DESIGN

The Redesigned App + Results

75%

of users prefer the redesigned

to the original app

"

There’s a big difference between both the original app and the redesigned app. I really like how much information there is and the better use of screen space.

Scroll to see my process!

RESEARCH

Running heuristics on the current app

Users gave the app a

4/5 rating on visual appeal

Users gave the app a

4/5 rating on ease-of-use

Based on the survey results, it seemed like there were no glaring issues with the app, which contrasted with my competitive analysis insights and own personal biases. I went into user interviews confused and curious; I conducted 3 user interviews and uncovered the following insights.

Users love the app’s usability features, but prefer the visual design of other apps. 3/3 users mentioned that they enjoyed the usability of the current app, but 1/3 users mentioned that if Mira (another cycle charting app) had the same features ChartNeo did, she would switch.

The app needs improved educational onboarding features. 100% (3/3) of users wished there were tool tips or a built in tutorial on how to use the app. A cycle charting practitioner who used the app with clients mentioned that she often had to set up meetings to walk clients through how to use the app, because they had trouble understanding the medical jargon and where to start.

I really like how the app is simple and doesn’t have “flowery” designs like other FemTech apps.

"

-User Interviewee

IDEATION

Feature prioritization with stakeholders

After presenting my research insights to the stakeholders, I led a conversation with them to make sure we were on the same page with what to prioritize.

Mood board compiling design inspo!

Competitor Analysis

DEFINE

How might we redesign an app that visually motivates users to use ChartNeo while also providing educational value to them about charting?

ITERATION

Mid-Fi Prototyping

I started sketching and ideating different home screen ideas. I used competitive analysis research with apps like Femm and Ovia to help define the visual direction of the screens.

Charting Screen User Requirements ✅

Know which cycle day + date they were charting on

Make sure to at least fill out the top 4 sections (Walking, Wiping, Inspect, and Test)
Have sufficient space for notes

IDEATION + CO-DESIGN

Making Charting Accessible

I had bi-weekly check-in’s with my team to update them on my progress and also to gain their insights on the app. One of the biggest issues I came across while user testing was that even experienced users often forgot the meaning of some terminology, and I recognized there was a need for more accessible definitions.

There’s a lot of text on here, and I wanted to check and see what of it was useful or needed to be better clarified.

DESIGN

The issue with visual appeal

One of my biggest challenges was finding a color palette that worked. The colors on the current app were dull and muted but matched with the medical model that medical practitioners were used to.

To compromise, I utilized a secondary color palette that matched up with the original colors while still maintaining the medical meaning of the current app.

This color has medical meaning and needs to remain on the app, but lacks a modern feel

Original App

Redesigned app

This color has medical meaning and needs to remain on the app, but lacks a modern feel

The new color palette uses softer, colors that are less aggressive than the original palette, but still maintains medical meaning of the older colors.

EVALUATION

Determining what’s working and what’s not

I had a limited pool of users to conduct user testing, so it was hard for me to gauge how well users were responding to certain information. The team I was designing for also had different views and preferences surrounding visual appeal and certain design decisions. As someone with limited domain expertise of cycle charting, I reached out to a UX Researcher for some advice on research methods that would help me better understand user preferences.

She suggested making an A/B testing-adjacent survey with two options (as pictured below) and asking users for feedback. I received about 30 responses, which really helped me understand user needs and provided quantitative data I could use to advocate for certain design decisions with stakeholders.

Since users had rated the ChartNeo app pretty high in terms of the visual appeal, I needed user opinion on whether the redesign was actually helpful. 75 percent of survey respondents preferred Option A, which confirmed that the redesign was on the right track 😅

One of my stakeholders and I disagreed on the best way to visualize the calendar view top bar. The survey really helped clarify that Option B was strongly preferable, which influenced the redesign.

DESIGN

The Final Prototype + Results

75%

of users prefer the redesigned

to the original app

"

There’s a big difference between both the original app and the redesigned app. I really like how much information there is and the better use of screen space.

REFLECTION

What I learned

Mid-Fi Prototyping is super important. Users and stakeholders alike had a lot more opinions when it came to visual design decisions like color, and it was helpful to do some testing and stakeholder feedback sessions with greyscale, mid-fidelity prototypes where I could really get feedback on functionality.
Evaluate often, however you can. I had to proactively find scrappy ways to get feedback, whether it was through reaching out in my design network to ask designers and researchers for feedback or leveraging my stakeholder’s domain knowledge or using asynchronous means to get user feedback.