Role: Product designer, UX researcher
Client: This is a personal project, working off of prior existing UX research and product strategy work with the client, The Lupie Fam. I will address the org as “client” for this case study.
Tools: Figma, Figjam, Claude (Sonnet 4.6), ChatGPT, Google Gemini, Notion, Google Drive, Fontanello, Colorpick Eyedropper, GoFullPage
Project Length: 3 weeks
Key Outcomes:
Conceptualized & designed Lupus symptom tracker flow & community board mobile designs
Refined & translated existing desktop design into new mobile design system for light mode & low contrast, dark mode
The Lupie Fam is a non-profit organization that provides support and empowers individuals with Lupus by providing a support network and informal meetups, medical micro-grants, care packages, and wellness partnerships. Existing website is 1 page, pictured on the right
Goal: The Lupie Fam wanted to do a revamp and launch a new website with new offerings in the form of an MVP (minimum viable product) in order to receive seed funding to expand.
Mobile-first design:
Primary users are women that get their information from mobile → Designed mobile-first for iPhone 16, larger phone (good for lupus symptoms) that is comfortable for a woman’s hand & designed buttons to be located in thumb zone
Color palette & typography:
Read Reddit discussions about Lupus and saw how symptoms can include being sensitive to UV light and would turn down phone brightness & appreciated lower contrast without bright colors → Asked Claude to generate color palette for dark mode & lower contrast that was at least WCAG AA accessibility standards
Reviewed clients’ social media & website → Get customer’s existing color palette, logo, and fonts and identified primary color of purple and blue. Later learned purple is the color associated with lupus
Designing around eye strain:
Lupus symptoms include eye strain → Opted for larger font sizes with body copy at 18px. Used ChatGPT to create a mobile type scale with great contrast
Designing for mobility issues:
Watched YouTube videos of people with Lupus and saw the extent of mobility issues (shaky hands, weak grip) → Made sure all buttons were at least 44 x 44px following WCAG accessibility to make it easy to press buttons
Saw hand weakness possibility → Add possibility to answer & record symptoms via voice-controlled virtual assistant
Used vertical layout of symptom answers as it is better for users with movement issues
Designing around cognitive dysfunction:
Cognitive dysfunction is a common symptom → Wanted to reduce cognitive load by using visual & written feedback
Used Likert scale (5-answer option) for applicable symptom questions to reduce amount of options and be able to capture symptoms
Designed symptom menu to have larger square buttons to have less items in 1 screen where users can quickly find their symptom (designs inspired by Airbnb’s listing page)
Designing around fatigue:
Thought if someone was really tired someday, they may not have energy to log symptoms → Added buttons to log symptoms yesterday or custom date
Ability to add most basic symptom data & meet user at their symptom level → Ask basic symptom questions to record symptoms & add ability to add notes of symptoms for a general day or for a specific symptom if they have more energy or want to add more details
Designing for medical needs:
Customization to user needs→ List more common lupus symptoms in symptom tracker, but allow users to add, remove, and edit placement of symptom buttons
Inspired by competitive analysis of Conquer Lupus → Allow user to see symptom trends over time to show medical team
Designing community messaging board:
Took inspiration from Reddit, Patients Like Me, and Concussion Fix (dedicated forums platforms or platforms with community boards for specific illnesses) → Made sure to have tag symptom for users to search and filter for specific aspects