OAT Care Hub
Care Platform
UX/UI Designer
2025
OAT Care Hub is a live care platform. Note: the existing portfolio describes it as a skincare application, but the actual product domain (skincare vs. clinical or care workflow) has not been verified for this case study and should be confirmed from the live application.
UX/UI Designer
2025
OAT Care Hub is a live care platform. Note: the existing portfolio describes it as a skincare application, but the actual product domain (skincare vs. clinical or care workflow) has not been verified for this case study and should be confirmed from the live application.
Project introduction
OAT Care Hub is a live care platform. Note: the existing portfolio describes it as a skincare application, but the actual product domain (skincare vs. clinical or care workflow) has not been verified for this case study and should be confirmed from the live application.
The problem
Needs verification. Working framing (skincare): skincare guidance is scattered across influencers, portals, and labels, leaving users unsure what to use, when, and why. If the product is instead a clinical or care-workflow application, the problem statement, users, and constraints should be rewritten after inspection. This is a hypothesis pending verification, not confirmed research.
Discovery and research
Available evidence: the live application's sign-in experience and brand system. Product domain is unverified. No formal research has been provided.
Proposed: first confirm the product domain and primary users from the live app; then 5 to 8 interviews with target users; a workflow analysis of the current routine or care flow; a usability test of onboarding and the primary daily flow.
Design rationale (no formal research documented): the system frames care as a calm ritual rather than a clinical checklist, using a soft natural palette and time-of-day grouping. If the product is a clinical workflow tool, the rationale would shift toward operational clarity, privacy, and task efficiency. Verification of the actual domain is required before this rationale is final.
User personas
Illustrative personas, reconstructed to communicate target users. Not research-validated.
Elena
Skincare beginner, 24"I want to know what I am putting on my face and why."
Elena is overwhelmed by conflicting advice online and has never built a consistent routine. Illustrative persona.
- · Build a simple daily routine
- · Understand ingredients
- · Stop buying things that do not work
- · Influencer hype
- · 10-step regimens
David
Sensitive-skin professional, 41"I need it gentle and explained."
David has reactive skin and needs clear, non-irritating guidance he can trust. Illustrative persona.
- · Avoid flare-ups
- · Follow a minimal routine
- · Trust the source
- · Vague product claims
- · Clinical jargon
User journey map
Illustrative journey map, reconstructed from the intended product flow.
Working framing: a user completes a short assessment, receives a personalised routine, and follows a daily timeline with ingredient notes. Reconstructed from the intended flow; to be re-confirmed against the live app.
Assess
Completes assessment
"Will this take forever?"
NeutralRoutine
Receives personalised plan
"Finally, just a few steps"
PositiveMorning
Follows AM timeline
"This is calm, not stressful"
PositiveLearn
Reads an ingredient note
"Now I understand why"
PositiveAdjust
Updates routine
"It adapts with me"
PositiveInformation architecture
Product structure reconstructed from the intended navigation and flows.
- · Sign-in
- · Assessment
- · Routine setup
- · AM timeline
- · PM timeline
- · Ingredient notes
- · Progress
- · Adjust routine
Low-fidelity wireframes
Retrospective wireframe reconstruction based on the product's structure, not original pre-build artifacts.
High-fidelity UI
Reconstructed UI representation. Real screenshots from the live app are to be supplied.
These frames are on-brand reconstructions. Authentic screenshots from the live application will replace them once supplied.
In context
A mix of mobile, tablet, and web views showing how the product lives across devices.
Design system
Ink
#0F172A
Primary text
Olive
#7A8B7A
Accent and mark
Canvas
#F7F9FC
Background
Surface
#FFFFFF
Cards and inputs
Display - 8xl, light
Heading - 3xl, light
Body - lg/xl, relaxed
Label - mono xs, uppercase
8pt base unit; 12-column grid; 0px corner radius
- · Primary button - olive fill
- · Secondary button - hairline outline
- · Input - surface, hairline
- · Timeline card - surface
- · Tab bar
Design decisions and trade-offs
Problem (skincare framing): scattered guidance overwhelms users. Decision: frame care as a ritual using time-of-day grouping and ingredient transparency one tap away. Implementation: olive-green shield-and-trident mark, white-on-soft-beige surfaces, clear typographic hierarchy. Expected effect: lower overwhelm and higher trust through transparency. Trade-off: ritual framing may underserve power users who want a fast checklist. If the product is clinical, the trade-off reverses toward density and speed.
Product demonstration
TaskComplete assessment and follow the daily timeline
- 01
Sign in and complete the short assessment.
- 02
Receive a personalised routine.
- 03
Open the AM timeline and mark steps done.
- 04
Tap an ingredient note to learn why.
Outcomes and reflection
- 01
Sign-in and authentication (visible in the live app)
- 02
Assessment and onboarding
- 03
Daily care timeline
- 01
Product domain (skincare vs. clinical workflow) is unverified and must be confirmed from the live app.
- 02
Case study is based on the public sign-in experience; a full feature audit is pending.
- 03
No formal usability testing documented.
- 01
Confirm product domain and rewrite the case study accordingly.
- 02
Run the proposed research plan.
- 03
Add accessible high-contrast and large-text modes.
The key uncertainty here is the product domain itself. Until the live app is inspected, the design rationale is a reasonable hypothesis, not a verified account. Confirming the domain is the first priority.
What people say
Awaiting testimonialsReal client and collaborator testimonials will appear here once supplied. Add them to a project as a testimonials array.