Geleyi - An online shop for African-inspired fashion designers
“
A marketplace where designers sell and shoppers browse like a gallery.
Geleyi
E-commerce website, 2012-2013
About the project
Geleyi is an online marketplace where African-inspired fashion designers sell clothing for women. The team asked us to redesign the site so it worked for designers and shoppers alike. We wrote the user journeys, drew wireframes with functional specs and designed the responsive shop and the designer dashboard for desktop, tablet and mobile, from late 2012 to spring 2013.
Project
Geleyi Online Shop
Industry
Fashion E-commerce
Location
Online store
Date
2012-2013
“
Client Request
Geleyi asked for a minimal shop that looks beautiful, feels playful to use and serves designers, shoppers and an admin.
Geleyi
Project brief, 2012
Design Pillars
Core UX Principles
Large product photos in simple grids, so shoppers can browse the shop like a gallery.
Shoppers buy and save favorites, and designers add outfits and follow sales in their own dashboard.
Desktop, tablet and mobile layouts for the pages, from the home page to checkout.
UX Research
Three Users, Three Journeys
Shoppers
They want to browse freely, save favorites and buy, sometimes with a custom touch.
Designers
They add outfits, list them for sale and keep an eye on their activity.
The Admin
Geleyi’s own team runs the store, so we mapped an admin journey next to the other two.
The Challenge
Problem Statement
The Main Goal: One Shop for Designers and Shoppers
Geleyi had to work as a store for shoppers and as a sales tool for designers. Shoppers needed detailed product pages and a clear three-step checkout. Designers needed a simple way to list outfits and follow orders, and the whole site had to feel friendly and full of energy.
“
Fantastic company, Creative and experienced team! Working with the team is something I’d be doing very much again, and again.
Geleyi, CEO
Geleyi E-commerce Website
Our Approach
Solution
A Responsive Shop and a Designer Dashboard
Proto-personas, user journeys, wireframes with functional specs, then the visual design of the shop, checkout and designer dashboard at three screen sizes. It is an example of our Website Design work.
01 - UX Groundwork
Brand voice, proto-personas, user stories and journeys for shoppers, designers and the admin, late 2012.
02 - Wireframes and Specs
A 52-page wireframe set with functional notes, February and March 2013.
03 - Visual Design
Responsive designs for the shop, checkout, account pages and designer dashboard, finished in April 2013.
Before & After
The Blueprint & Evolution
Shopper View, Designer View
The same layout carries shoppers and designers through their own parts of Geleyi.
Shopper: the home page, with the main menu and a spring banner.
Designer: the dashboard, with a sales chart and a link to pending orders.
Design
Key Features
A Sales Dashboard for Designers
Designers see sales over time, pending orders and their most favorited and most shared items on one page.
A Three-Step Checkout
Shopping cart, payment method and order confirmation, with the current step marked in red at the top.
Design System
Visual Identity
Typography
A clean sans serif in a few sizes, with bold for prices, labels and section titles so busy product grids stay readable.
Color Palette
An orange offer bar, off-white pages and red and blue buttons, with colors taken from African fashion.
UI Logic
One style sheet of menus, favorites lists, product cards, messages, forms and button states, reused across the shop and the dashboard.
Impact
A Complete Shop, Ready to Build
Results for Geleyi
Geleyi received the UX documents, the wireframe set and 145 design artboards for the shop, checkout, account pages and designer dashboard.
Geleyi
Result
By the Numbers
145 Artboards
Desktop, tablet and mobile designs for the shop and the designer dashboard.
3 User Journeys
Shopper, designer and admin, mapped in October 2012.
3 Screen Sizes
Pages designed for desktop, tablet and mobile.
Research
Mapping the Journeys
Personas, Stories and Journeys
We started with Geleyi’s brand voice and proto-personas, then wrote user stories and mapped how shoppers, designers and the admin move through the site. Testing a prototype showed that navigation on small screens was hard, so we made search easier to find. You can see some of the results below.
Final Showcase
The Geleyi Online Shop
