E-commerce · UI/UX · Responsive Web
lil&ann
Interactive Jewellery E-commerce Website
- Client
- lil&ann
- Role
- UI/UX Designer
- Tools
- Figma, Photoshop, Illustrator
- Scope
- Responsive E-commerce Website
Overview
A new way to explore jewellery, where design meets interaction.
lil&ann is a jewellery brand offering a range of contemporary pieces. The website was designed to create a distinctive online experience, featuring an interactive homepage where jewellery pieces rotate to reveal navigation options. Combining a refined visual identity with intuitive product browsing, the design brings together creativity and functionality across all screen sizes.
Challenge & Goals
Make jewellery exciting to explore. Make every interaction feel effortless.
Interactive navigation
Create a distinctive homepage where rotating jewellery pieces reveal navigation options, making exploration engaging and memorable.
Refined visual identity
Establish a cohesive colour palette, typography, and visual style that complements the jewellery without overwhelming the interface.
Seamless product browsing
Design clear, responsive catalog layouts that make it easy to explore jewellery categories and view individual product details.
Information Architecture
Structuring the lil&ann experience.
A clear website structure connects the interactive homepage with jewellery browsing and essential brand information, making navigation simple and intuitive.
Interface Exploration
A jewellery display that comes to life.
The homepage transforms a static jewellery display into an interactive navigation experience. When visitors hover over a jewellery set, it rotates to reveal the menu option hidden behind it, creating an engaging way to explore the website.
Initial Display
Jewellery pieces and editorial imagery are showcased within a custom display, creating an elegant and visually engaging homepage.
Hover to reveal
Navigation Revealed
Hovering over a jewellery set triggers a rotation, revealing the navigation option behind it and allowing visitors to explore the website.
Wireframes
From pencil sketches to interactive experiences.
Hand-drawn wireframes helped explore the homepage interaction, page layouts, and product browsing experience. These early sketches established the structure and key design elements before bringing them to life through high-fidelity interfaces.
Interactive Homepage
Catalog & Product Details
Visual Direction
Refined visuals.
Functional design.
Logo
- #FC97FD
- #F9F9F9
- #2D2D2D
- #929292
Colour palette
Spartan
(Header)
Montserrat
(Body)
Selected Component
UI Elements
Key Design Decisions
Designed to stand out.
Made to explore.
01/ Interactive navigation
An unexpected way to explore
A jewellery display transforms into navigation, revealing hidden menu options when visitors hover over individual pieces.
02/ Background exploration
Keeping the focus on jewellery
Stage-inspired backgrounds were explored before settling on a neutral grey backdrop that keeps the interactive display in focus.
03/ Product discovery
Simple and organised browsing
A clean catalog layout combines product imagery, category filters, and clear information to make discovering jewellery effortless.
04/ Responsive experience
Designed for every screen
Layouts adapt across desktop, tablet, and mobile, maintaining a consistent visual identity while keeping navigation accessible.
Responsive Design
One experience. Every screen.
The website was carefully adapted across desktop, tablet, and mobile, ensuring that the interactive homepage, jewellery catalog, and product details remain visually consistent, accessible, and easy to navigate across different screen sizes.
Final UI
The complete
lil&ann experience.
Outcome & Reflection
A distinctive jewellery experience blending creativity and functionality.
The project brought together interactive navigation, elegant visual design, and intuitive product browsing into one cohesive, responsive website. From hand-drawn sketches to preparing individual jewellery assets for animation, the final design strengthened my ability to balance creative ideas with practical usability, adapt to client feedback, and create engaging digital experiences.
Have a design project in mind?
Currently taking on web and brand work for small studios and product teams. Tell me what you're making and what it needs to do.
Available for new projects
A good first email
- 01What you're making
- 02Where it stands today
- 03Timeline and budget range