Project UX Lead
Team
List follows case study
Project Sprints
1. Research
2. Website design
3. Native app design
Date & Duration
12 weeks | Aug-Oct 2020
The Problem
Over 300,000 people in the UK suffer from Irritable Bowel Disease (IBD), a chronic condition that takes a huge toll on sufferers' lives, and typically managed with a cocktail of drugs and frequent clinical appointments.
Project Overview
An end-to-end re-design project with UX conducted in parallel with UI, SEO, Brand Strategy & Social Media, and in collaboration with an in-house client UX/UI Designer and Product Manager. Our UX scope was divided into two sprints; a full website redesign and a mid-fidelity re-architecture of their flagship ‘My IBD Care’ app.
Who are Ampersand Health?
Ampersand Health work alongside world-renowned researchers, clinicians and patient groups to create personalised digital therapy apps that help provide support in the self-management of long-term, inflammatory conditions such as IBD & Rheumatoid Arthritis.
Research
Our discovery process revealed why the highly targeted user group weren’t embracing Ampersand or the app as intended. Through competitive review, website & app auditing, user journey analysis, stakeholder interviews & workshops, we dug into:
- Product successes & challenges-to-date
- Medical 101 for IBD & Rheumatoid Arthritis
- Industry insights & considered differentiators
- AH’s technical ecosystem
- Long-term business goals
Refining a clinical service map detailed the typical stages of diagnosis and treatment for new patients, patients in remission, and the B2B clinicians experience. Mapping each step against the Ampersand purchase funnel pin-pointing the user bottlenecks for us to address.
- For new sufferers, the waiting period for clinical referrals built anxiety which exacerbates the condition, reducing trust in clinicians. Significant personal research is conducted at this point, meaning website content & app guidance would help draw users towards the AH brand.
- Differing levels of knowledge exist depending on how long one has been suffering for. Should the app functionality & content be customised based on length of time since diagnosis?
Understanding the intricacies of the user journey from pre-diagnosis through to sustained remission was the first step toward answering the main question of...
How might we encourage and nurture positive digital behaviours that will benefit ALL sufferers of these conditions?
Sprint 1: Website Definition & Design
Discovery Insights
- Regular, compelling and topical content
Sufferers needed a reason to visit. Creating website content hubs with expert advice specific to each inflammatory condition would establish user trust and brand authority. This would drastically increase qualified traffic landing on the site.
- Why download the app?
Poor visibility of download links, minimal social advocacy, and not sufficiently aligning app features with physical and mental symptoms was limiting download potential. AH needed to position themselves as an authority with helpful resources.
Ampersand’s legacy site housed insightful video content but needed a considerable design refresh, generally lacking sufficient medical prowess to cement them as a source of comfort and support for IBD sufferers.
Inspired by other digital healthcare businesses as well as indirect platforms in the fitness, wellness and banking sectors, our modular approach would utilise large product screenshots, effective white space, concise feature descriptions and importantly, clear calls to action.
Sitemap
I refined the IA into a four-level taxonomy with Ampersand ‘For Individuals’ and ‘For Clinicians’ clearly porting users to relevant content.
Wireframing & Content
Ten modular wireframes across desktop and mobile breakpoints including the Homepage, Product (for both IBD & Arthritis apps), About Us and Contact were designed. Additional pages to help increase visitor engagement and improve SEO included:
- an Expert Advice & Resources blog
- An Article & Event details
- An SEO-specific landing page template for associated topics of Digital Therapy, Symptom Tracking, Diet Tracking, Bowel Movement Tracking, Sleep Tracking & Medication Tracking.
Design - Desktop wireframes
Iterations included:
- A ‘Register’ CTA within the nav drop down, producing a dual-path conversion to give users flexibility to either register on the website prior to download, or entirely through the app onboarding flow.
- An ‘upcoming products’ tab displayed R&D items (Dermatology & multiple Sclerosis) to further bolster brand position as the industry expert.
hi-fidelity execution - Desktop, Tablet & Mobile
Sprint 2 - The ‘My IBD Care’ App
Legacy Feature Set
Free
- ‘Feelings’ tracker - A Likert scale input for Mood, Exercise, Diet, Stress, Pain and Sleep, populating a graph-based report to show weekly trend.
- ‘Symptoms’ tracker - A 9 question wellness questionnaire designed by clinical experts populating a graph-based report to show weekly trend.
- Hospital connect (Limited to two hospital partners at the time of the project)
- One-way messaging system (Clinician to Patient)
- Medication input
- Appointment input
- Resources Library
Premium
Via monthly / annual subscription:
- Courses - 4-28 day courses categorised into Sleep, Medication, Wellbeing and Life in Lockdown.
- Short courses (1-10 minute)
- Daily activity inputs called ‘Action Planning’ such as a sleep diary and custom goal setting
- Weekly progress reports
Discovery Insights
Onboarding - A convoluted process was hindering sign-up
Reducing the sign up steps and moving a succinct feature tour to follow them would limit user frustration and increase the conversion rate from 37% upto the 50% target.
Conventions - a familiar native app design would simplify use
The UI was causing a confusing visual hierarchy, and similar gestures were used for different functionality. Placing accessibility and familiarity at the heart of the app would remove any need for interpretation, particularly for an older demographic of arthritis sufferers.
Wayfinding - An intuitive navigation and feature architecture would aid use
Useful functionality like medication, appointments and clinician messaging was hidden behind a nav that prioritised the commercial course content. A collaborative app IA exercise established an optimal flow for the user..
Transparency - The commercial model was unclear
The premium course content and dashboard reports represented the most enticing functionality, but these sitting behind a paywall wasn’t immediately obvious. Free users could only track their daily “feelings”, unless they upgraded or accessed a 7-day trial which Google Analytics data showed just 3% of users actually doing. Revised thinking around the commercial model and how it was communicated was required.
So, how might we build functions that established healthy and persisting habits?
Establishing long-term, consistent use of My IBD Care was vital in order for sufferers’ conditions to improve and move them toward a period of remission. Working with AH’s in-house designer and Product Manager, I created a mid-fidelity design that could be repurposed easily for other apps in AH’s roadmap.
Two priorities for the app established during our research and workshops were:
1. Enabling users to engage more and be able to see their personal progress swiftly enough that app use remains discrete if used in public. (The topic of embarrassment was raised by multiple sufferers.)
2. To draw increased user data input that would help guide Ampersand’s future product development.
Improving the IA
The collaborative IA session granted wider exposure to user needs and the design thinking done to date. It also steered the five path nav being re-architected into a more intuitive four, with Home, Stats, Courses & Profile.
Design Epics
Our recommendations were organised into six design epics, three of which were prioritised to add the most value during our six weeks of sprints:
- Homepage / Dashboard
- Data Input
- Reporting / Feedback
- Courses area
- Commercial Model
- Design System
*Something to note is that user testing wasn’t within our remit. Our process focussed on the design before the AH in-house team would conduct prototype testing. So I relied on native app best practice, reviewed a range of lifestyle and fitness apps, and had weekly crits with my UX colleagues to iron out any kinks.
Epic 1 - The Homescreen Dashboard (2 weeks)
As the app’s entry point, users need to immediately grasp the value of inputting data and see a snapshot of their personal progress. Taking inspiration from the likes of Daylio, Babylon Health, My Fitness Pal & Sleepio, the homescreen was re-structured to facilitate wayfinding from a user’s perspective and data collection from a business perspective.
Features included:
- Modules for free-user data entry
- Modules linking to other key app features such as current courses and reports.
- Personalisation, showing relevant courses & article based on use
Epic 2 - Data Input (2 weeks)
Making data input simple, natural and impossible to ignore was vital in activating consistent user behaviours from which they’d benefit. To ensure this my design placed an increased focus on the points at which they could enter their latest feelings, symptoms and bowel movements, with full screen overlays.
Features included:
The addition of a nav 'Plus' button to update the core trackers at any stage of app journey.
Epic 3 - Reporting & Feedback (2 weeks)
Providing clear, concise, graphical and numerical feedback would help users gauge the progress of their condition and how their habits were driving either positive or negative trends.
Features included:
- Positioning all six ‘feelings’ as visible versus the legacy design which hid 3 behind a carousel.
- For the user's to reap the full benefits of the app they need to be able to interpret feedback with ease. Enhanced data visualisation, simple and descriptive qual phrases, and a bold final UI execution combined in provided useful reporting.
The Final Product
Following UX sign-off I oversaw the UI execution, with Magnus aligning the app visual layer with the wider brand work developed by the team.
Results
The project enabled a demonstration of a 34% increase in disease control (a proxy for quality of life), measured by the IBD-control PROM questionnaire.
Feedback
Following the project the website went into development, albeit in two phases in order to a meet a business deadline. The feedback gathered from the client team’s mid-fidelity app testing was equally positive and, despite not being originally in scope, we were asked to create a lite design system for their in-house designer to apply for the MY IBD Care relaunch.
An immediate action off the back of our recommendations was to revise the app’s commercial model. The previously used trial period and user-premium was removed in favour of a partner-funded revenue model, thereby not requiring payment from sufferers of the conditions in question.
A happy client team ensured that my work on the brand is set to continue in late 2021.
Learnings
Working on a real life problem that causes people so much grief was hugely satisfying, as was working closely with the team behind the products. Our time constraints unfortunately meant digging into the behavioural science behind the course content, as well as potential gamification, wasn’t possible. However, my main takeaway was the importance of acknowledging and challenging legacy thinking when it comes to aligning with longstanding in-house teams. That’s where the most progress was made.
Team & Roles
Neil Sampson (UX Director), Francesca Pizzi (Website UI), Magnus Andersen (Design System & App UI), Melissa Byleveld (SEO), Rebecca Chan (Project Manager), James Lees (Brand Strategist).
View another?
Other projects
get in touch
Follow
