PROBLEM

Basic eCommerce templates aren’t cutting it anymore.

The overall site needs to be refreshed. As the brand grows, there is a disconnect between them and other fashion companies of the same size in the quality of how they are presenting their products. The site is clunky and unbalanced. Users are getting frustrated by the lack of information and inconsistency between the mobile and desktop breakpoints.

SOLUTION

The brand is more than just its products.

COMPETITIVE RESEARCH

Allow users to see themselves in the product and help them cater their searches to what they are in the market for.

Sites such as Knickerbocker, Bode, and Carhartt WIP provided inspiration and insight into the early design stages. These companies are one step up from the current level of the company and are a good benchmark of how we should be presenting ourselves.

• Allow the user to decide which type of item they would like to view or if they want to view everything at once

• Use images of people wearing the items

• Allow the user to create a profile for them to be able to access and handle their orders and payment details

• Utilize breadcrumbs on product pages for users to track their journey

• Give users the opportunity to sort their results

USER INTERVIEWS

My interviewees are open to shopping at a new store but are typically in search of specific items.

RESEARCH QUESTIONS:

• How often do you shop for clothes online?

• What makes you decide to shop online or go to the store?

• What are the items you go to first on a clothing website? Or do you select to view all products?

• When was the last time you purchased an item online from a company you have never bought from before?

MAIN INSIGHTS

The eCommerce sites that my interviewees frequent all use imagery to tell the brand's story.

THE BROOKLYN BARISTA PERSONA

DESIGN

Using inspiration + starting small.

After spending some time viewing how other companies are presenting their products and pulling some inspiration into a mood board, I began planning out some new designs. I believe that starting with a mobile-first design allows me to create a strong design throughout every breakpoint. Honing in on the details on a smaller scale helps narrow things down and helps create a better-finished product.

PREFERENCE TESTING

64% of participants preferred the product card they were most familiar with seeing.

I ran a small preference test on a group of 12 individuals simply asking which of the three product card layouts shown below they preferred. Version 3 had the largest amount of support with 64% of the participants preferring the gray background with the text sitting right below the frame.

THE FINAL PRODUCT

Mobile Screens

Desktop Screens

CONCLUSION

What would I do differently?

1. Keep usability at the forefront of my design choices - When I first began making my designs, I very much wanted it to look a certain way and I had a relatively clear vision of the aesthetics of the site. Later on down the road, I would find some usability issues and I would have some difficulty figuring out the solution because I had already set up the style so much. Moving forward I put more focus on the actual functionality and then follow it up with stylized UI.

2. Ask for feedback and then listen to it - I had reached out for feedback from peers on the layout of a few pages while designing this site, outside of the preference tests, and I was skeptical of their opinions on the site. After pooling together their feedback, I made several iterations to compare all of the choices. I was latching on to my original idea a bit too much and was not listening to what the feedback was telling me. Next time I will allow myself to take a step back and analyze the suggestions and try to have a better big picture view of the project.

Thank you for reading!

Please reach out at budrispat@gmail.com for more work inquiries