UX Case Study — Redesigning the shopping experience at a local fancy dress shop in Shoreditch, London

For my very first UX Design project, I did a concept project in 2 weeks. The brief was about a local fancy dress shop based in the Shoreditch area in London. All That Glitters is a local fancy dress shop, in Shoreditch area, that cares about community spirit and proximity. They put a priority on customer service, face to face contact and offer a hand-picked selection of products to their customers.

The client’s values were important and needed to be considered in the project. Hence, in a team of 6 junior UX designers, we worked on a user-centered process to design a website that contains :

• A home page
• A product category page
• A product detail page
• A shopping cart
• Checkout pages

Getting in the head of users

The first step was getting in the head of users who are going through the following scenario :

A local resident is looking for inspiration for a costume for a fancy dress party

We started by doing ethnographic research and go where the users are, a local shop called Mad World Fancy Dress located in the Shoreditch area.

At first glance, the store seemed to be disorganized with many items stored at the front (masks, hats, paint, accessories,…) which did not make much sense, but after a longer examination we realized that the store’s main offer was costume rental. When entering the shop, we were politely asked by the waiter whether we were looking for something precise. For the exercise, we pretended to be looking for 1920s style outfit for a Gatsby-like party. This person was professional and had a clear idea of which place to go in the shop for what we needed. The alleged disorganization of the store was no longer an issue as were guided through the aisles and had the impression we could ask about very precise themes or items. Also, the costume area had signages to show different themes such as ‘Western’, ‘Burlesque’ or ‘1920s female style’.

After observing a store, we jumped on the next stage and interviewed a bunch of users to know more about their experience of buying fancy dress items. Through several rounds of interviews, we gathered interesting information about their needs, their goals and their expectations when buying a fancy dress item. The key findings were :

• All of the users interviewed say they search on Google for finding inspiration about a fancy dress item and go through 2 or 3 websites at least.
• Time is an important criteria. Buying a costume or any fancy dress item is an occasional purchase for an occasional party. Users don’t want to spend a long time browsing through dozens of pages on fancy dress websites.
• Trust is an equally important consideration and users are afraid of being disappointed when buying a costume online. Also, on all the websites they checked, the clothing looked poor quality on pictures.
• The overall clarity of labelling and presentation of products is an important criteria for them. All the websites look the same and they consider going to a shop because there is a lot more choice there.
• Service is still important for them as they feel more guided in a physical shop. Also they expect flexibility in the service (several payment options and delivery options), which is something you don’t always find when shopping online.

All this information was gathered and synthesized in a persona we called Dean. Let me introduce Dean to you :

Dean, 32 years old

Living in London

Community centre manager in Hackney, London

• Supports a healthy community life and shops at local businesses
• Prefers a face-to-face contact over shopping online
• Prefers to spend his money wisely, even for occasional purchase

From this stage, every step of the design process must include Dean’s needs and goals.

Understanding the competition

To understand better Dean’s browsing experience, we did a competition survey on 6 different websites. Some were direct competitors, fancy dress eshops with a local store base in the Shoreditch area, some were secondary competitors such as Amazon. This helped us identify the dos and donts of the sector and find interesting features that could be implemented in our design.

+ and — from the competition

Which features could correspond to Dean’s expectations ?

Large pictures, an exhaustive product information, information about delivery options and information about payment options are relevant to build trust.

A clear navigation bar, not too many categories (7 categories-breadth maximum, 2 levels-depth maximum) explicit labeling, large and visible pictures, pictograms and consistency in the design that help Dean feel guided in his experience.

