Yustyle webpage project image.
Duration:
This is some text inside of a div block.
Product:
This is some text inside of a div block.
Role:
This is some text inside of a div block.

Summary:

We started the research by building specific personas for the website, based on real users interview & empathy maps. Then we fleshed out the base idea by identifying pain points and investigating on how other clothing stores addressed those in a competitive audit. And lastly we conducted two usability studies to flesh out a minimum viable product. The main conclusion we came with was that making use of the available empty space was gonna make our product stand out from the competition, which has very crowded layouts.

Project overview.

Diagnosis:

Users are afraid of shopping online because they have little to no say on how the product is going to look when it arrives.

Goal:

Pass the power of choice and creation to the user, by giving him specific tools and information to choose and design the product they want.

Responsibilities:

User research, wireframing, prototyping, mockup, testing.

Mockup of the current project on a device

User pain points:

Accessibility

Users are frustrated as they have limited material size or style choices.

Uncertainty

Most users are afraid of the gap between what you get and what you ask for.

Accessibility

Users are frustrated as they have limited material size or style choices.

Availability

Most shopping brands offer clothes for a limited period of time or season.

The Users:

Name:  Camila Murillo

Age:  22

Occupation:  Publicity Student

Camila is a trendy fashion shopper who needs a good variety of quality options to wear
because she wants to evoke an unique sense of style.

Persona portrait number 1Persona portrait number 2

Name:  Samuel Sierra

Age:  26

Occupation:  Industrial designer

Samuel is a trendy shopper who needs a very detailed and easy to navigate clothing site
because he doesn’t have time to make an educated purchase.

Journey Map:

We need to figure out the process our users take when buying clothes, and how and if they use the customization options available to them in order to refine the process and make it the norm for a person to mess a little bit with the clothes they purchase so every item is unique.

Journey map chart

Information Architecture:

Before starting making the app I came up with a basic information architecture that explains the MVP (minimum viable product) as well as the user’s journey through the site.

Information architecture map

P&P Wireframes:

Through the use of paper wireframes I was able to quickly test the best layout for a user flow that would work both on desktop, tablet and phone.

Image displaying the set of wireframes

Digital Wireframes:

I made sure to apply a combination of the best P&P  wireframes that fitted the app’s goals and prioritized the creation of new exciting playlists.
The most important thing in the user flow was a swift and intuitive way to create your own playlists.

Low-fidelity Prototype:

Here you can see the 3 main flows of the web page which consist of creating an item of clothing, browsing for an existing one or looking for a designer to help you create your idea.

Prototype.

Image of the current Lo-Fi prototype on a device

Usability Study

I conducted an unsupervised usability study with the objective of looking for user pain points when navigating the website and completing the three main tasks currently laid out in the low-fidelity prototype. Here’s what I found.

Study findings:

1. Users have trouble identifying a sequence of steps to design new clothes.

2. There’s a lack of pay and shipping information.

3. There's no current way to contact a designer.

4. Add to shopping cart button should be accessible during most of the flow.

5. The buying feature needs to be simplified.

Refining the design:

Early designs were too crowded with blocks and texts, I erased a lot of the visual contamination while keeping the same design.

Added all the search tags and filters to make the browsing more intuitive and added visual indications on where in the order flow the user is.

High-Fidelity Prototype:

The final high-fidelity prototype presented cleaner user flows for creating or browsing clothes, as well as looking for designers to help.

Prototype.

Mockup of the current Hi-Fi prototype on a device

Takeaways:

The app makes the user think of new ideas to meet their fashion needs.

“I didn't think I needed this but now I’m hoping someone makes it fast!”

I learned that through iteration you can come up with a unique platform, but you need to focus on the main features first before diving into what makes your platform unique.

Reach out to me!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.