UX/UI Redesign Website
I decided to help an E-commerce called L’ Épicerie Créole, a B2B brand created in 2018. They have already an existing website that was created on Wix.
Stakeholder Interview
I started to organize my work in Trello to validate the steps with my stakeholder.
From the interview with the stakeholder, I raised some negative points like:
- The fact that she needs to improve her website.
- Her traffic comes from other platforms and not the website.
- A website with more personality to stand out from the competition to be more visible, intuitive, and simple.
Competitive Analysis
Next, I made the competitive analysis. I used some tools like brand analysis and features analysis. My goal was to position e-commerce concerning other brands on the market.
Affinity Diagram
To improve and help her website, I made the first steps, and it is to interrogate some users.
Then I made the affinity diagram and I distinguished some problems, and I decided to focus on:
- The Filters.
- The catalog’s problem.
- The Lack of basket.
- And The Lack of reviews.
The Affinity diagram helped me to do the HMWs and the user persona.
User Persona
I present you Franc, my user persona. He is a 30 y.o young professional distributor that lives and works in Paris. He has his grocery store, and he adores the contact with his customers. Franc needs a website that has a catalog with a big choice of products, so he can order simply and quickly without wasting a lot of time.
User Journey
To make a scenario, I created the User journey.
The scenario is that Franc searches for a new website because he would love to have some new local overseas french territories products because of his new client target. He finds our platform & opens the catalog to see the products. On his way, he meets some problems like the early registration, lack of client reviews on the products, and the time-consuming estimation for the payment. Disappointed, he postpones his purchase and goes to another website.
Problem & Hypothesis Statement
All those research led me to the problem & hypothesis statement that helped me the next steps.
Then I deducted the How Might We’s:
- How might we gain visibility, have more traffic & persons who buy from the website?
- How might we make the website more accessible, intuitive and easier to order?
- How might we make the website more simple and clear to use?
Site Map
I created the actual site map. This helped me clarify relationships between pages in the site and document the organization of navigation.
User Flow
After, I defined the User Flow (for my 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.
Low-Fidelity
Then I made the sketching and draw the low-fidelity. To validate the low-fi, I tested it on 3 users.
Mid-fidelity Wareframe
I created a black & white Mid-Fi Wareframe. This is the skeleton of the redesigned website. I tested and made some little changes of alignment, but in general, I had positive feedback.
Moodboard
I made a selection of 5 company attributes and put the words into the image to make a moodboard reflecting the brand image in one deliverable. I used colorful pictures because creole products are reminiscent of nature and exotic. I had feedback from tested people saying that the colored images are talking about the product universe.
Style Tiles
Style tiles is a collection of visual information (colours, fonts and icons) that I shared with stakeholder to communicate on aesthetic and help maintain consistency in design.
I used the dropper to extract the colors from the moodboard. I have chosen calm colors that do not collapse the pictures and Creole products that are already quite colorful.
For typography, I used a classical serif font.
The Logo rest the same as that was before.
UI KIT
Then, in order to keep consistency in the high fidelity prototype, I organized buttons, filters and pop-ins in the UI Kit. We have buttons and filters with half-round borders that indicates that we are in a warm and friendly universe.
Hi-Fidelity
And now, the best part … the Hi-Fidelity.
In conclusion, I had the pleasure to work on this wonderful project. I had great communication with the stakeholder and the other part of the team that helped me. We had a great, peaceful atmosphere. After a lot of user testing, I was able to put all our ideas together to create a project that met the demand. Not only, have succeeded in solving our users’ problems, but we are also helping the website “L’épicerie creole” gain visibility and notoriety.
Thank you for your attention!
