The Fruitie Shop
Overview
This was my personal initiative to create a product that is an online store for shoppers to order fresh fruits from the comfort of their home or office and receive them the same day or scheduled time and day at an affordable cost.
Scope/Focus
This case study is focused mainly on the Cart journey and it’s key features.
My role
1. Responsible for the entire design track both visually & hierarchically and adhere to style standards on fonts, colors, and images following WCAG 2.0 standards.
2. Responsible for illustrating design ideas using storyboards, and user flows.
3. Responsible for developing UI mock-ups, wire-frames and prototypes.
4. Responsible to determine information architecture.
5. Responsible for planning & conducting user research, competitor analysis and usability testing.
Project vision
Design an online store to enable easy ordering and fast delivery of fresh fruits at
an affordable cost.
Target audience
1. People who finds it handy to shop online
2. People who prefers going to the retail stores to shop.
Problem statement
How can we assist the shoppers get fresh fruits easily at an affordable price in requested time?
The design process
I love problem-solving and to achieve solutions to every defined problems, I follow these steps below to make my projects successful. Having a design process allows efficiency since it is tested and limits risk of wrong doings.
Research
User research
User research was conducted to determine the shoppers needs, expectations and motivations to shop online for fresh fruits. I conducted open ended user interviews to understand shoppers pain points and sympathize with them.
Research questions to shoppers asked.
1. Why do you buy products from online store and retail stores?
2. What do you want to improve in your experience while buying online and in
retail stores?
3. What problem do you meet in the retail store?
Insights from the research
1. People don’t know how to check freshness of fruits
2. Time-consuming due to a lot of people during checkout
3. Not enough space when there are lot of people
4. Lack of information about the products/fruits
5. Parking and traffic problems at retail stores during peak hours
6. Long delivery time for online shoppers
7. The price for delivery fee
8. Items being cancelled from order due to unavailability
Solutions
1. To give quick access to all products
2. To give information about all products
3. To give feedback on the quantity of products
4. To give option to pick up on delivery and charge amount for delivery
5. To shop with more devices
Competitive analysis
I searched for related websites and monitored the features, functions and experiences.The UX competitive analysis has no ending feature list, so from my
scope/focus mentioned earlier, I focused mainly on the Cart journey and its key
features.
Feature prioritization
With my scope/focus on the cart journey, I got the key features that are to
be implemented on the project and prioritize them. In this case study, my main focus is on the Cart journey and its related activities.
Personas
From the insights gained from user research, my target audience’s attitudes and
behaviours were spotted out. I came up with these two user personas below:
1. Caring Julie, who is a stay-at-home mother with three beautiful
children.
2. Slim fit Victor, a Barrister who watches his weight.
Project goals
The model for both the users and the business was achieved from the mapping of
the user goals and the business goals.
User flow
As the details of main features of the website is defined, I have built the user flow
to create a useful and usable website.
Storyboard
I built a storyboard for the design for easy understanding of the work flow.
Ideation
Information architecture
Information architecture is the foundation of developing a site-map. This information architecture is made for only the “add to cart” journey
Paper sketches
The skeletal framework was made for iteration and to quickly make design changes.
Desktop View
Mobile view
Wireframe
Mid-fidelity wireframe
After many iterations of paper sketches, a low fidelity wireframe and interactive prototype was designed using figma to define the visual form on the screen.
Desktop View
Mobile View
Usability testing
The usability testing of the mid-fidelity prototype was carried out to validate the website design, A test plan was designed according to the test objectives.
Usability testing plan
Introduction
The Fruitie shop is an online fresh and quality fruit selling store. This service aims to provide good fresh and quality fruits to consumers. Users can buy the fresh quality fruits through the website and it get delivered to their doorstep at affordable price.
Test objectives
1. To establish ease of navigation simplicity in the call to action while adding an item to cart.
2. To test “add-to-cart” journey experience
3. To identify the usability problems faced by users
4. To determine the design proficiency
Test subject
Mid-fidelity wireframe prototype of the Fruitie shop “add-to-cart” journey.
Test methodology: In-person testing
Participants will be given a set of “add-to-cart” journey scenarios and tasks to perform using the wire-frame prototype in Figma. Test assessment will be done individually on a user’s observation and feedback.
Participants
Number of participants: 6
Adult male and female/ Age : 20-38
Working professionals from Tier 1 and Tier 2 cities in Nigeria
Tasks
Add some items to your cart with the Fruitie shop.
Usability testing script
Script procedure
Hi, my name is Faith Ekanem, Thank you for accepting to participate and assisting me with my project. I am currently designing a website for the Fruitie shop which would serve as an online store for fresh quality fruits. I have designed a prototype of the Fruitie shop which you will be using today to perform some tasks within the website. Please, this is just a wire-frame prototype and has limited functionalities, you will only be able to navigate the website in predefined paths to accomplish the tasks. As you go through each task I request you voice out your concerns because your opinion and feedback is of great value to me. Your inputs will not be shared with anyone except for the reason of assessing the website usability and understanding user expectation (assumption).
After completing the test, provide your general feedback on using the website as to:
1. Recommendations for improvement
2. What you prefer the most?
3. What you prefer the least?
Please, also provide your general experience on using the Fruitie shop.
User participant feedback
After testing the flow, we had different feedback from many users listed below:
1. The design is clear, simple and easy to use
2. It wasn’t clear if the website processed the add-to-cart action
3. There is no indication that the correct product was added to the cart when the product was processed.
4. I accidentally added the same item to the cart severally without knowing the item already exist in their cart
5. The overlay showing product had been added to the cart disappeared before I could read it to double-check and ensure the add-to-cart action was completed.
Feedback corrections
Analyzing user participant feedback, I was able to find out what works and what did not work. So I came up with a perfect product solution.
1. I added a noticeable badge on the cart icon and place the subtotal besides the cart to identify a product has been added.
2. I ensure that the notification badge is fixed and did not obstruct any key information on the product page.
3. I added a message indicating that the item exist in the cart close to the add-to-cart button
Visual design
Style guide
After carrying out the feedback points received from the usability testing, I began working on the visual side of the Fruitie shop. I choose green and yellow color since green color stands for fruitful harvests and prosperity while yellow color stands for cheerfulness, warmth and serenity in its purest form.
Design system
High fidelity screens
After generating the UI style guide, the designing of the high-fidelity screen began.
Desktop view
Mobile view
High fidelity prototype
The interactive prototype functions like a real website and makes the product looks real. The link below contains the high-fidelity prototype for the Fruitie shop
https://drive.google.com/file/d/1U3Pm-SVtQLcxKUAb0WY6VcZlFyfsuUyV/vi
ew?usp=sharing
Outcomes and Lessons
Next steps
It was an interesting learning designing the Fruitie shop. The next step will be exploring other user journeys such as profile creation, checkout, and order tracking.
Outcomes
1. Increase in productivity
2. Rise in usability
3. Increase in credibility
4. Decrease in development cost and time
Lessons
1. To always give users appropriate feedback when they add an item to cart
2. To always interact with your audience and gather feedback
3. To partner/collaborate for flexibility and speed
4. To test out your ideas with prototype before designing the high-fidelity screens
5. To have consistency, road-map and always progress.
