A one-stop online store that enhance shopping experience of sneaker lovers.

Mobile Web App Design

View prototype
Objective
Hevas is a UI conceptual design project as part of my UI design apprenticeship at CareerFoundry. I was tasked to build a cohesive brand for an eCommerce web app, and design intuitive interfaces that allows users to easily find and shop for products without going into a physical store.
My Role:

UI, Branding & Visual Design

Timeline:

3 weeks (May 2020)

Tools:

Adobe XD, Illustrator, Usability Hub, InVision, Google Draw

Deliverables:

Brand Guideline, User Flow Diagram, Wireframes, Interactive Prototypes, Preference Testings, Mobile Mockup

Project Background
The sneaker industry has seen remarkable growth in the past few years, along with the rise of fitness culture, where people are pursuing comfy yet stylish outfits. With tons of different brands available in the market, shopping for the perfect pair of sneakers has become more challenging. I, myself, have recently gone through an exercise of endurance, browsing through countless athleisure brands’ websites, trying to find a comfortable pair of sneakers for long-distance city walks, while stylish enough to fit into my day-to-day outfits.

After talking to a couple of friends who have had the same experience, I noticed there is a need for a one-stop sneaker shopping site to streamline the shopping experience. During my research, it has come to my attention that there is a tremendous wastage in the footwear industry along with high production. By means of protecting the environment, sustainable sneakers are the way to go. That is how I developed the concept of Hevas!
Challenges
There were two key challenges I had to tackle in this project:
1. Create a cohesive brand that communicates a consistent message across products

2. Design intuitive interfaces that align with the brand’s visual image, and allow users to accomplish their goals seamlessly
Creating a Cohesive Brand

Brand Guideline

A brand guideline is a vital tool for maintaining a cohesive brand. It allows me to set rules that define the brand and how it should be communicated to the users, both visually and contextually.

Considered the project scope, I decided an abstract brand guideline in PDFs format would be the most effective medium. I used a 12 -column grid to help me with organizing the document content with flexibility.
Guiding Principles
After conducting market research into various athleisure brands and lifestyle concept stores. I outlined the guiding principles of the brand by defining its key values, mission and personality:
Brand Name Ideation
Brand Logo

With the brand name and direction in place, I began sketching out logo ideas that best represent the brand. Modern, clean, sleek, lightweight and sustainable are the brand image I was going for, from there, I decided to use a simple logotype with a small twist in the letter H as the Hevas brand logo.

Brand Color

To create a clean and effortless vibe, I chose a subtle and muted color palette as the brand colors.

Typography

San-serif typeface was used across the brand to convey a contemporary and clean image.

I chose Brandon Grotesque as the brand logotype given its functional and cohesive look. Its geometric nature adds a warm touch to the overall feel of the brand.
Tisa Sans Pro has a humanist structure with minimal stroke contrast. I used it for body text across the brand given its friendliness and legibility.
Stepping into the shoes of the users

User Stories & Flows

Based on the project requirements, I identified six essential tasks my potential users would accomplish when interacting with the product. To ensure I am designing with the users in mind, I defined user stories and mapped out user flows to visualize how they can reach their goals.

As a new customer, I want to...
Have access to advanced filtering options,
so that I don’t have to browse through a lot of products to find what I’m looking for.

Access the inventory without having to register,
so that I can make sure the store has the product I’m looking for before having to create an account.

Place multiple items in a shopping cart,
so that I can purchase more than one item at a time.
As a return customer, I want to...
Save items that I cannot buy to wish list,
so that I can purchase them at a later date.

Review my previous activities,
so that I can view previous purchases history

Shop somewhere with a flexible returns policy and good customer service,
so that I can easily return what I do not want
User Flow Diagram
Crafting design solutions

Wireframes & rapid prototyping

To validate my thoughts and ideas, I sketched out possible design solutions with pen and paper before turning them to digital wireframes with Adobe XD. These low-fidelity wireframes allowed me to run tests with potential users early on the process.

User Testing

Utilizing InVision App, I recruited testers from my professional network to run through scenario-based user tests to ensure the flows and layout I crafted are usable and making sense to my potential users.
Scenario-based user test
Task 1:
Search for a sneaker

You are a new customer to an online sneaker store. You want to buy a newly released sneaker but do not want to spend more than $100. Which steps would you take to view product options?
Task 2:
Check Inventory

Now that you have found a sneaker that you like (Tree Rambler it is!), you want to know if it is available in your size (i.e. size 8) and your preferred color of navy blue. Which steps would you take to accomplish this?
Task 3:
Add sneaker to shopping bag

Since it is running low on inventory, you want to add the sneaker to your shopping bag.
Task 4:
Save to wish list

Upon checkout, you decided you don’t want to purchase the sneaker just yet, but you do want to save the item so you don’t have to search again next time when you come back. Which steps would you take to accomplish this?

Mobile-First
User Interface Design

The feedback from my rapid testing validated my wireframes. After fine-tuning the design, I was able to develop mid-high mockups based on the brand guideline I have defined.
Homepage
User Account / Wishlist
Filter Options
Product Grids / Filtered Results
Product Page
Shopping Bag

PreFerence Test

Product Page - Shoe Size Selection
71% users
prefer this design
“Less clicking needed,
I can see immediately what is in stock vs out of stock”
Expanded Layout
29% users
prefer this design
“This design is more compact, takes up less space so I can focus on the product itself”
Dropdown Menu

FINAL DESIGN

Product Page
Allow users to view product details, select the desired color and size for purchase.
Filter Search Feature
Filter options allow users to find a product more effectively.
Filtered Results
Product grid showing only products that meet the filtering criteria; Tag Labels allow users to easily remove filters.
Shopping Bag
Users can update the selected color, size or move the item to wishlist for future purchase if they changed their mind last minutes.
User Account
Allow users to check status of their current order and review order history. User can submit a return request by selecting the “Manage Order” button.