Designing an e-commerce website for a vegan meal service
Ironhack Project-2: Local E-Commerce
Team members: 4
Duration: 3 weeks
Scope: Local shops and practitioners are suffering a decrease in the demand for their services and products due to the extreme situation COVID-19 pushed worldwide. Online presence is a good way to hijack the issue. More and more professionals are on the verge of their digital transition.
Challenges: Building an E-Commerce website for a local shop/professional to improve their online presence to be more competitive in the actual market.
Tools: Figma, Miro, Useberry, Maze
Target device: Desktop
Deliverables:
- Sitemap
- Competitive Analysis
- User stories
- Annotated User Flow (Happy Path)
- Interactive Prototype
- Mid-fi Wireframes
- Test Results
- Wireframes Iterations
The Client: Marmitas Da Horta
Marmitas da Horta is a local business located in the Island of Faial in Azores. Diana, the sole stakeholder of the business, is a girl from the Azores who wants to contribute towards a healthy lifestyle & sustainable environment.
Diana cooks vegan food with locally purchased ingredients in her kitchen at home. She makes sure that most of the ingredients she uses are organic and supports local farmers by purchasing directly from them. She makes one recipe per day in the morning and by lunchtime, she packs them in non-disposable boxes for the customers and delivers them or some people drop by to pick it up.
As Horta is a small town, the goodwill of the business is spread on mouth-to-mouth marketing and with help of social platforms eg. Facebook & Instagram, where the menu is advertised every week and this is also how her people contact Diana to order, next to Whatsapp.
As for now, she has limited capacity, so once the maximum quantity of meals is reached, it’s not possible to order more. All the meals are charged the same and there is 1 euro extra charge for the delivery.
The Problem:
Currently, Diana caters to 10–13 lunches and communicates with her customers through Whatsapp & Instagram. She keeps an Excel sheet to manage her accounts & billings. Instagram & Facebook is not efficient tools to keep track of the orders & customers. The organization & management can become messy once she moves to a bigger kitchen (which she was looking for & already found one while we did the interview) and more customers need to be reached.
Her online presence is small & the customers need to know about the motivation behind her story, the weekly menu, and the maximum capacity of the orders.
Helping Diana with her Business
After interviewing the stakeholder Diana, we did some market research and business analysis. Putting together the SWOT analysis gave us a clear idea about the scope of Diana’s business.
We did the feature comparison to understand her competitors & how she could have positive impacts by giving information about the calorie, ingredients & sustainable packaging.
Interviewing Users (qualitative data):
We interviewed 5 people including the existing customers of Diana’s & some of the potential customers, who generally like to go for healthy food choice & order from time to time. All the insights from the interviews we put in affinity diagram to point out the important ones.
Surveys (Quantitive data):
We sent out a survey to the existing customers in Horta town and could gather about 10 responses to our questionnaire, which has a good significance as it’s a small community.
Drawing out the Empathy map based on all the data we had gathered, simply helped us to get into customers’ shoes and to understand their pains & gains.
User persona:
We crafted our user persona combining all the common needs, pain points, goals & habits. Meet: ‘ Healthy Hannah ’
Hannah’s journey:
The scenario:
With a busy week ahead of her, Hannah wants to organize her days and buy some food in the supermarket. After struggling with the groceries and not finding time to cook, she has to buy her lunch at work. The lunch options at work are not fantastic, mostly traditional Portuguese meals with a lot of fatty meat and potato.
Preparing lunch in advance needs to be done on her day off or on a free evening, which she likes to spend socializing with her friends or going on a big hike.
This is frustrating for her because it's fast food and always the same options.
The opportunities here:
- There is an opportunity in avoiding Hanna’s worry about buying and preparing the food
- We can also provide organic and natural meals ready to eat
- We can offer all the information regarding ingredients, and sources
- Prepare tasty and healthy food she will enjoy
Problem statement:
With the results of our research & results, we came to our Problem statement.
Eco-conscious busy professionals need to find healthy ready made meals with local ingredients because they don’t have time to cook themselves.
How might we help customers keep a healthy lifestyle while saving time?
How might we help customers having ready-made, tasty, home cooked meals?
How might we help customers mainting an eco-frienly lifestyle?
Ideation:
We put down all our ideas & thoughts on a paper for each of the HMWs and discussed how we can design all the features to help build the website. We then prioritized the features with MoSCoW method, which was important in that initial stage to deliver the MVP and not to focus on maximizing the numbers of the features that might not be used by the users or are unnecessary for the user's journey.
MoSCoW map:
The bare minimum what we need for the website to function is:
Create a visual menu page, where users can see all the information related to ingredients and nutrition facts. Customers will have the option to get delivery or pick up, and “buy/rent a box” option.
With our MVP in our mind, we started sketching different screens of the website, with MUST have features (from MoSCoW) and quickly understood what essential structure we needed to design our website.
Concept Sketches
Even after doing the dot-voting for the concept sketches, it took some time to go through each screen of the happy path and come to an agreement for the essential features, how to show the choice option to the user, the position of the ‘Order here’ button etc. to name the few.
Do we want to show the reviews in the front page? How do we want to show it?
How do we show the options to the user to choose from the delivery/ pick up option? With drop-down / radio button etc?
When do we want the user to have the option to log in/sign up?
Whether or not to have the main navigation menu appear on every page
We created Lo-fi wireframes based on our site map & Happy path and tested them with a few potential customers. Even though it was a paper prototype, we could gather some essential feedback.
Lo-fi test
Testing at the early stage can definitely help solve the problem easily. We did the tests in-person and could get their responses, gestures, comments, and understood the pain points better. The most common of them were:
- The readability of the ‘Order Here’ button
- The confusion between the reviews and the menu images
- Not able to understand how to choose the delivery option with check-box
We went back to our drawing pads and tried different options to figure out the solutions.
Mid-fi Prototype
Based on a lot of iterative processes, we put together the mid-fi prototype of the website.
While you go through the prototype, I would like you to keep in mind our user persona-Healthy Hannah, who’s very committed to her health and the environment. For her, saving time is as precious as trying to follow a sustainable lifestyle.
There were 3 main tasks assigned for the usability test.
Order 3 meals for Wednesday.
log in with Google.
Let it be delivered between 12h–13h and pay with MBway.
Blessed with the tools such as Useberry, we could test some more users virtually and could see how they went through the assigned tasks. We could gather important feedback on how we can make our design better.
Here are some examples of the results we got:
Take away:
What we learned with this project is that the earlier you test the product, the best it is for the long run and the success of the product!
The Business’s needs & the User’s needs are the two sides of the coin, which have equal and their unique importance. As a designer, it’s very important & crucial to strike the correct balance to achieve the end goal.
Drawing out the user flow is different than actually thinking it through and putting it into actual interaction. Also, each button/action has a definite meaning to it and how to give the user enough possibility to explore at the same time, trying to keep him interested and intrigued to buy from your website.
I would like to thank my amazing team: Tineke Baan, Sara Pérez Rodríguez & @vanda for working smoothly through our different work schedules, positive energy & bringing out the best in all of us throughout the whole project!! Couldn’t have been possible without them! :)
