Local E-commerce — Practioners Website
Context :
In our second week at the Iron Hack UI/UX Bootcamp, we were a remote group of 3 Flower girls, Carla, Oyku, and I, and we chose to work on the theme Plant and garden shops.
The challenge was to design a website for a local business, to help them to improve their online presence to be more competitive in the actual market, due to the extreme situation COVID-10.
We decided to work on the Bergamotte’s website https://www.bergamotte.fr/.
1. Business & Competitive Analysis
- Primary Research
- We planned and scribed our interview guide for users, and we made the same for a stakeholder interview.
- Then in a second part, we defined who is our client.
2. Secondary Research — Perform market research
We found some competitors to Bergamotte, and we focused on the three competitors : FranceFleurs, Interflora, Aquarelle.com
To lead this secondary research, we compared the features of each one to analyse the same type of app/different types of apps that offer the same feature as Bergamotte, then their brand, and we built a market positioning map.
- Competitors’ feature analysis
- Brand Comparison Analysis — Brand research
From all the secondary research, we constructed the market positioning map of Bergamotte.
3. User Research — 4 interviews
- We interviewed four people.
- Concerning the stakeholder, Bergamotte has no particular difficulty, they have strong demand since containment with consequently longer delivery times. Delivery is ensured by their Chronopost,
2. Define
1. Affinity Map
We organized the interviews answers to an affinity map.
2. User Persona
3. User Journey
4. Problem Statement & 3 HMWs
We defined the problem statement and asked for three how might we.
4. Brainstorming
1. Ideation for each HMW
For each HMW, we ideated on miroteMiro, by trying to solve each HMW by a feature.
2. MoSCoW method / feature prioritization
Each feature, we decided if we must have this feature, could have, should have or won’t have on the website. This is a feature prioritization by the Moscow Matrix Method.
3. MVP
As we know better about Bergamotte brand, the users, and their needs, and because we brainstormed about some features to solve the pains of the user, we created the Minimum Viable Product, or MVP, of Bergamotte’s website.
5. Information Architecture
1. Audit & List the content
We performed an audit of any existing content of the shop (website, eCommerce, Instagram account… ), that we listed, we could list the content in Excel file, but we used Miro to work together .
With this draft, we did the Sitemap , the skeleton of our website.
2. Site Map
We defined the sitemap using our secondary research & information gathered during stakeholder interview.
4. User flow
From the Site Map, we imagined our Persona Flora Flower, on our website, and what are the ways she takes to start her objective, to finish it.
She wants to buy a bouquet, and get delivery information, before paying, until the order success.
She starts on the Home page, and she ends at the order success.
6. Mid-fi Prototype (Desktop)
1.Start Concept Sketching
To build our mid-fi prototype, we started by sketching it on a paper, our Lo-Fi.
2. Create wireframes
Then, from the Lo-Fi we created wireframes for our Mid-Fi,
3. Then, we create a Mid- Fi Prototype.
You can try our Mid-Fi Prototype just by clicking here :
Two users tried to test our Mi-Fi prototype. The results are really important to improve the user experience, this is with their feedbacks that we can improve our prototype and then go to the Hi-Fi prototype.
The results are :
- Go back button : they need that we change the position of the button which is not intuitive
- Red Colour : red colour was too alarming for the users.
4. Hi- Fi.
From the users test and the Mid- Fi, we created our Hi-Fi.
And you can try our prototype here ,if you want to do like Flower Flora, to buy a bouquet for your grandmother ;)
To conclude :
I discovered how we build a prototype as a UI/UX designer for a company, by started on the problem, with the methods on the business competitive and then the user research, then to define by using persona, user journey. From this step we can define the problem statement and brainstorm about the how migh we, and solve it by features. This step is very important, because we need to prioritise the feature, to find our MVP. From the MVP, we use the site map and the user flow to prototype.
The mi-FI prototype step is very important to be tested by a minimum of 5 users, to observe them, to be sure that our prototype answers to our problem statement, and is understandable and easy to use, to collect their feedbacks, to improve their future experience, to pivot maybe …
and then next step ;) the Hi Fi
thank you,
Zora
