Case Study on local e-commerce
Beige Paris website redesign
For this project, I worked with three of my peers at Ironhack Bootcamp to help a local shop improve in its online presence to be more competitive in the market. The goal of the project was to work on a desktop device. We choose Beige Paris, a clothing e-commerce brand created in 2020 to work with.
Client and customers research & insights
Client and customers research & insights
We started the project by studying the current website and conducting several interviews.
Through the website, we found out that Beige Paris was a Parisian ready-to-wear brand that proposes chic & conscious clothes, accessories, and decorations.
On a stakeholder side, we interviewed the founder of the brand. In around one hour, we asked warm-up questions, then went deeper into the subject to identify the founder vision of the company, the motivations behind such a project, the goals, and also to spot pain points or problems that could be solved.
Then we spoke with five (potential) users, as the company had a working website we divided the interview in two sections. First, we asked generic questions as a warm-up, relatives to shopping habits and online shopping. Then (usability testing) we informed the user on the goal to complete (add a shirt size S and a ring to your basket and pursue until card informations request) under a certain time, and we gave him five tasks to do along the way, in order to evaluate/audit the current website.
We synthesize all the collected data into an affinity diagram, which allowed us to create a user persona and a journey map (based on our user persona).
Affinity Diagram
User Persona
User Journey Map
Business & Competitor Analysis
In order to refine our findings we conduct competitor analysis as well. We identify three competitors, working with conscious fashion trying to have a close relationship with their customers : Ekyog (which was a competitor named by the founder of Beige), Atelier Une and We dress fair.
- SWOT method (strengths, weaknesses, opportunities, and threats) analysis used to evaluate competition around the company’s positioning.
- Feature analysis, matrix build regarding your project to maintain consistency & organized informations regarding features of competitors.
- Brand analysis help you to understand the market around your project.
- Mapping of competitor point your competitors strategically, which help you to improve your service based on the gaps you saw.
This provides us an offensive and defensive strategy in order to identify opportunities and threats of the current market.
Problem Statement
All those research led us to our problem statement :
Concerned and cautious women, who like fashion trends, need a way to purchase safely at new independent brand stores because prices are quite high and information transparency matters.
In order to see if this problem statement gave us place to work, we tried several HMW.
- How might we find a way to get more reviews.
- How might we bring a feeling of trust and safety around a brand through an e-shop.
- How might we make prices understandable for customers.
Lean UX Canvas
We filled out the Lean UX Canvas, in order to gather the team around the problem, putting possible solutions on the table and finds way to refine it to become a worthy implementation.
Minimum Viable Product (MVP Statement):
The goal of Beige Paris, at the bare minimum, is to make users aware of the brand values and sell products. By making values pop up and energize the website, the consumer will be more inclined to spend time and money. Therefore, we must do the following :
Create an effective hierarchy of information rather than putting every information on the same level.
By ensuring this update, the user will be able to empathize more with the brand and go from a cool and interesting (learnings from the storytellings) first experience with the landing page to the e-shop to purchase products with a conviction that they are in the right place to shop.
Moscow Map
The Moscow method helped us to prioritize features that needed to implemented.
Sitemaps
To define our Information Architecture we mapped out a sitemap AS-IS (the current one) and created a new sitemap TO-BE (the one we would like to propose to stakeholders). This helped us clarify relationships between pages in the site and document the organization of navigation.
Sitemaps are great support to allow discussion between several workers (content strategist & copywriters, UX & UI designers, Database architects).
User flow
After many different scenarios, we define our User Flow (for our Happy Path).
(This user flow is the final one, but a few iterations were made before, such as the one used for the mid-fi.)
The user flow defines how users can accomplish tasks to achieve a certain goal. It allows us to anticipate the needs of users so they can easily complete their goal. We made a technical drawing of the user flow which would help us after (with the Site Map to be) to develop the low fidelity prototype.
Low-fidelity wireframes
After some quick concept sketching to gather the team around common ideas. We made low-fidelity wireframes, In order to establish a hierarchy of information in our design regarding user feedback collected previously.
In order to see if we proposed a valid solution to our problem, we test the low-fi wireframes on 3 users.
Mid-fidelity wireframes
To make a clear layout and interaction display of our interface, we built black & white wireframes (to avoid future testers to be distracted by colors or design).
Starting from the Home page, the user, click on a collection, choose a category, then a product. Check size info, and set the correct size, add to basket, then click on another category, scroll and decide to click on cart which send to the cart page.
Here is the mid-fidelity prototype (wireframe) : which is going to be iterate a few times before starting on the high-fidelity prototype.
Visual Competitive Analysis
We collected visual information on three competitors to understand the market around the brand Beige Paris. This allows us to see what is trendy and know what customers expect or are used to. It also gives us tips on how to make our product stand out more.
Moodboard & brand attributes
We selected five brand attributes and translate these words into visual components to make a moodboard for Beige Paris.
To see if we illustrated the brand attributes correctly, we tested our moodboard with fifteen users, asking them what the produced moodboard made them think of.
After looking at this moodboard, you can tell that our brand attributes are simplicity, ethical, sustainable, softness, quality.
Style Tiles
We gather visual information (such as colors, typography and interface elements) into a Style Tiles to capture the identity of the brand for the web. This helps us to have consistency in our design direction before creating our high-fidelity prototypes. This document can be shared with the stakeholders to communicate the aesthetic we are going to provide.
We used Style guides, in order to maintain our consistency while working on our High-fidelity mockups. This allows us to all align with one design.
High-fidelity prototype
This high-fi mockups (most realistic wireframes) includes important features used in the user flow. Made with Figma, the page has been connected to one another, to deliver something as close as possible to the final product.
Responsive design for Ipad & Iphone
In Order to adapt our product to several screens, we develop the Home Page for an Ipad mini and an Iphone 11 pro.
You can play with the Iphone prototype as well, but as we develop the Home Page alone, there is no link you can tap on, just scroll down to see all the page content, readapt to a different display/screen size.
This project was made under 2 weeks time for the bootcamp of UX/UI design in Ironhack and was the first project including user interface design in.
