Hilop
- Role
- Product Designer
- Platform
- Web app · Mobile app
- Audience
- Digital wellness customers, subscribers, and product operators
- Year
- 2025
- Tools & skills
- Figma · Next.js · Tailwind CSS · Framer Motion · GSAP
Context
Project overview
A digital wellness product designed for web and mobile, with e-commerce purchasing, subscription management, usage analytics, and reward workflows.
Planning work in this area? Explore Frontend UI development that protects design intent for the scope, deliverables, and collaboration process.
Problem
Business and user problem
A wellness product needs to make purchase, subscription, usage, and loyalty flows simple enough for users to trust and repeat.
Contribution
Role & responsibilities
- UI/UX design
- Web and mobile design
- Frontend development
- E-commerce workflow design
- Subscription and reward UX
Users
Audience
Digital wellness customers, subscribers, and product operators
How the work was structured
Design approach
- Structured analytics and usage screens so users can understand value over time.
Information architecture
Core user flow
- Step 01
Discover a wellness product
- Step 02
Purchase or subscribe
- Step 03
Track usage over time
- Step 04
Review rewards
- Step 05
Manage the subscription
Decision · reason · result
Key UX decisions
Connect purchase and subscription management
Customers need continuity from discovery and checkout into an ongoing product relationship.
The experience links commerce, subscriptions, and account controls in one product flow.
Make long-term value visible
Usage analytics and rewards only help when users can understand progress over time.
Analytics and loyalty patterns reinforce the ongoing wellness experience.
Interface areas and reusable patterns
UI system
Scalable patterns
Design system & components
The system includes product cards, checkout states, subscription controls, analytics panels, rewards UI, and responsive product layouts.
Across screens and contexts
Responsive behavior
- Designed web and mobile flows around product discovery, purchasing, subscription management, and rewards.
Design-to-code continuity
Development and handoff
- Implemented frontend patterns with Next.js and motion libraries for a smooth product experience.
Documented result
Project outcome
A complete digital wellness product experience across web and mobile.
Clear purchase, subscription, analytics, and reward workflows.
Frontend-ready product UI with reusable components.
Questions
Project details
What product flows were designed for Hilop?
Hilop includes e-commerce checkout, subscriptions, usage analytics, loyalty rewards, and web/mobile product screens.
Related thinking
