Lofree is a concept redesign of a lifestyle e-commerce website for a keyboard brand. The goal was to improve navigation, visual consistency, and overall brand storytelling.
Type
E-commerce
Position
UI/UX Designer
Duration
2 month, 2025
Tools
Figma, Notion
My role & Responsibilities
UI/UX Designer - full design cycle, case study
Research & Analysis
To understand the problem:
Competitor analysis
Conducted user research
Information architecture:
To improve user's experience:
Restructured navigation & home page
Improved product page
Improved catalog page
Wireframing & Design strategy
To define content placement and screen structure:
Created wireframes
To validate information hierarchy and usability:
Conducted design review
UI Design & Prototyping
Created:
interactive prototypes
UI kit
Outcome
The redesign of Lofree’s website resulted in a more intuitive and emotionally engaging user experience.
By improving navigation, clarifying product information, and updating the visual identity, the website now better reflects the brand’s creative and nostalgic personality.
Goal
Enhance user experience by making website navigation as intuitive as possible
Make it easier to find technical support contact information
Add brand identity by showcasing unique product photos on the homepage and in the categories to attract more attention, while maintaining simplicity in style
Solution
Redesigned the website to make navigation intuitive and customer support easy to access.
The homepage and catalog highlight Lofree’s unique product photography, adding emotion and brand identity.
Refined the visual system with balanced colours and modern typography to create a clean, cohesive, and warm user experience.
01 step
I reviewed three online stores specialising on mechanical keyboards (Mechanical Keyboards, Logitech, Keychron) to evaluate:
Usability
Style
Product presentation
Brand communication
Key findings
All competitors offer a smooth shopping experience with simple navigation and clear product organisation.
Each brand uses minimalist design principles, but Lofree’s homepage lacked strong visual storytelling compared to others.
While product details are well covered, most sites have long text blocks that slow down information scanning.
Competitors like Logitech use visuals that connect emotionally (people using the products). Lofree’s site feels colder and less human.
Insights for design
Lofree’s redesign should keep the same usability level while adding more emotional connection and brand character.
Highlight Lofree’s beautiful photography and lifestyle feel on the homepage to strengthen the first impression.
Simplify content presentation through structured sections and visual hierarchy to improve readability.
Introduce warmer imagery and friendly tone to express the brand’s nostalgic personality.
03 step
Before
Users couldn’t find a way to contact the brand. There was no visible customer support section, and many reviews mentioned frustration about not being able to change or exchange orders after purchase.
The navigation is simple, but users can’t preview products quickly - they have to open each product page to see how it looks.
After
I added a dedicated "contact" link in the main navigation and made customer support options more visible. This small change improved the sense of trust and gave users clear guidance when facing issues with their orders.
I made it possible to preview how the product looks in real life when hovering over it - this improves the selection process by reducing the number of clicks needed to view product details.
Home page visual experience
Before
The homepage didn’t reflect Lofree’s unique aesthetic - even though the brand has beautiful product photography, users didn’t see it immediately. The page felt too neutral and didn’t evoke an emotional connection.
After
I redesigned the homepage to high product visuals upfront creating a stronger first impression. Hero sections now feature high-quality lifestyle imagery that communicates the brand’s personality and craftsmanship.
Catalog page
Before
The catalog page felt static - users couldn’t easily notice new or promoted products. There was little visual engagement, and the layout didn’t encourage exploration or purchases.
After
I introduced an interactive dashboard featuring a dynamic product block that highlights new arrivals or promotions. It can be easily updated, attracts more attention, and motivates users to explore and buy.
Product page structure
Before
Product descriptions were long and difficult to read. Key information like specifications or features was buried in text, forcing users to scroll and search.
After
I simplified the content layout by dividing product details into mini-sections (e.g., “Specs,” “Features,” “Care,” etc.). This structure helps users quickly find the information that matters most, making the page easier to scan and more engaging.
04 step
I developed a refreshed visual system as a learning exercise - exploring balanced accent colours, modern typography, and subtle stylistic updates. The goal was to create a cohesive, elegant, and emotionally warm atmosphere while maintaining the brand’s recognisable identity.
05 step
The redesign of Lofree’s website resulted in a more intuitive and emotionally engaging user experience.
By improving navigation, clarifying product information, and updating the visual identity, the website now better reflects the brand’s creative and nostalgic personality.
Key findings
Simplified user flow
Stronger first impression
Improved readability and product structure
Refined brand style
On personal level:
Practice UX problem-solving
Improve my UI design system thinking
Strengthen my ability to connect visual style with user experience goals
Tamara Chuhai 2025. All rights reserved