Information about the services provided in the store (collect in store, requests for stockage, tailored recommendations and an easy contact are categories that help foster customer service and proximity.

Getting the content organized

The final step or our research was organizing the content on ALL THAT GLITTERS’ website. To achieve this purpose, we interviewed users to and asked them to do card sorting on the 75 top selling items of the shop. This helped us identify patterns of organization that make sense for the users. Two different workshops :

• Closed card sorting
• Open card sorting

Key findings :

1. The main content must be organized according to product categories rather than gender or themes
2. When organizing the content, users tend to split the content between two main categories :

• Fancy dress
• Decoration

3. Other categories are subcategories

Based on the information collected in those workshops + information from the competition, we organized our content as the following site map :

Framing the problem

To frame the problem, we wrote down and drew on a storyboard all the information gathered about Dean in a single scenario. This scenario is split in 4 moments :

1. Situation : Dean, 34 is a community centre manager living in London. He is a busy person, enjoys staying in his area and consuming at local shops.
2. Problem : He’s invited to a fancy dress party this weekend and is looking for a quick way to find what he wants (a fluorescent jacket) and wants to be sure of the quality of what he buys. He has 48h to find it. In all the websites he checks on the Internet, he gets lost easily and does not trust the quality. Also, he does not like the design of the websites because it looks so “cheap”.
3. Solution : Dean searches on Google and finds “All That Glitters Party Supply” website. He quickly finds accessories and can easily collect the item in their store in Shoreditch, as it is not so far from his place. Dean goes there, asks the teller some information and buys the item.
4. Outcome : Dean is definitely happy. He found a local, reliable and well-organized shop that sells what he needs for the party. He’s looking forward to dancing on saturday night with his friends! :)

Storyboard n°1

Translating a scenario into a user flow

Translating a scenario into a user flow is an important step of the process as it helps us identify where our design process should focus to make Dean’s experience as smooth as possible.

In an ideal scenario, this how a user like Dean would get from a Google search to the purchase page :

User flow, “happy path”

In the real life, this is how it would probably happen :

Regarding our findings during the user interviews, the key steps of the process we need to focus on are :

• The browsing experience, from the homepage to a single product page,
• Getting information on a product, information from the company but also from the users’ reviews,
• The checkout process, from adding an item to the basket to purchasing it and collecting it in store.

NB: regarding the relative emergency of the scenario in which Dean is, we will focus on the ‘collect in store’ option in our design.

Prototyping and testing the experience

First and foremost, as we were doing this design process in a two-weeks long sprint, we opted for quick iterations based on testing, learning, implementing key findings into a new design, testing bis repetita…

Paper prototyping

Our first iteration was a paper prototyping. By showing the screens to our users, we quickly found what their expectations were.

Product page

• The users did not feel guided in the homepage and did not see any call to action, the content hierarchy was not clear enough.
• Suggestions on the right hand side makes the product narrower and they don’t like to have too much information at the top of the page.
• The delivery price showed early in the process is a good idea and was appreciated.

Checkout process

• ‘Continue shopping’ button was confusing on ‘My basket’ page.
• The user’s details are asked too early in the process and are not appreciated at all, especially because this is an occasional purchase.
• The checkout clearly lacks of information about the delivery.
• This information helped us create a second prototype that is clickable.

Lo-fi clickable prototype

At this stage, I realized how easier it is for user to project themselves in a real interaction when they click on a screen.

Homepage

Product page and review sectiobn

Checkout page

After a second round of tests, I realized that :

Home page

• Users do not see information about the local store in Shoreditch. Hence, when choosing the collect in store option, they expect a drop-down list of several addresses.

Review section

• The review section is central on the product page, people check it but don’t see the “see more” button in the top right corner.

Checkout process

• The collect in store option in the delivery is not clear enough, users expect an address, details about how the collection is done.
• The checkout process should be split on several steps, payment section above the email input field is quite confusing…
• The navigation all along the checkout is not easy.

From these inputs,

• I refined the homepage putting information about the company’s store in Shoreditch.
• I added information button with popping out boxes all along the checkout process to inform the users on how to collect in store.
• I split the payment process from the other parts of the checkout process.
• I added information on the confirmation page.
• I added breadcrumbs all along the checkout process to help users feel more guided.

I implemented these inputs into a mid-fi prototype :

Homepage

Product page

My basket

Place order

Confirmation page

This last prototype was tested and helped us identify potential future improvements for the website. These will focus on :

• The search bar, how to get to a specified product more quickly,
• When choosing a size on a product page, the quantity could be automatically changed to “1” (this saves one click),
• Reviews section could be refined, especially the ‘see more’ button,
• The policy regarding Collect in store on the very last page of the checkout process is confusing, why not putting all the information on one page ?!

;-)