Online Apparel Website

Timeline: February 2023

Platform: Responsive Website

Role: Lead Designer & Researcher

Introduction

Portfolio Project #3

While doing some personal shopping, I came across some urban themed clothes websites which I found quite stylistic and appealing. One of the prompts I received for my 'Daily UI Challenge' was a 'Landing page'. I was quite inspired by those websites so I decided to create a similarly themed landing page for an urban apparel website.

A few weeks after completion, I returned to this screen and started iterating on it. Once I was finished, I decided to realize this into a full blown apparel website and use it as a portfolio project.

My Role

I led the entire design process for this project from end-to-end.

My responsibilities included: Project planning, user research, wireframing, prototyping, high fidelity designs and testing the prototypes.

Problem

1 / Lack of Product Information

One aspect I noticed quite often in some of the less popular apparel websites is the lack of product information and details. For customers to make an informed buying decision, it is imperative to provide them with all the details they need in order to establish trust and promote a positive user experience. As a result, one of the major points I aimed to address was ensuring that product display pages and general product cards are informative and descriptive.

2 / Unclear calls to action

A common occurrence in more stylized websites is that the theme of the site obscures the user experience and as a result calls to action aren't easily recognizable and the user isn't guided effectively throughout the website. To address this, I want to ensure that any calls to actions are highly visible and stand out compared to the rest of the content so that users know exactly what to expect.

3 / Cluttered Designs

Another common problem in stylized websites is that the design causes the site to become cluttered or confusing. These sites often end up being crammed with too much text or images making the design too busy. To avoid this, I wanted to retain a very distinct brand identity and visual style while still mainting a clean, simply and modern design that users will easily be able to navigate effectively.

Ideation

My design process began with researching apparel websites such as Urban Outfitters, ASOS, American Eagle, Namshi, etc.

I used these websites and noted down aspects I liked and aspects I didn't like to use as reference for my own apparel website.

Thereafter, I began to use sites like dribble, behance and awwwards to find inspiration, see examples of UI's for this type of website as well as identify components/aspects I like and can implement into my own designs.

Once I had a rough idea of the pages and components needed for my website, I created a high level user flow that outlines a general user journey throughout the website. This is obviously subject to change but I noted down the squares as pages which will need designs and circles as actions the user will take when navigating the website.

After that, I began wireframing, which usually takes a few iterations till I arrive at a general design I'm content with.

Wireframes

Wireframe #1

Home Page

Wanted to emphasize the visual style in the home page and attract the users attention to the centerpiece.

Thereafter, on the right side I wanted to showcase some of the product and guide the user how to proceed with the shopping experience.

Wireframe #2

Men's Listing Page

Wanted to showcase the categories with example images in a carousel so the user is able to freely browse.

After testing, I included as much product information in the listing page as possible so that users can clearly identify if the product is in their size, color etc and have a quick and efficient user experience.

Wireframe #3

Product Display Page

Seeing as the product is the centerpiece of attention, I wanted to ensure its highlighted and provided various angles from which to view the product so the user is informed.

Wireframe #4

Checkout Page

To ensure a frictionless experience, I kept the checkout/payment page fairly standard so that users are familiar with how to navigate it and can complete their purchase journey with ease.

High Fidelity Designs

HiFi Design #1

Home Page

To create a strong visual style and brand identity, I used a more boxy design style and highly contrasting colors.

HiFi Design #2

Men's Listing Page

To guide the users attention, I ensured all important/relevant information is highlighted with the main gold color. This helps the user easily locate information they are searching for.

HiFi Design #3

Product Display Page

Wanted to include as much product details/information as possible without cluttering the page.

HiFi Design #4

Checkout Page

In order to let the user know which step in the checkout process they are in I included an indicator of which step is complete and which step is pending.

Design System

Color Scheme Board

Initially had a yellow/black focused color scheme but found that it was a little distracting and didn't fit well with buttons. As a result, I adjusted the color scheme slightly to this gold color which suited the website better.

Typography Board

Since the website focused on an urban theme and street clothes, I wanted a stylistic font that meshed well with urban imagery.

Icons Board - Project 3 - Design System.png

Icon Board

Decided upon an icon pack I felt suited the color scheme and urban imagery.

Testing

In order to test the user experience, I conducted a usability study with 4 members of varying ages/occupations. This usability study was conducted in the wireframe stage as well as the high-fidelity stage.

Usability Study Findings:

1. No clear way to search items, access cart and open front page collection (to remedy this, I reworked the top navigation bar and the collection front page display).

2. May go over the current number of category cards (to remedy this, I switched the category cards to a carousel which can be adjusted to display more or fewer category cards).

3. Users wanted to see all angles of a product shot immediately rather than scroll through the images (to remedy this, I displayed all product shots on the left of the selected shot, so users can navigate directly to any product shot they desire).

4. Users wanted to more product information in the listing page to help with browsing and selection (to remedy this, I added size and color availability to each product card).

5. Wasn't clear how to go back a stage during checkout (rather than number the pages, I displayed all the sections using color to indicate which were completed and which ones were in progress, this also allowed users to click on any section to navigate back to it).

Prototype

Prototype Link

Future Steps

1 / Further Testing

The usability studies conducted for this project were done with a small sample of users. As a result, to further understand the experience from a user perspective, this should be tested with more individuals of varying proficiency with this type of service.

2 / Further Iterations

Once more user feedback is received and I'm able to understand the user journey further, the designs and prototypes should be adjusted and iterated upon to accommodate user feedback.

3 / Maintain and Update Project

Over time, I will have to maintain this project by constantly updating it with current design trends and principles and ensuring it matches what a user will expect.