Case study: Creating an e-commerce platform
The brief:
“To help local shops and professionals improve their online presence to be more competitive in today’s market”
With the COVID-19 pandemic and lockdown finally behind us, life can back to normal throughout the last year or two. However, many businesses saw a dramatic drop in sales and services during this time. With a surge to especially help small independent shops, the world saw a growing trend to support them in many communities. Online presence is a good way to hijack the issue and more and more professionals are on the verge of their digital transition. With this in mind, our next project was to build an e-commerce platform for a real shop here in Berlin, Germany.
We chose the bright, colourful and fun vintage shop Lemagass in Neukölln. Our priority was to select a shop with many items or categories, giving us a lot of material to design on the e-commerce platform itself. And boy, there was a lot of stock for us to play around with. The owner has a fantastic range of clothes, ranging through many iconic eras.
Our first port of call was to conduct secondary research in our chosen area. We wanted to find our biggest competitors in the area and see what could inspire our future designs. In the Berlin area, there are many independent vintage stores similar to Lemagass. Almost too many to list! But what we did find was Humana, a huge chain of stores in Germany selling second hand clothes. And on the digital front, Vinted. An app where anyone can sign up and sell their own vintage or second hand clothes.
We also wanted to make sure to our audience the difference between second hand clothes and vintage. Second hand clothes were generally cheaper and sold in more of a charity store type. Vintage clothes however are usually from a specific time era, typically of higher quality, featuring perhaps an iconic colour or print of the time. With Lemagass, they sold iconic pieces and wanted a website to reflect this feeling.
We then conducted our client interview with the shop owner themselves. From this, we got some invaluable feedback about the shop's brand values and attributes, as well as some great insights into the personality of the store.
My shops style? 80s, 90s funky, colourful, FUN, not to serious! Not too clean, it has to be inviting!
We also conducted user interviews. From this, we found out that over 50% of them thought that vintage stores were too disorganised and it was difficult to find what they wanted.
Now, we needed to visualise a typical demographic for our platform. We created our user persona and journey.
Here is our problem statement and our how might we:
Vintage enthusiasts need an improved way of exploring available products online because in-person shopping is too time-consuming.
How might we streamline the online shopping experience so the user finds what they’re looking for effortlessly?
Moving onto our ideation phase, here is what we managed to come up with:
- Music player of songs from 80s-90s, including owner’s own DJ sets
- Chatbot of the owner that addresses any questions, customer service-related needs just like an in-store experience
- WOW effect of the shop — you press the ‘enter’ button on the first page of the website which leads you into a ‘clothes rabbit hole’ with various clothes items falling everywhere
- Community: adding the photo with stylisation, possibility to comment, share in social media
Our site map and card sorting phase helped us define which categories worked and why for a vintage store. Our biggest insight we found from our users was that gender was not something they took into account when buying clothes. Separating the clothes from the home screen by gender made no sense. We then decided to give the user an undisclosed look at the entire range from the very beginning. However, we decided to keep it as a filter further on in the search process for anyone who would really like to refine their results.
Below you can see our mood board with lo and mi-fi wireframes:
Below you can our final Hifi version of the platform. The biggest challenge we encountered was having the image flip around to reveal the back of the clothing article once the mouse cursor is hovering above the image. However, as you can see below, we successfully made it happen. With the addition of adding filters to the search, we also allowed the customer to find what they are looking for more efficiently.
Key learnings:
- Many more categories of items needed, with a focus on filters (i.e. gender)
- Show all products together & then filter out
- Issues with figuring out how the prototype flows
- Prototype interaction changes when you duplicate sections in Figma
- Basic workflow processes & organisation of groups in the layers
- Importance of components for changes on the prototype
- Clear visible price of product throughout the website
Next steps:
- Experimenting on button colours, variants and more
- Adding extra features, eg. floating items, chatbot, music player
- Adding a ‘Sort by’ with every filter
- A vibrant colourful ‘clothes rabbit hole’ landing page
Unfortunately, within a week, we definitely could not fully implement all the ideas we came up. However, within the time, I am pleased with what we made and now we can pass on the finished result to shop themselves.
Many thanks for your time.
