01
Research and framing
Research focused on how shoppers evaluate premium accessories on mobile, where trust tends to break down, and what makes online retail feel either curated or cluttered.
Mobile commerce experience
Elegant
A premium mobile commerce experience for jewelry and leather shopping, focused on creating a more curated browsing experience, reducing hesitation during purchase, and strengthening customer trust from discovery through checkout.
Role
UI/UX Designer
Focus
Mobile commerce UX
Scope
Discovery to checkout flow
Deliverables
Research, IA, wireframes, UI
Overview
Designing a premium shopping experience that feels confident, not crowded.
Elegant is a mobile-first retail experience focused on contemporary jewelry and leather products. The focus was to improve product discovery, create a more intentional browsing experience, and build trust during purchase decisions.
The challenge
Many mobile commerce experiences become visually busy once categories, filters, promotions, and payment steps compete for attention. For premium products, that friction can quickly reduce trust and make the journey feel transactional instead of curated.
The design response
The design focused on creating a calmer content rhythm, clearer category structure, stronger product emphasis, and a checkout flow that supports confidence through each decision point rather than overwhelming users with too many competing elements.
Design goals
What success looked like for this experience
The design focused on creating an experience that feels elevated while remaining practical. The design needed to support product storytelling, faster category recognition, and a smoother path to purchase on smaller screens.
Clearer
Category and product structure that reduces ambiguity early in
the journey.
Calmer
Spacing, contrast, and content restraint that make premium
products stand out.
Safer
Checkout and payment stages designed to reinforce credibility
and confidence.
Stronger
Clear articulation of design decisions and their impact on user
experience.
Process
From browsing behavior to a cleaner retail structure
The design process followed a structured product design approach: understand user expectations, organize the information architecture, test the browsing path through wireframes, and then move into a high-fidelity interface with stronger visual consistency.
02
Information architecture
User journeys were simplified around a few high-value actions: browse collections, inspect products, review cart contents, and complete payment without losing context.
03
Wireframe exploration
Layouts were used to test hierarchy, screen density, and whether product imagery had enough room to carry the premium tone of the brand.
04
Interface refinement and visual system
The final UI focused on visual calm, stronger product prominence, cleaner typography, and a more polished flow from home screen to checkout.
User understanding
Two user mindsets shaped the experience
The experience needed to support both inspiration-led browsing and confidence-led purchasing. Designing for both helped balance visual elegance with practical reassurance.
Kelly — mobile-first browser
Kelly represents users who browse in short sessions and respond strongly to visual presentation, quick category recognition, and a homepage that helps them understand what deserves attention first.
Jessica — confidence-driven shopper
Jessica represents users who are ready to purchase when the product details, price, and checkout flow feel reliable. She values trust signals, clarity, and a purchase path that feels secure rather than rushed.
Flows and architecture
Reducing friction before designing the interface
Before moving into final UI, flows and structure mapping were used to ensure the core journey remained focused. That helped keep the experience from becoming overloaded with too many paths, especially on mobile screens where every choice competes for space.
Primary browsing and purchase flow.
Information architecture and content structure.
Entry points
Collections, featured categories, and promotional content were organized so users could enter the shopping experience from multiple meaningful starting points without getting lost.
Decision support
Key moments such as category selection, cart review, and payment were streamlined to reduce hesitation and keep the user oriented throughout the purchase journey.
Content hierarchy
Only the information that helps users move forward should receive visual emphasis. That principle guided the spacing, grouping, and order of elements across the experience.
Wireframes
Exploring layout before visual polish
Wireframes helped define content hierarchy, browsing structure, and screen priorities before moving into high-fidelity design. This stage helped shape how product imagery, navigation, and checkout content could work together without making the experience feel crowded.
Key design validations
- How the homepage could feel premium while still supporting quick product discovery.
- How category browsing and navigation could stay simple without hiding important options.
- How checkout structure could guide decisions with less friction and better content grouping.
Early structure and layout direction
Early sketches were used to map homepage flow, category entry points, product card rhythm, and the overall balance between imagery and core shopping actions.
Refining hierarchy and shopping flow
Mid-fidelity layouts helped define clearer category views, product listing behavior, cart review structure, and the sequencing of information needed to support confident purchasing.
Final UI
A refined interface built around clarity, confidence, and product focus
The final screens were designed to make the experience feel more composed and trustworthy. The interface relies on hierarchy, spacing, and product imagery to create a clear and premium browsing experience.
Homepage with featured products.
Category and menu structure.
Collection browsing experience.
Focused product exploration.
Cart review and pricing clarity.
Order summary experience.
Support and contact structure.
Payment step with simplified inputs.
Outcome · Experience impact
Design outcomes
The final experience improves browsing clarity, strengthens product focus, and supports more confident purchase decisions across the mobile journey.
Clearer browsing flow
Improved category recognition and reduced visual competition across key entry points, making it easier for users to scan and decide where to go next.
Stronger product focus
Used hierarchy, spacing, and imagery to make product discovery feel more intentional, allowing products to stand out without unnecessary visual noise.
More confident checkout experience
Simplified content grouping and step structure to support trust, helping users move through purchase decisions with less friction.