Local E-Commerce Website with Vintage Clothing

After the covid-19 pandemic crisis, worldwide, the local shops and professionals need help to improve their online presence to be more competitive in the actual market. I was lucky to contribute to the solution of this problem, with the second project of the Ironhack UX/UI Bootcamp, which was to design a desktop website for a local business or professional. In this project, our efforts were focused on organizing the information, and being most effective for both the customer and provider.

THE PROJECT

Team: 4 UX Designers/UX Researchers (Rosa Chiacchio, Glory Adebowale, Vince Rubio and me)
Duration: 2 weeks
The problem: Local E-commerce- How Might we help users shop from a local e-commerce vintage store clothes they would love?
Goal: Design an e-commerce website where the products are easily searched and have realistic information.
Challenges: Time Management, Finding Users available for Interview
Tools: Figma, Balsamiq, Useberry

Client

The client we would work with was Leire Ipas, owner of a clothing store called Aurea Galga. It is a small business driven by the client’s love for fashion and the environment. The products of this company are vintage and visually appealing pieces. The majority of the clothes sold in Aurea Galga are reworked or second-hand.

The business’s goal is to sell high-quality fashion pieces so they can live longer and that is why they collect, repair, or rework their products. They want their customers to buy quality clothing that they would use for a longer time and eventually prevent them from consuming, again and again, new ones.

Users

After the covid-19 pandemic, the client decided to build a website to promote their products easier and wider. Their target customers are women 30+ that don’t just want to buy the clothes they need. Instead, they should be women who while visiting the website, as the client said, would think:
“ I don’t know what I’m looking for but I LOVE THIS.”

The Process

We started working by first conducting the Competitors Analysis on brands that also sell vintage and second-hand clothing online. The direct competitors that we discovered were Depop, Vestiaire Collective, Etsy, and Grailed and we analyzed them using three tools:
a Brand Analysis, a Feature Analysis, and a Market Positioning Analysis.

It was clear, that compared to their competitor’s, our client’s brand is the only one with luxurious upcycled products and their website was lacking features that would connect their target users to the brand and its values. Aurea Galga’s website wasn’t giving the ability to its users to connect socially with the brand or to distinguish and save their favorite products.

User Research

The competitors’ analysis along with the stakeholder’s insights were very enlightening and helped us understand where we should focus during the Users’ Interviews. We created an Interview Guide and in one day we conducted 6 remote User interviews.

Defining the Problem

Then we put the Users’ feedback to the Affinity Diagram. We categorized the qualitative data into groups, did dot voting and it was clear that we needed to focus on the following categories:

1. Fear of the sizes

2. Buying from a vintage shop something unique or branded

3. Preference to visually appealing clothes

4. Unrealistic online presentation of the vintage piece

Moving on, we composed the Empathy Map, from which it was more obvious to us, that when shopping vintage clothing online, the users need to understand the quality and the material of the product, and to order clothes that are realistically presented so that they can trust the website.

Also, their main pain points when shopping online is to select the right size and to identify the condition of the product. We realized that it was necessary to have more info on the product’s page that will make the product more appealing and real.

With this insight, we worked on the composing of the User Personas.
The Primary persona is Joana, “The stylish techie” who is a young woman that loves shopping and fashion:
“I love fashion, for some people clothes are just clothes but for me, it is an enjoyment”

The Secondary persona represented a smaller group of our users but with insightful feedback:

Gianmarco is a young Tax Consultant who is doing shopping only when he needs to refresh his closet:

“Shopping clothes is a necessity and something I like doing but it’s not compulsory for me to buy clothes — only if it is needed”

Now we were ready to better understand our Primary persona by following her User Journey with the following scenario:

Joana wants to buy a unique vintage dress online as a present for herself for her birthday.

• Joana is looking for inspiration through social media and finds an interesting account that leads her to the website of an online vintage shop.
• While browsing, she gets confused as she cannot find the category of the piece she wants.
• When she accidentally finds a nice dress she tries to determine her size using the size conversion table and then chooses to order it.
• When she receives the dress she is disappointed to find that the dress is small so she requests on the website for a refund and in the meantime orders another dress that she likes.
• She receives it and submits a review about her experience and the dress.

Our team detected multiple opportunities to improve Joana’s experience but the moments where she was mostly frustrated underlined her biggest frustrations: the first while browsing clothes and the second when she received the wrong size of clothing.

Our website should be designed to help young professional women find a piece of clothing they would love. We had observed that the online vintage shops are not showing realistic information on their websites which is causing low conversions, low retention, and bad reviews to our business.

Based on this we assumed that providing detailed and realistic information for young professional women will help them buy our products. We will know we are right with 80% conversions and 60% retention rates.

Ideation

It was now time to focus on identifying the MVP (Most Valuable Product) features of the website that we would design by satisfying the business and the users’ needs. Initially, we composed three “How Might We Questions”

How might we help Joana…

..find the right product size?

..find the right category?

..see better the quality of the materials?

