Problem Overview

The Center is an organization that works to provide free reproductive healthcare to anyone who needs it. They are not supporting patients to the best of their ability because their current website lacks ways to learn about services offered and does not have an intuitive or convenient way to make appointments. My team wanted to re-create how visitors experience The Center to make reproductive health education, stress free and approachable.

Problems with the Current Solution

People who want to visit The Center have just a one page website to learn about their resources. There are no details about the offered services, which leaves patients in the dark. Appointment booking is a large pain-point because users must call during open hours for scheduling and asking questions, making it inconvenient and frustrating to use them as a provider because they are hard to get ahold of. The Center needs a more user-friendly, efficient, and discrete way to access their services.

Learning about The Center

We started our research process by learning about what services the center currently offers and how visitors can use these resources. We took to a jam board to write down everything we could find out about The Center.

User Research Findings

We interviewed potential users to learn about their thoughts on the current website and what they would be looking for in an app. We took notes on what they vocalized feeling and how they would react to different scenarios. We asked them things like “what makes going to a reproductive health clinic stressful or comforting?” and “what would you do and how would you feel if you woke up needing urgent healthcare for a UTI but in-person resources were closed?”

User Personas

We next created personas to guide our design process and pin point task flows we wanted to solve. We researched demographics of The Center and similar reproductive health clinics to understand what the clients are like. Our interviews with students that were clients of The Center helped us to define realistic user goals and frustrations.

Crafting a How Might We statement

Our interviews helped us empathize with user needs and helped us write out a goal to set the tone. We voted on our" “how might we…” statements to decide what our top priorities were.

Competitor Analysis

The Center currently uses Healow for existing patient’s health records. To get a better feel for how the existing solution for record keeping and general reproductive education was working, we looked into Healow and Planned parenthoods apps.

Healow App Findings

We read through the reviews and found as many pictures of the app online (we were not current patients, so couldn’t get access firsthand). Issues that users wanted addressed were:

• Pharmacy options are not localized: user has to scroll through all pharmacies in country

• Messaging is spread throughout multiple screens and difficult 
to navigate

• Interface has not been updated

Planned Parenthood App Findings

We were able to navigate the Planned Parenthood app ourselves in addition to seeing users reviews. We used the positive features to influence our design and took issues into consideration to avoid.

• FAQ and Health Center Appointments takes users out of app, we preferred an in-app experience

• Birth Control, UTI, Plan B on home page allows users to fill out a survey to match them with the right medications, procedures, etc

• Reviewers loved getting medical care quickly
 and without face to face interactions

• Reviewers enjoyed the convenience of online healthcare, making it easy to get help without interrupting their day

• We wanted to give our users a similar feeling of convince, efficiency, and seamlessness while completing tasks in-app

• Seeing the value of getting attention when users needed it most inspired our idea for an AI powered chat bot to get users the answers to their questions after-hours

App Features

From our research findings, we brainstormed tasks users would most value being able to accomplish within the app and came up with five key features:

1. Appointment booking portal

2. Frequently asked questions

3. Educational material about reproductive health and services offered

4. Chat bot for after hours help

5. Profile containing medical information

Designing

After deciding on feasible features that fit within our time constraint, we started preliminary sketches to brainstorm our screen layouts.

Wireframes

We wireframed each section, collaborating on the designs until we found each piece was helping to address our users’ needs. I personally focused mainly on the appointment booking and home pages, although we all had some input on each screen.

Style Guidelines

We wanted to our app’s look to embody the anxiety-free, accessible, and welcoming vibe we hoped our users would feel. To do this we selected a typeface with high legibility and ensured to follow WCAG color and size guidelines. We chose muted but playful colors to bring a feeling of comfort and approachability.

Hi-Fi Iterations and User Feedback

Once we developed a design guideline, we converted our low-fidelity screens to high-fidelity flows. We had 5 potential users look over our work during this process to give us feedback on what looked good and where they felt confused. Here are a few snippets of feedback that we used to improve our designs.

Working with a Design System

While creating many iterations of each page, I worked on creating a functional design system to quickly update frequently used components. I focused particularly on the nav because it was used on every page, so it needed to have every instance easily toggled on or off with the use of variables.

Final Designs

Taking our feedback into consideration, we developed a final set of screens and linked them into a tappable prototype to present our work the next morning.

Presentation

After a long day of designing, we prepared a slide deck to share and submit our work.

Results

Our prototype was selected as one of the top 8 to be presented to the panel judges. Ultimately, we won 1st place prototype out of the 13 competing teams! We had to take some photo both flicks to celebrate :).

Takeaways

This competition helped me realize just how much I am capable of accomplishing in a short timeframe. It helped me remember the importance of getting user feedback early and often. Interviewing potential users helped us get a grasp on what people wanted in an app, and it was so beneficial to hear it from their voices not our own. For example, we love talking on the phone, but after our research, we realized booking online appointments wasn’t just essential for convince but also for easing anxiety. Instances like this reminded us that designers are not the users and we needed to listen to their needs, not just ours. Putting our users first, even with so little time, was tremendously helpful for bettering our work.

I believe we stood out because we created a solution that had potential to make a positive impact on not just the local business but everyone they interact with. We had such a fun time working on this project and are looking forward to more team projects in the future.

Reflection

Given more time, we would have loved to continue to build out branding and identity for The Center. Additionally we would have preferred to get even more user feedback and conduct user testing (it was difficult to find many test subjects at 1:00 am). In an ideal world, we would have liked to get feedback from The Center directly, but unfortunately they were closed the weekend of this project. We are looking for an opportunity to show them our work and see what they think about it! Overall, we managed our time well and were able to accomplish work we were proud to show the world. Thank you to everyone that gave us input and feedback throughout the design process and UX Fest for this great opportunity.