Knitwrth
A redesign of Knitwrth's web & mobile interface
Brief
Choose a fashion brand and redesign its homepage and product page for both mobile and desktop, ensuring alignment with the brand's graphical profile.
Solution
The redesign highlighted Knitwrth's craftsmanship and exclusivity with a bold hero section, interactive product drops, and seamless social media integration. Clean aesthetics, intuitive navigation, and detailed product displays enhanced user engagement.
I created responsive prototypes for desktop and mobile, integrating social elements, refining typography, and aligning with Knitwrth's modern, minimal brand identity.
Today’s design
New design
Design changes
Refined Visual Identity & Branding
-
Bold hero section with high-quality visuals for a premium feel.
-
Dark, high-contrast UI to convey a high-fashion aesthetic.
Typography & Color Enhancement
-
Selected Poppins for its modern and legible style.
-
Created a cohesive color palette for readability and brand consistency.
Product Display & Navigation
-
Refined product grid for better clarity and browsing.
-
Added hover states & interactive elements for engagement.
User Engagement
-
Integrated Instagram feed to enhance brand storytelling.
-
Added "You Might Also Like" recommendations to boost exploration.
” This doesn't just look like a school project — it could easily be something for a real client. You really have an eye for design.”
Jonathan, UI course instructor
Style Guide
To ensure visual and functional consistency across the website, I created a compact style guide that outlines the core components of the design system—such as typography, color palette and UI elements.
The design process
Step-by-step
Step 1 - Current design
I started the process by analysing the exciting website) the landing page and the product page) to understand how it is structured.
Desktop
Mobile
Step 2 - Competitor analysis
I started the process by exploring reference projects to gather inspiration and better understand how premium furniture brands present themselves online. This helped me identify effective layouts, visual styles, and interaction patterns suitable for Home of Furniture's aesthetic.
.png)
Step 3 - Lofi prototypes (wireframes)
With the site map established, I began by developing low-fidelity wireframes to define the core layout, user flow, and content hierarchy. These early prototypes allowed for rapid iteration and feedback without the distraction of visual details.
Desktop
Landing page
Product page
.png)
Mobile
Landing page
Product page
Step 4 - Hifi prototypes (final design)
Once the structure felt solid, I transitioned to high-fidelity prototypes—refining the visual design, interactions, and UI components. This step was crucial for validating the overall user experience and aligning the final look and feel with the brand and user expectations.
Desktop
Landing page
Product page
Mobile
Landing page
Product page
A glimps into Figma:
