Hierarchy before decoration
Make the next useful action obvious, then use visual styling to reinforce—not compete with—that priority.
Product Design · UI/UX · Mobile & Dashboard
Product Design Across Mobile & SaaS
Two interface systems designed for very different contexts: an emotionally engaging mobile wellbeing experience and an information-dense SaaS dashboard.
RoleProduct design, UX direction and interface design
DeliverablesUser flows, information architecture, visual systems and responsive interface patterns
SurfacesConsumer mobile app and desktop SaaS dashboard
The design challenge
One discipline, two very different product contexts.
This combined case study shows how the same product-design principles adapt across form factors and audiences. Affirm turns daily wellbeing actions into a calm, encouraging mobile journey. Flexy organises navigation, profile activity and content-heavy workflows into a scalable desktop dashboard system.
Good interface design is not one visual style applied everywhere. The mobile experience needed emotion, focus and touch-friendly simplicity, while the dashboard needed density, predictable navigation and reusable patterns. Each design had to solve its own product problem while remaining consistent and buildable.
Shared product principles
Different expression, consistent design thinking.
The visual systems change with the user and context, while the underlying decisions remain grounded in clarity, consistency and implementation.
Patterns that can scale
Design repeated cards, navigation, actions and states as systems so additional screens remain consistent.
Context-aware density
Use focused, touch-friendly flows on mobile and structured density where desktop users need more information at once.
Engineering-aware decisions
Create layouts, components and behaviours that translate cleanly into responsive production interfaces.
Design 01 · Mobile wellbeing experience
Affirm
A guided home experience for affirmations, intentions, gratitude and short mindfulness content. The design uses a calm night-time atmosphere, prominent daily guidance and progressive sections that encourage a lightweight repeat habit.
Key design decisions
- A single scroll-led daily journey
- Large touch targets and clear primary actions
- Card hierarchy for intentions, gratitude and quick-reset content
- An emotional visual language balanced with readable content
Design 02 · Desktop SaaS dashboard system
Flexy
A modular dashboard concept for profile activity, social content and broader application workflows. Its persistent navigation, content columns and repeatable panels establish a structure that can accommodate many tools without losing orientation.
Key design decisions
- Persistent sidebar for a broad product architecture
- Primary and secondary columns for scannable information hierarchy
- Reusable cards for feeds, people, media and account details
- Consistent spacing and action placement across content types
Product design capability
More than polished screens.
These concepts show how product thinking, interaction structure and visual direction work together across both focused consumer journeys and operational desktop products.
- Translated product goals into clear screen hierarchy and task flows
- Designed reusable interface patterns rather than isolated screens
- Balanced brand expression with accessibility and content clarity
- Considered responsive behaviour and developer handoff throughout
- Created visual direction appropriate to each product audience
Design toolkit
FigmaProduct DesignUI DesignUX DesignInformation ArchitectureDesign SystemsResponsive DesignPrototyping
The outcome
Range across form factor, audience and complexity.
Together, the concepts demonstrate range without losing product discipline: a distinctive mobile experience built around emotion and habit, and a practical desktop system built around navigation, density and repeatable components.
Need product design support?
Shape the user journey before engineering complexity grows.
Bring the product idea, workflow or existing interface. We’ll help turn it into a clear, buildable experience.