After brainstorming on each question we collected our suggestions on how we could solve the problems that these questions had described. While working, more and more features were coming to our mind so we noted them down and then prioritized them with the MoSCoW method: On a new board, we grouped the features of the website in Must Have, Should Have, Could Have, and Won’t Have groups. This was an exciting process for our team as we collaborated closely and on most features, our ideas were aligned.

Very fast we had determined the features that our Most Viable Product: Menu, Pictures of the product, “Add to basket” and “Remove” button, search bar, and filters were some of the features that we decided our website must have while keeping in our radar a group of others that we could add in future iterations.

The MVP

The goal of the Aurea Galga website, at the bare minimum, was to help the users trust that they will find in an online vintage store a product they will love. By being able to easily identify the available type of clothing, the website further would aim to prompt the users to browse and buy our vintage clothes. Therefore, we must do the following:

Create a page that includes all of the products that Aurea Galga sells and then filter them according to the users’ needs (type, material, size, color, condition).

By ensuring that these things are available, the user will be able to review and purchase products with full knowledge of realistic information about the products that are on the website.

Then each of us created User Stories and Epics that would represent Joana’s desires and needs and that eventually would help us understand the features that we would need to focus on.

We determined the pages of the Sitemap in a way that the website’s structure would be simple and the users could easily find what they are looking for :

Home, Store/All Products, About, Contact, Blog, Policies, Logins

Following that, we moved on to design the User flow on which we would base the wireframes. We decided to create the flow that Joana would use when she would visit the website Aurea Galga to find a black dress for her birthday.

After sketching the flow we represented it only as actions: Start/End, Pages, Input/Output, Decisions. That way we could better understand the journey Joana would do, without any aesthetic distractions from the website’s features.

• Joana would start by visiting the website’s Homepage, and she would search for the dresses.
• The results of the search would appear on the “All Products” page where she would be able to filter them by selecting to see only the black dresses.
• She would then select to see the one she likes, by clicking on it and being led to the Product’s page.
• There Joana would check all the info and would add the product to the Cart.
• By clicking on the cart icon she would navigate to the Cart page and would click the button on the page to move on to the Checkout page.
• A pop-up window would prompt her to either sign up or log in.
• She would log in by adding her credentials and then she would be redirected to the Checkout page where she would pay and finally exit the website

Low- Fidelity Prototype

It was time to collect all the ideas and insights that we had to design the low-fidelity prototype of the website.

Using Balsamiq and based on the User flow we had earlier composed, we created the screens that Joana would see during her happy path towards purchasing a black dress for her birthday.

After testing the prototype with five users we realized that there were some important features we should improve:

1. The users were frustrated when while on the checkout page they were prompted to log in or sign up, as they felt they had no option to purchase as a guest user.
2. The users felt uneasy when while on the checkout page they were first requested to select a payment method before even adding their shipping information.

Mid-Fidelity Prototype

The User’s feedback and the team’s ideas on the Moscow Method board helped us to quickly come up with the Mid-Fi Prototype.

In this prototype, the user on the Homepage can search for the black dress, refine the search using filters, select their favorite product or save it as their favorites list, find their size, add the dress to the cart and purchase it with a three-stepped payment process indicated by the respective process bar.

This prototype was also tested by 45 users, with the remote testing tool Useberry. We asked the users to complete 6 simple tasks and 38% succeeded in completing all of them.

Analyzing the results of each of these tasks, we discovered that the most difficult tasks for the users were two:
a. Find a dress: Although the success rate was 71% it was a task on which the users spent more time. The session recordings have shown us that the instructions of the task were not very clear and the users could understand easily where to find the dress.

b. Buy a product: This task was completed only by 62% of the users and there was a 50% misclick. The users seemed to be confused a lot by the filters, as on their first screen they were hidden, and then when they would interact with them nothing would change in the products page, to make them understand that they have selected the right category. So they would keep clicking until they found the right option.

Conclusions

What we learned during this project is to balance between the business’ and the users’ needs so that eventually you can help both sides achieve their goals.
Also, it is essential to observe and understand the user and the best way to do it is by testing your product from an early stage. It might be important to test the product with a good amount of users, but it is more crucial to understand why the user is selecting to interact with your product the way they do. Then you can better distinguish their struggles and realize whether it is due to your misleading testing instructions or because the interaction design of the product needs improvement.

Next Steps

Before moving on to the design of the High- Fidelity prototype, we need to be sure about the feature we should improve, and this can only be done by the Testing results. As we saw that the users were mainly confused by the tasks we asked them to complete, we will rework the Testing process. We aim to assign to users fewer but simpler tasks that are consistent with the given prototype.

Also, during the designing process, we realized that since the client would offer in their shop various types of clothing and products of one size, users like Joana might have difficulty understanding if the product they see would fit them. Although on the Moscow method board, the feature of the automated size calculator was a “should-have” and not a “must-have”, we had to reconsider the features of the product page. This realization and the Users Testing feedback will be our guide to improve our website and eventually design the High- Fidelity prototype in the future.