Role: UX/UI Designer
Tools: Figma, Jira, Google Suite
Duration: 12 months
Industry: Health/Medical Technology
AllergyTracker
Transformed an outdated allergy
app into an accessible tracking
tool, achieving 20% faster
task completion
Accessible UX design for users with
cognitive impairment
At a glance
Key outcomes and visual highlights
The redesign transformed a functional but unintuitive medical app into an accessible tracking tool that works for users experiencing cognitive impairment during health episodes.
1
Redesigned AllergyTracker's user flows, visual brand identity, and interface patterns while adding accessibility features like voice recording. From clinical aesthetics to warm, approachable design and streamlined symptom logging - reduced task completion time by 20% and enabled seamless medical reporting.
Key metrics:
20%
Faster Task Completion
Reduction in time to log symptoms
Voice
Recording Feature
Critical accessibility during reactions
Accessible
Design Approach
Designed for cognitive impairment
Visual highlights:
The challenge
AllergyTracker needed to work for users experiencing cognitive impairment during allergic reactions but the existing interface was creating barriers
Functional MCAS tracking app faced usability challenges preventing effective symptom logging when users needed it most.
2
Understanding the real users
There are no ideal tracking solutions for people with MCAS.
MCAS (Mast Cell Activation Syndrome) causes unpredictable allergic reactions that can impair cognitive function.
Scattered
iPhone notes, Google calendars, paper journals - no consolidation
Ineffective
Brain fog and cognitive impairment during reactions make tracking impossible
Incomplete
Missed data leads to ineffective doctor visits and poor health outcomes
The daily struggle
MCAS patients describe the challenges of managing symptoms with current tools.
During reactions
"There is a vast array of symptoms with different types of reactions... trying to collate all that information while suffering symptoms which can be quite severe is challenging."
Survey participant
During reactions
“
Tracking Methods
"Writing them in a book but it's difficult... usually due to feeling unwell and then not remembering what the notes meant sometimes"
Survey participant
Tracking Methods
“
Medical Communication
"Often we forget to mention important things to doctors - because of being disorganized
and/or in pain and reactive."
Survey participant
Medical Communication
“
My approach
Research-driven approach to understanding user needs and designing accessible solutions
I focused on learning directly from users, then creating solutions that actually work for them
3
How I understood the problem
Combining technical evaluation with user insights
I tested the existing app for usability problems, partnered with a patient organization, and surveyed 12 MCAS patients
Usability Assessment
Evaluated existing app using standard UX principles
Non-profit Partnership
Collaborated with patient organization for authentic access
User Surveys
Gathered insights on current tracking methods and pain points
What I learned
Key insights that shaped my design decisions
I discovered that cognitive accessibility was the core problem. Users needed interfaces that worked during reactions when their thinking was impaired.
How I solved the problems
I focused on three areas that would make the biggest impact for users.
Conventional UX Patterns
Applied standard mobile patterns like search functionality, conventional sorting, and familiar navigation flows.
Warm Visual Design
Replaced sterile medical colors with warm earth tones and updated the logo from a clinical magnifying glass to an approachable heart symbol.
Voice Recording for Accessibility
A key solution was adding voice recording capability so users could capture reaction details in the moment, then complete structured data entry later when cognitive function returned. This directly addressed the core accessibility challenge.
Visual solutions
Designing for accessibility during medical episodes
I transformed the interface to work when users needed it most; during reactions when cognitive function is impaired.
4
Visual transformation
Complete interface and brand redesign
Replaced clinical aesthetics with warm, approachable design to reduce medical anxiety. The complete transformation addressed user feedback about the app feeling 'cold and clinical' during an already stressful health experience.
Before/after home screens
Complete interface redesign creating a welcoming, organized experience that reduces cognitive load during medical episodes.
Original “Home” page
Cold, clinical, sterile branding
No home screen/overview
Unconventional way of adding a user
Home page redesign
Conventional mobile navigation patterns
Personalized greeting creates welcoming experience
Clear data overview helps users track patterns
Proper visual hierarchy guides user attention
Clean, friendly interface reduces medical anxiety
Recent activity readily available for quick reference
Logo redesign
From clinical magnifying glass to caring heart symbol. The complete brand system includes a standalone mark for different applications
Original logo
AllergyTracker
Logo redesign
Mark
Color palette
Replaced sterile medical colors with warm, approachable earth tones to create a calming experience for users already stressed about their health.
HOOKER’S GREEN
#4C6D67
XANTHOUS
#EAB454
#DEA37C
BUFF
#436F8F
OLD LACE
#1D304B
BABY POWDER
Improved task flow
Redesigned the core user journey from category-first thinking to task-oriented exposure logging
The original app forced users to think in categories before they could log reactions. The new approach prioritizes the user's immediate need to record what happened, making the logging process more intuitive during medical episodes. This change was driven by a key insight from user research:
"Figuring out which ingredient I might be reacting to, i.e. vinegar, sautéed garlic, onion, or some inert ingredient like corn filler. A lot of inert ingredients are not listed"
- Survey participant
Flow comparison
The original flow forced users to think "What category does this item belong to?" before they could log an exposure. The new flow starts with "I had an exposure" and allows users to add details progressively, even when the trigger is unknown.
Original flow:
Complex navigation patterns
Users forced to select category first before logging
Category-based thinking doesn't match user mental model
No clear entry point for unknown triggers
Redesigned flow:
Clear “Add” entry point
Progressive disclosure keeps interface clean
Exposure-first approach allows unknown triggers
Form-based flow guides users through data entry
Simple action selection reduces cognitive load
Quick access from home screen
Task-oriented approach matches user thinking
Interaction improvements
Implemented conventional mobile patterns like alphabetical sorting and search functionality for symptom selection. Added API autofill suggestions to reduce typing burden and help users quickly identify common allergens and triggers.
API autofill:
Original symptoms screen:
List items in random order
Lack of visibility of selected items when the user scrolls down
No heading for different groups
Redesigned symptoms screen:
Selected items appear at the top
List in alphabetical order
Improved UX writing: “Done” to “Save”; informing the user their changes will be saved
Voice recording for accessibility
Added voice capability so users can capture details during reactions when typing is difficult
The voice recording feature directly addresses the core accessibility challenge - allowing users to log critical information even when cognitive function is impaired. Users can record details in the moment, then complete structured data entry later when they're feeling better.
Testing approach
Created a functional prototype that removed visual design elements to focus testing on information architecture and task flows.
User feedback and design fixes
Based on testing insights, I made targeted improvements to address specific usability issues.
Logging exposures confusion
Simplified the task flow to reduce confusion about next steps and make the logging process more predictable for users during reactions.
Greyscale mid fidelity prototype:
The original flow left users confused about their progress and next steps after logging symptoms. I redesigned the screens and flow to provide clear feedback and guidance at every step.
“I was a bit confused when after choosing my symptoms the task took me directly to more information about the symptoms.”
- Tester
Original flow:
No progress indicator - users lost track of where they were in the flow
Broken feedback loop - No confirmation that actions were successful
Confusing next steps - after selecting symptoms, users didn't know what happened
Redesigned flow:
Progress bar added -
clear progress indication shows users where they are
Confirmation modal - Immediate feedback explains what was saved and offers next steps
Improved visual hierarchy - Primary actions stand out, secondary options are clear
Consistent navigation - Users always know how to proceed or go back
This solution separated the filtering interface from the main content, giving the 'select all' function proper context and visual hierarchy within a dedicated space.
"I think the select all button should look different than the rest of the filters for the report, maybe a select all checkbox instead"
- Tester
Select all button fix:
Unclear 'select all' mixed with categories
Added dedicated filter interface
Select all' now stands out clearly
Symptom grouping problems
Users expected symptoms to be organized alphabetically rather than by medical categories. I restructured the grouping to match users' mental models and search patterns.
“If I had a rash I would look for 'R' not instinctively think to look for 'Skin' if I didn't know the name of the group”
- Tester
Symptoms list fix:
Medical categories don't match user expectations
Alphabetical organization matches mental models
"The calendar icon was too light, I didn't notice that it was there"
- Tester
Testing data:
50% of users couldn't find the calendar button
Calendar icon too subtle to notice
Redesigned calendar:
Increased contrast and visual prominence
Calendar visibility issue
The calendar icon was too subtle for users to notice during testing. I increased the visual prominence and contrast to ensure this critical navigation element was discoverable.
Testing and validation
Validating solutions with real users to ensure accessibility goals were met
I built a greyscale prototype to test core flows without visual distractions, then validated the design with 5 users on key tasks.
5
Select all button issue
Users couldn't distinguish the 'select all' option from individual symptom choices. I added a filter modal which allowed me to make the select all function clear and obvious
Results and impact
Quantified improvements and user feedback validation
I built a greyscale prototype to test core flows without visual distractions, then validated the design with 5 users on key tasks.
6
Quantified results:
Testing with MCAS patients validated that the redesigned interface reduced friction during critical health tracking moments.
20% reduction in task completion time
User feedback: "Clean & intuitive"
Voice recording became most-requested feature
Successfully modernized medical app with conventional UX patterns
Key metrics
Critical measurements that demonstrate the success of accessibility-focused design decisions.
20%
Faster Task Completion
Reduction in time to log symptoms
Voice
Recording Feature
Critical accessibility during reactions
Accessible
Design Approach
Designed for cognitive impairment
Reflection
Designing for accessibility in critical moments
This project taught me that medical UX requires a fundamentally different approach than consumer apps—one that prioritizes reliability and accessibility over innovation.
7
What I'd do differently:
If I had more time and resources, I would have conducted observational studies with users during actual mild reactions to better understand real-world usage patterns. I also would have involved healthcare providers earlier in the process to understand how the data gets used in medical consultations.
Project outcome:
I delivered an accessible medical tracking tool that works reliably during health crises, proving that thoughtful UX research can make life-changing differences for users with chronic conditions.
What I learned:
Medical UX is about reducing cognitive load - Users experiencing health episodes can't handle complex interfaces or non-standard patterns
User partnerships unlock real insights - Collaborating with the MCAS organization provided authentic user access that surveys alone couldn't achieve
