UX/UI Design Case Study: re-designing a website
Ironhack Challenge
Four the second challenge of Ironhack’s bootcamp, we were asked to design a responsive website for a local business. Together with Jademl and Julia Toquet, we chose a second-hand vintage shop in the 11th arrondissement of Paris called Ol’Digger. We had exactly 9 days to finalize the project (7 days in class and two days during the week-end).
Overview
The challenge was to design a hi-fidelity interactive prototype for a local shop to help them improve their online presence and to be more competitive in today’s market.
The shop we chose is called Ol’Digger, it is a small vintage shop. The stakeholders, Nathalie and Marion already had a website, but it was in maintenance, and they were taking care of it themselves.
The shop offers vintage clothes, vinyls and all kind of objects — all carefully selected. It’s a funky and colorful universe with a very personal atmosphere.
Nathalie and Marion opened the shop in February 2020, exactly one month before the first lockdown and they started their online shop a few months afterwards. When we met, the website was off, they had stopped the payment of the subscription. However, they were really interested in our offer. Because taking care of the website is time consuming and they don’t really know anything about it, they hadn’t renewed their subscription, but they really want to restore it to working order. Their main goal is to have a website that reflects the atmosphere of the shop.
For the beginning of our design process, the first step was doing some research! Nathalie, one of the shop owners, was nice enough to give us an hour of her time to interview her, so we could have a better insight of the shop’s functioning, and of what she liked and disliked on the old website.
Users & Audience
We also understood who the shop customers were thanks to our interview with Nathalie, but also thanks to some secondary research.
Here are some key figures we found:
In 2028, the market of second-hand clothes will overtake the market of fast fashion*
We created our user persona in order to have a clearer idea of the audience, to pinpoint their goals, needs, motivations and frustrations based on secondary research, user interviews, and on the interview with the stakeholders:
Lucie (also known as the Vintage gem digger), says that vintage clothes are better quality. Her goal is to buy unique outfits but she is concerned about the price, the quality, the environment and she likes to bargain-hunt. However, she doesn’t like to rummage through non-organized clothes, she thinks that new clothes arrival are too scarce and that the online stock is not updated frequently enough.
Business analysis
We also did some research on the second-hand clothing market and used different tools:
- A Market Positioning Map:
- we did a competitor analysis to see what other shops were doing, what features they had on their websites, how their websites looked, what their value proposition was, etc.
- We also recreated the sitemaps of three direct competitors’ websites in order to understand the best practices.
All this research on the users’ needs and on the market of second-hand clothes led us to define our problem statement:
User needs: Ol’Digger’s website is not enabling clients to find items easily and there isn’t enough novelty, which is making them lose interest in buying on the e-shop.
Business needs: The e-commerce website is designed to improve sales and visibility.
Once we had a clear idea of the problem to tackle, we started to ideate and created low-fi prototypes based on the insights from:
- the heuristic analysis on the website, in order to see what usability issues the website had.
- the results of the interviews (both users and stakeholders),
- the analysis of competitors websites and sitemaps.
Usability tests:
We rapidly transformed the low-fi to a mid-fi wireframe to conduct our first usability tests.
We were helped by five users with similar profiles to our persona: they were all under 35 years old, were online buyers with an appetite for vintage clothes.
Their feedbacks were quite positive with very relevant ideas. We really enjoyed this step because it enabled us to have new ideas and to open our eyes to things we had not realized before.
We gathered a total of one hundred feedbacks from the usability tests, thirty five confirmed our choices and sixty five constituted real opportunities for improvement. Because of time restraint, we had to prioritize and we kept only half of them (based on their gravity).
Solutions
Here are some screenshots from our mid-fi prototype before and after the modifications we did thanks to the usability tests, for a better understanding of the evolution:
We deleted the search bar from the header, to make more room for a bigger logo, we kept the magnifying glass but put it to the right with the other icons, and we increased the size of the breadcrumbs (for a better readability and use).
Regarding the product page, we put the magnifying glass icon on the main product picture to be able to zoom on the article, we added arrows on the same picture to show that it was possible to scroll between the different product pictures.
The main things we changed in the cart was to add information about the delivery fees and to remove the “book in store” button which was not understood by the users. We reduced the size of the product image to make room for at least three products in the cart.
We added information about the address of the physical shop in the footer, as well as the possible payment solutions.
All of this leads us to creating a hi-fi prototype!
To do this, we first created a mood board, we picked colors, and chose typefaces. The color choice was the most complicated because our goal was to keep the strong identity of the brand, but we wanted to design something simple, not too crazy and colorful. And with such a logo (we couldn’t change it), we wanted to stick to its colors for the primary colors of the website.
Thanks to our Mood board and its attributes (playful, funky, festive, up-cycled, retro), we starting coloring our prototype, adding images and life to it.
Here is the link to out interactive prototype. You can also see below the before and after versions of the website:
Outcomes & Lessons
As a conclusion, I am happy to say that this was a very interesting project. The owner of the shop were really interesting to interview and to chat with. We felt at ease with them and are excited to present them our hi-fi prototype soon.
Working with Julia Toquet and Jademl was a wonderful opportunity, I felt very lucky with my group. We communicated well, the atmosphere was benevolent, and it was a pleasure to learn from them.
Regarding the next steps, we will present the project to the stakeholders next week. I hope they like our ideas ;) I am not sure they will be able to develop the website we designed but we tried to respect the constraints of Shopify (the e-commerce platform they are currently using).
We could also create other pages that are not part of the buying flow such as the blog, the wishlist, other category pages, the payment funnel, etc.)
Thank you for reading! I would be interested to hear your feedbacks
