Sproutzoi
An E-commerce website
My client, is passionate about promoting healthy eating and sustainability through microgreens, aiming to educate while offering convenient access to these nutritious products.
My roles: UX, UI
Design style: Website
Project Overview
This case study highlights the design and creation of an e-commerce website that aims to promote and sell microgreens while educating people about their benefits. The website was created in response to the lack of knowledge about microgreens and the growing demand for healthier and sustainable food options.
Responsibility
Tools
Figma
Adobe Color
Photoshop
Google form
User Research
User Survey
User Interview
Usability test
Duration
3 weeks
Problem
Microgreens: unfamiliar territory
Many people are unaware of the benefits and applications of microgreens, and those who are may lack access to high-quality microgreens.
Furthermore, current E-commerce websites selling micro-greens are not visually appealing or easy to use, resulting in a negative user experience.
Goal
The goal of this project was to create an e-commerce website that effectively showcases the client's microgreens while also educating users on the benefits of this healthy food option. The website had to be easy to use and provide customers with a seamless shopping experience.
Educate users about the benefits of microgreens and how to incorporate them into their diets.
Provide a trustworthy and reliable source for high-quality, organic microgreens.
Create a visually appealing and user-friendly online shopping experience.
Solution
Sprouzoi will provide a user-friendly interface, educational content, high-quality images, product descriptions, a secure payment gateway, and a responsive design. This will be accomplished through the use of the following features:
Provide clear and concise information about the benefits of microgreens on the homepage, with easy-to-read sections that include graphics and images.
Include customer reviews and ratings for each product, allowing users to read about the experiences of others who have purchased and used the microgreens.
Create an easy-to-use navigation system that allows users to easily browse and filter products by type, variety, and other attributes.
Discovery
Research
To better understand the needs of our target audience, I conducted user interviews and surveys to gather information about their buying habits, motivations, and pain points when it comes to purchasing and learning about micro-greens.
Competitive Analysis
I needed to learn more about what is currently working in the industry and what can be improved. This analysis can provide me with information about competitor websites' features, design, content, and user experience.
Additionally this S.W.OT. analysis can help me identify opportunities to differentiate the new micro-green website and create a more compelling user experience by researching the strengths and weaknesses of competitors' websites. Furthermore, a competitive analysis can aid in identifying potential threats to the new website's success, such as established competitors with loyal customers and strong brand recognition.
User Survey
Why User Survey?
Screener, Demographic data, Conditional logic and Quantitative data
I conducted a user survey to gather valuable information about potential users' needs, preferences, and pain points. This data is essential for me to create an effective, user-centered design that meets the needs of the target audience.. According to the findings, users were interested in:
Lack of awareness: Most users had never heard of microgreens before and were unfamiliar with their benefits and how to use them.
Need for education: Users expressed a desire for more information on the different types of microgreens, their nutritional value, and how to incorporate them into their diets.
Convenience: Users preferred a seamless and hassle-free shopping experience that would enable them to find and purchase microgreens quickly and easily.
User Research Results
Key Insigts
Where do our users source their fruits and vegetables?
User Interview
I then conducted user interviews with two types of users to better understand their needs and pain points: those who want to buy microgreens and those who want to learn about microgreens.
For the users who wanted to buy micro-greens, I asked them about their current purchasing process, their expectations for a trustworthy and reliable source, and any pain points they'd experienced in the past. We also inquired about their packaging and delivery preferences.
And I asked users who wanted to learn about microgreens about their current knowledge and experience, what type of information they're interested in, and how they prefer to learn (e.g. videos, articles, infographics).
Top insights from user interview
Users who are primarily interested in buying microgreens:
Value convenience, trustworthiness, and sustainability
willing to pay a premium price for high-quality, fresh microgreens
Appreciate a wide range of micro-green varieties to choose from
Users who are interested in learning about microgreens:
Educational resources are key
Content that is written in a simple and accessible way
Interactive features: videos or tutorials
Persona
After gathering all the research I created three distinct personas for a micro-green website that sells and educates people in order to better understand the target audience's needs and goals. By creating three personas, I can identify the various types of users who will be using the website and design for their specific needs and preferences.
Persona 1
The first persona would focus on understanding the needs and goals of customers interested in purchasing micro-greens. This would help me to create a website that is easy to use, visually appealing, and provides all the necessary information about the product.
Persona 2
The second persona would focus on understanding the needs and goals of users interested in learning more about micro-greens. This would assist me in creating an informative, engaging, and user-friendly website with clear and concise information about the benefits and uses of micro-greens.
Persona 3
The Third persona would focus on understanding the needs and goals of users interested in buying and learning more about micro-greens.
Journey Map
I created a journey map to visually represent a user's overall experience with a product or service. It provides a comprehensive view of the user's journey, including motivations, needs, pain points, and the touchpoints they encounter along the way.
Define
User Stories
User Flow
Site Map
A high-level overview of the website's structure and hierarchy, as well as to improve user experience by making it easier for users to navigate and find what they're looking for on the site.
Sketches
As part of the ideation phase for a new website, I created a series of sketches. The sketches allowed me to quickly experiment with different concepts and user flows without having to worry about the finer points of a more polished design. I was able to generate a lot of ideas in a short amount of time by making quick and rough sketches.
Wireframes
I started by creating low-fidelity wireframes to experiment with different design ideas and layouts, using the information architecture as a guide. I then progressed to high-fidelity wireframes with greater detail and accuracy, including all necessary content, features, and functionality.
I gathered feedback from my users throughout the wireframing process in order to refine and improve the design. This was an iterative process that allowed us to make the necessary changes and ensure that the final design met the needs of the users and the design goals.
Develop
Style Guide
To create a strong brand and identity for the website, I followed a design process that included brand Strategy, mood Boards, visual Design, and Brand Guidelines:
Hi-Fidelity Prototype
Usability test
After building a high-fidelity prototype, it was time for usability testing to identify any issues with usability or areas for improvement in the user interface, user experience, and overall design. Testing with users can assist me in ensuring that the website is simple to use, intuitive, and efficient for users, resulting in increased user satisfaction, engagement, and conversions.
Following the gathering of feedback from real users, I can now make data-driven design decisions and optimize the website to better meet user needs and preferences.
Change 1
When users clicked on the "Add" button, they were immediately redirected to their view cart page. However, I discovered that this was not the best user experience because some users may want to browse and add more items to their cart before checking out. To fix this, I made a design change that added an indicator to the page that told users they had successfully added an item to their cart.
Change 2
Here as I observed another usability test, I noticed that users were having difficulty due to a lack of clear information hierarchy. The content was not organized in such a way that the most important information or the relationships between different pieces of information were clearly indicated.
I reevaluated and optimized the information architecture (IA). I then created a visual hierarchy that prioritizes the most important information and assists users in understanding the relationships between various pieces of content.
Change 3
I performed a similar task, but with different content.
Final Thoughts
I believe I have successfully created a user-friendly experience that balances both education and sales. The use of clear information hierarchy, intuitive navigation, and persuasive product pages can help users understand the benefits of micro-greens and encourage them to make a purchase. Additionally, the inclusion of user feedback and continuous testing allows me to improve the website further and meet the evolving needs of our users.
There is always room for improvement, and down the line, I can further enhance the user experience by conducting regular user testing and gathering feedback to identify pain points and areas for improvement, continuously updating and optimizing the website to align with user needs and expectations and incorporating new features and functionalities
Thank you
Wow, you read three weeks' worth of work in just a few minutes. That's impressive!
More Projects
Uspace
Created an immersive platform for speech practice
iBUS Transportation
Fixed Uncertainty about Bus Arrival Times
GAIA
Redesigning Improved User Experience