Case study: Local E-commerce
Redesign Website UX/UI
Hello everybody.
For this challenge, we decided to help an E-commerce called Beige Paris, a clothing brand created in 2020. On this project, I worked for 2 weeks in a team with 3 other people: Adrien, Alice and Mylène.
From the interview with the stakeholder, we raised some negative points like:
- The time-consuming is the communication with the users.
- The fact that she needs to improve her website and be able to transform further. (Over the year 1%, Christmas17.5%.)
- 90% of her traffic comes from Instagram and not the website.
- A website with more personality to stand out from the competition to be more visible, original & distinctive.
To improve and help her website we made the first steps, and it is to interrogate 5 users. We distinguished some problems, and we decided to focus on:
- The Filters.
- The collection’s problem.
- The Lack of product information.
- The Lack of social networks.
- The Lack of reviews.
Next, we made the competitive analysis.
We used some tools like the swot, brand analysis, features analysis and competitors map. Our goal was to allow us to position the brand with other brands on the market.
- Feature analysis, matrix build regarding your project to maintain consistency & organized information regarding features of competitors.
- The SWOT method (strengths, weaknesses, opportunities, and threats) analysis used to evaluate competition around the company’s positioning.
- Brand analysis helps you to understand the market around your project.
- Competitors map points your competitors strategically, which help you to improve your service based on the gaps you saw.
We created an affinity diagram. We grouped all the gains, pains, demographics and habits in subgroups, it helped us to do the HMWs and the user persona.
I present you Camille, our user persona. She is a 30 y.o project manager that lives and works in Paris. Her goals are to feel good vibes during her journey and to have a story after each purchase.
We made the journey map.
The scenario is that a friend invites her to check an Instagram account. She follows the link and goes to the website. Starts to explore the main page, and she selects some products. After she observes that there is a lack of information, no client reviews, returns & refunds. She didn’t find what she was looking for. Being frustrated, she decided to postpone her purchase.
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.
To see if this problem statement gave us a place to work, we tried several HMWs.
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?
The Lean UX Canvas
We filled out the Lean UX Canvas, to gather the team around the problem, putting possible solutions on the table and finds a way to refine it to become a worthy implementation.
The Moscow Map
The Moscow method helped us to prioritize features that needed to implement.
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 piece of 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 storytelling) the 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.
After many scenarios, we defined our User Flow (for our Happy Path).
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.
We created the actual site map. It helped us to create the new one, that we would like to propose to our stakeholder. This helped us clarify relationships between pages in the site and document the organization of navigation.
To gather the team we made concept sketching then draw our low-fidelity to establish a hierarchy of information into our wireframes.
To validate our low-fi, we tested it on 3 users, after we started our mid-fidelity.
The Mid-Fidelity
We created a black & white Mid-Fi. This is the skeleton of our redesigned website.
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 the cart which sends to the cart page.
Visual Competitive analysis
We’ve made the comparison of visual information on 3 competitors to understand the market trends, user habits & expectations, which helps to get a more unique product.
Moodboard
We made a selection of 5 brand attributes and put the words into the image to make a moodboard reflecting the brand image in one deliverable.
We’ve tested with the class to make sure we captured the essence of the brand.
Style Tiles
Style tiles are a collection of visual information (colors, fonts and icons) that can be shared with stakeholder to communicate aesthetic and help maintain consistency in design.
Style Guides
To make sure that our prototype was in line with our style guides and mood board, we did a quick memory test again. The visualization of the website in 5 sec. This test allowed us to measure the attractiveness and desirability of our site in record time. Following the feedback we got, we made some final adjustments to get our Guide Styles.
Hi-Fidelity
Made with Figma, this is the final version of the Hi-fi.
Responsive design for IOS and Tablet
To adapt our product to several screens, we develop the Home Page for an iPhone 11 pro and an iPad Mini.
In conclusion, after a lot of user testing, we were able to put all our ideas together to create a project that met the demand. Not only, we have succeeded in solving our users’ problems, but we are also helping “Beige Paris” gain visibility and notoriety.
Thank you for your attention!
