A fashion brand celebrating cultural heritage and natural beauty through handcrafted hair accessories.
My Role
UX/UI Designer
Web Developer
Storyteller
Karalty’s scrunchies carry meaning, every color, fabric, and pattern reflects cultural identity, legacy, and confidence. The client wanted a website that feels modern and elegant, but still honors that heritage.
Their goal was a clean, powerful digital presence that allows the scrunchies’ bold colors to speak for themselves. The emphasis was on authenticity: celebrating African-inspired textiles while presenting them in a refined, accessible way.
I created a structure that brings the products forward visually, with strong contrast, clear photography, and smooth hierarchy — letting the brand’s story shine without overwhelming the user.
The Process
The Process
Sketch
Before creating the digital low-fidelity wireframe, I sketched the first layout by hand to visualize the structure, sections, and user flow. This early drawing guided the design direction and helped establish a clear foundation for the homepage.
Wireframe (Low-Fidelity Prototype)
The wireframe established the information hierarchy, visual balance, and user flow for the homepage.
Key design decisions included:
Simplified navigation bar (Feature, Ankara, Rayon, Satin, About) for intuitive browsing.
Clear CTAs (“Shop” and “View More”) positioned after every collection section.
Visual storytelling with large imagery to highlight textures and fabrics.
Final Website (High-Fidelity + Development)
Customized with the brand colours and typography inspired by African royalty:
Gold for luxury and confidence
Deep purple and navy for sophistication and heritage
Clean sans-serif fonts for modern readability.
The final site was implemented using Wix
Accessibility improvements:
High colour contrast for WCAG compliance
Clear alt text for all product images
Logical heading structure for screen readers
From Sketch to Final Design
*
From Sketch to Final Design *
A quick look at how the project began, from the first rough sketch to the wireframe and the final website design.
Sketch - The first step a piece of paper and a pencil
Next step a Low-Fidelity Prototype made in Figma
The end result: A beautiful website
Outcome
Enhanced brand identity and online presence
Smooth and engaging navigation experience
Mobile-responsive layout with improved readability and clear hierarchy
Tools Used
Figma – Wireframing, Visual Design and Image editing
Wix – Development & CMS