03
The Hat Shop/

Redesign

CLIENT OVERVIEW:
The Hat Shop combines the wide selection found in department stores with the custom service of a millinery shop.

OBJECTIVE:
Redesign The Hat Shop NYC’s website to improve its e-commerce experience while maintaining the small business appeal.


Process Deck

ROLE: UX/UI Designer

TOOLS USED:
Figma

PROJECT TYPE: E-commerce Website

DURATION:
2 Week Design Sprint
(March 22, 2021 - April 2, 2021)





INTRODUCTION

The Hat Shop came to us with the goal to redesign there ecommerce website. They are a local “mom-and-pop” shop locationed in So-Ho, New York. At the discovery phase of my project, I conducted user interviews in order to get a better understanding of the problem.

RESEARCH

Interviewed: 3 Users

I started our user research by first conducting user interviews in order to understand user behavior. From our interviews we discovered ..

👂 User Interview Takeaways

All the users have different items they shop for. Most of the users do not go to a store specifically for accessories. They prefer shopping in person to experience the quality and find the perfect fit.

👀 Affinity Map Insights

- Users need a way to view all the hats and find what they are looking for easily.
- Making accessories fun and finding the items to fit your specific needs. (size, color, material)
- Users are hesitant to buy hats online since they are not able to try them on.

CARD SORTING & CONTENT INVENTORY

We decided on the main categories of the website with a Card Sorting session. After conducting card sorting we learned that users categorized the hats using Brim Size, Main Colors, and Hat Styles. Users also labeled some hats as mens based on their look. I found that the names of the hats did not help the users sort and caused confusion. Using the photos provided a easier sorting process.

INFORMATION ARCHITECTURE
Then content Inventory was conducted which informed the decision behind IA design and content hierarchy, lead to an effective menu system and identified what the relevant content needed was.



USER RESEARCH

Based on the interviews I set up two personas. I referred to them throughout the entire product development process. Meet our primary user persona Samantha!

Samantha need a way to easily find and purchase the hat they are looking for.

How might we create a seamless way to help Samantha find the hat they are looking for.



I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product.


BRAINSTORMING

DESIGN
I usually start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.


USER FLOW

SKETCHES - Initial Round

WIREFRAMES - Low Fidelity

USER TESTING
Before bringing the wireframes to a higher fidelity, I did a testing round in order to reveal possible usability problems with our low fidelity prototype.


VISUAL DESIGN

01
Updated Navigation System and the ability to search for items.

02
Detailed product page with customer reviews and hat customization available.

03
The Cart was added so users can buy more then one hat and view the details before checkout.

WHAT I LEARNED

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Next Project

See you later.. Thanks for visiting!