mobile & website redesign


We Are All Smith is a e-commerce site that sells jewelry for men. Based in California, U.S.A, they cater to young men with a beach look and feel. This shopping experience I felt could be optimized. 

deskopt mockup2.png

Problem |
How might we design an optimized experience for We Are All Smith’s customers as opposed to their current UX design?

My Role | UX Researcher & Designer
Being a design and research project, I took 3 different approaches to gather insights through industry analysis, evaluation & user testing. Based on the data I gathered, I executed research synthesis and design.


Design Process
Phase 1: External & Internal Problem Scan

What is the most important part of an e-commerce site?

Industry Research & Analysis
To redesign informative websites such as e-commerce platforms, an important question to ask is: “What is the most important part of an e-commerce site?”

Based on these findings, I moved forward to We Are All Smith’s product and checkout page and noticed they were seriously lacking a good UX.

E-Commerce Site importance.png
We Are All Smith’s Existing Product Page

We Are All Smith’s Existing Product Page

We Are All Smith’s Existing Checkout Page

We Are All Smith’s Existing Checkout Page

Competitive & Comparative Analysis
The ranking was based on the clarity of the product pages and the effectiveness of the checkout process. The result shown was that We Are All Smith fell short among others within and out of it’s category.


Further analysis on clarity and ease of use:

Comparative Matrix

Comparative Matrix.png

Heuristic Analysis

Based on Jakob Nielsen’s “10 Usability Heuristics for User Interface Design,” the site received a score of 6 out of a possible 10 based on heuristic design principles.


Phase II
Varied User Research

User Testing on Existing Mobile

Scenario: You are a guy who likes to dress well, looks good physically, and considers jewelry part of his accessories closet.

”Now please purchase a necklace and another item on We Are All Smith’s existing mobile site.”


Card Sorting


I ran a card sort to identify the flaws in We Are All Smith’s information architecture. I created the cards by using products from the website, making sure the selections represented products from all categories.

The research result suggested that the current object navigation could not categorize precisely with hundreds of items.


Phase III
Research Synthesis


Customer of We Are All Smith:

Persona Jesse.jpg

Problem Statement

”How might we redesign for optimization so it may grow potential customers?”

CircledArrowRight_183187 copy.png

Design Objectives

Redesign product navigation
Prioritize current features
Enhance visuals on existing UI elements

Phase IV
Ideation & Design Iteration

Feature Prioritization

Impact Matrix.png

Site Map Redesign


Business & User Centered Solutions
Necklaces and Bracelets were broken down into additional categories from minimal categories. One-of-a-Kind was now highlighted as unique jewelry that should be promoted. Hats was kept but T-Shirts were broken down into categories while a Lookbook was added.

Phase IV

From Low-Fidelity to High Fidelity Design

Navigation Redesign

Existing We Are All Smith Navigation Wireframe

Existing We Are All Smith Navigation Wireframe

Revised Filtered Navigation Wireframe

Revised Filtered Navigation Wireframe


Homepage/Navigation Redesign

Product Page Redesign

Checkout/Cart Page Redesign

Final User Testing

| Scenario: You are a customer who is looking to quickly and easily find and combine/create a jewelry collection of bracelets and necklaces.

”Now please purchase these items on the revised mobile site.”

Final Takeaway.png
Orange Color Block Final Poster.jpg

Next STeps

Redesign Checkout & Product Page for Desktop
Redesign for events and promotions/deals