Mirror

Responsive e-commerce site

This is a project I did for a fake clothing company, it took me about 2 months to go through the whole process.

Background

Their main ideal is to make any type of clothing accessible to everyone. They can do that better with an updated online store for people to use with ease.

Research

I interviewed 4 people: 3 females and 1 male, ranging from ages 30-34.

Out of all of them, I found 3 favored shopping online due to convenience and better deals, while 1, which was the male, favored shopping in-store because of social connection and the physical experience of being at the store and trying the clothes on himself.

What was valued was convenience, discounts/cheap prices, ability to try on clothes.

Convenience was the biggest factor. They want to get shopping done quickly with their busy schedules with the convenience of shopping online.

Persona

Based off my interview results, I chose the persona of a overworked, busy girl who highly values everything convenient as she has minimal down time.

Empathy Map

I got to understand her better by finding out more about what she sees, hears, feels, does as well as what her pains and gains are.

Storyboard

This story shares what her daily routine is with the pain points and how she is able to achieve her goal of shopping online amongst her hectic schedule.

Sitemap

Features and content of site were organized using results from card sorting with users and competitive analysis.

User Flow

This user flow shows how a user would complete the task of searching for a dress and checking out.

Wireframes

In addition to the main navigation, I added social connectivity section with Instagram inspiration, where users can get inspiration for outfits and purchase selected items if available.

Also added was a Personal Wardrobe section where users can get styling advice with outfits tailored to their style along with getting their perfect fit with a 3D modeling system, so they can view how the clothes will look on them before purchasing.

Branding

The logo and color palette were made more modern and fashionable as well as being appealing to people of all ages and genders.

UI Design

Prototype

I updated my low-fidelity wireframes prototypes with high fidelity UI.

{Click the play button on the image below to view Prototype.}

Usability Testing

User testing with 4 participants was done in person. All of them thought the process was simple enough and pretty self explanatory. the main trend I saw was they wanted to use guest checkout instead of signing in to complete the process, which at that point Guest checkout was not very noticeable, one didn't even see the link at all.

Next Steps

After the unexpected feedback I updated the prototype making guest checkout more noticeable. Other pages will be completed and tested similarly.