Oxford Computer Consultants - Healthcare - Client Project

CarriMe Menopause App

About the project

Wilkinson Hall Ltd needed a functional MVP prototype of a healthcare app that helps women navigate the menopause. The prototype needed to demonstrate key user journeys to be able to demo to investors.

Key functionality included: symptom tracking and monitoring, data visualisation of symptoms, and in app resources to help manage symptoms.

My Role

I was the sole UX Designer for this project. I was responsible for all of the UX activities ranging from user research to developer ready UI designs.

Client: Wilkinson Hall

Role: UX Design Lead

Design tool: Figma

Year: Jan 2020

Project duration: 9 weeks

UX budget: 30 days

Design Process

Double Diamond

We delivered the project in 4 phases using the double diamond design approach.

UX activities

Discover: secondary research, user interviews, competitor analysis

Define: personas, IA, medium-fidelity clickable prototype

Develop: high-fidelity screens, style guide

Deliver: usability tests, design iteration

Key Deliverables

Personas

The insights obtained from the secondary research and 1-1 user interviews were used to create personas for the user groups of perimenopausal, menopausal and postmenopausal women.

Medium-fidelity clickable prototype

From the user research I created a medium-fidelity clickable prototype based of the user needs. I gave a demonstration with the client and product team to receive feedback on the navigation, content and user journeys.

We prioritised the design feedback and I updated the wireframes for them to be developed into the first iteration of a functional prototype.

Branding

The client had no existing branding so I created a stylescape in order to help define the design direction.

Feedback from the client was that she wanted a branding style that would strike a balance between confident, vibrant and approachable. She had a strong preference for using the colour yellow.

From the feedback, I agreed with the client the following implications for the UI elements:

use a light tone of orange (not yellow) as a primary colour – this would help with accessibility
use bright and vibrant shades for other primary colours (avoid the use of desaturated tones)
strong and colourful images
bold font styles for headings
rounded corners for card and button elements
plenty of white space for a clean and modern look

Developer UI Kit

In order to maintain design consistency I created style guidelines for the mobile developers.

High-fidelity wireframes

The insights from the usability testing were incorporated into the next design update. The developer UI kit and high-fidelity screen were designed using figma