top of page
Portfolio Logo.png

E-commerce Store

Obi is an established streetwear retailer making high-end fashion accessible to everyone for over two decades. Now, they are looking to expand their customer base by digitalizing. 
​
The challenge:
​
  • Build a modern e-commerce site. 
  • Help move old warehouse inventory.
  • Better understand their customer base.

Role: UX/UI Designer, Researcher

Tools: Figma, Illustrator, Photoshop

Timeframe: 1 month

Client: Design Lab

01 Research

  • User Interviews

  • Mapping Needs, Goals & Motivations

  • Persona Building 

  • Customer Profiling

02 Solution

  • Card Sorting

  • Dendrogram

  • Site Map

  • User Flow

03 UI Design

  • Style tile

  • Wireframing

  • High-Fidelity Mockups

  • Prototyping

04 Learnings

  • Key Insights

  • Challenges Forcast

  • Next Steps

RESEARCH

01 Research

Kick-off Meeting

​Obi was an old school company playing catch-up in the e-commerce game but were clear about what they wanted:

​

  • They wanted a very modern aesthetic themed around a military green.

  • Frequent customers say they prefer Obi because they always feel well taken care of and can always find trending clothes at great prices. The company wants to like to stay true to their brand image as they digitalise.​

  • They want to better understand customer behaviour through user interviews and secondary research.

Kick Off.png
What are the users' pains, needs, & motivations?

Obi developed great customer service by intimately understanding the types of customers that come to their store and catering to them individually. To stay true to this, we conducted user interviews to understand how customer behaviour varies online. Here are our user interview findings:

Pains, Needs, Motiviations.png

Click To Enlarge

Building archetypes & personas

Understanding "needs, pain points, and motivations" helped develop our product map, but they weren't relatable enough for everyone. So I further synthesized our findings into customer profiles and personas.

​CUSTOMER PROFILES
Archetypes.png

Click To Enlarge

PERSONA
Aiden.png

Click To Enlarge

Key Research Findings

  • The only brands that seem to stay ahead of trends are the ones that create them by utilising influencers across a wide range of industries and niches. Good examples of outliers in the industry would be Gucci and Zara.

  • As trends are in constant flux, Obi has to make its manufacturing and distribution operations leaner to meet each customers’ unique tastes and spending habits.

  • Return rates are ludicrously high as clothes often don’t fit, and impressions on items can change once delivered.

  • To stay true to their renowned customer service, they must have a wide variety of brands and offer free shipping & returns.

Key Points 2.png
SOLUTION

02 Solution

Card Sorting: Similarity Matrix & Dendrograms

Being an urban fashion brand certain items wouldn't fall into any one category so I conducted several card sorting exercises to establish product categories.  

Click To Enlarge

Site Map

Next, I did business needs analysis and combined those learnings with the information gathered from previous card sorting exercises to build a site map.

Site Map.png

Click To Access

User Flow

In preparation for designing the UI, I studied and mapped out different e-commerce flows, to build a shorter ameliorated purchase flow:

Obi User Flows_2x.png
PURCHASE FLOW
UI DESIGN

03 UI Design

Style Tile

The client wanted the site’s colour palette to be themed around a military green to represent the eco-friendly and rugged nature of the streets and their products, and that’s what I based the style tile on.

Style Tile.png
Designing The UI 

To avoid the prospect of the clients hating the end design, before starting, I asked Obi to make a Pinterest mood board of the kind of UI they wanted. Once I had this, I paired the aesthetic with design patterns and all research I had done.

WIREFRAMES

Click To Enlarge

HI-FIDELITY MOCKUPS

Click To Enlarge

PROTOTYPE
User Testing

Here are the main points from early user testing:​

​

  • All participants performed tasks as easily.

  • Participants mentioned that they found the minimalist aesthetic a lot easier to understand and navigate because it felt less cluttered, unlike other sites.

  • It seems the modern athletic made people trust the website a lot more because “it looks more legit”.

Obi Usability Testing_2x.png

Click To Access

LEARNINGS & NEXT STEPS

04 Learnings &
     Next Steps 

Scoping Out Features 

Using the feature roadmap we built. Next, we need to scope out how the features function and if they're operationally feasible.  

Next Steps.png
My Learnings 

  • You're going to make mistakes: Easy to say, very hard pill to swallow. Considering thing was my first design project, I wasn't prepared for the number of mistakes I made. I found myself increasingly paranoid about every decision that I made, but that's all right because making mistakes and trying to provide for them is how you develop your craft as a designer. 

​​

  • Read Refactoring UI: This was a book suggested to me by a senior designer, and I best look into if I'm to get better at UI.

​

  • Ask 'why' gently: I'm endlessly curious but I tend to ask questions directly, I need to be careful not to intimidate people with all your “why” questions.​

​​

bottom of page