Building an online platform for organic produce — a UX case study
In this case study, I am going to share my end-to-end design process for designing a purchase journey for an online organic produce platform.
As the digital literacy rate in India is growing, the demand for organic food in India is witnessing good growth. The number of internet users in India has surged from 260 Million in 2015 to 525 Million in 2019. [1]
We all know about the physical effects of food on our body but flashback to 2010, how many of us knew that the foods we eat have a significant impact on our mental health? I remember the first time I read an article on Nutritional Psychiatry, I was stunned.
I mean the pizza that I crave every night could be causing me depression? [2] Whoa! This was huge for me.
People are becoming aware of the harmful effects of chemicals and fertilizers used during farming in India. Hence, there is a significant rise in the demand of organic produce in metro cities across India.
What is EarthFoods?
EarthFoods is a retail chain of organic food stores in India. They sell fresh organic vegetables and fruits and are planning to add other organic products into their inventory. Having a tie-up with thousands of certified farmers, they procure organic produce directly from them. They also have industry-standard quality checks for organic food procurement.
As of now, the Indian organic market is retailer-driven and there is a huge demand for an online platform where customers can shop certified organic foods and at the same time get the comfort of home delivery at an affordable cost.
EarthFoods wants to build a digital solution to cater to these needs and test-run the online platform with a limited number of metro cities and would expand gradually.
Target Audience
- Let’s start with the major driving force behind consumer habits — Convenience. People who find it convenient to shop online and cut the hassle of driving to the market, parking, carry around the shopping bags, etc. Because of their busy schedules, some of them don’t have time to visit a retail store.
- The Introverts — Those who would dread going to the retail store and avoid the hassle of interacting with a fellow human being. Yes, they do exist. And let me give you a number: It’s almost 25% of the world’s population. [3] Imagine the joy when they won’t have to go to a retail store to shop organic veggies now.
By the way, I fall into the Introvert category. Which one are you?
EarthFoods’ Vision
By 2022, Earthfoods want to provoke a change of food purchase behavior in Indian population. Meaning, they will change from uninformed dietary decisions to consuming what’s best for their health and the environment.
Business Objectives / KPIs
Enter the booming market of organic produce and grow the customer base by providing a variety of products at their doorsteps with the long-term goal of expanding the customer base and increasing profitability by optimizing costs.
Quantitative KPIs:
• 1000+ Order count within 30 days of launch.
• 1000+ Daily Active User (DAU) count within 90 days of launch.
Scope & Focus
In an e-commerce application, there are innumerable user journeys and every journey is equally vital. However, in this case study I will be focusing mainly on the purchase journey and its key features.
Secondary Research
Being a fitness enthusiast, I had a fair idea about the organic versus conventional food debate but knew so little about the nuances of the organic food market in India.
Did you know there’s a certification issued by Government of India for organically farmed produce? I didn’t.
So, I prepared a set of questions and took to the internet to find everything about the domain as well as the target user’s emotions and motivations.
Key findings from Secondary Research:
- According to market research reports, the organic product market in India has been growing at a CAGR of 25% and is a booming business to venture into.
- There is a growing demand for the affordable supply of Organic vegetables/fruits, especially in metro cities. Mid/low-income consumers are reluctant buyers because of the high cost associated with organic products.
- The Indian Government has a clear mandate to regulate the manufacture, distribute and sell organic produce. The customer shall look for a ‘Jaivik Bharat’ logo on the organic produce (or digital platform’s certification) to confirm its authenticity.
- Currently, the majority of organic produce sale is retailer-driven. There are a few online competitors with similar concepts like Live Organic, Farmer Uncle, I say Organic, etc.
In case you want to dive deep into the details, here’s a comprehensive research report.
Problem Statement
How might we help the metro cities’ communities access organic produce through a digital platform at an affordable price?
Competitive Analysis
Before starting to design a new product, it is imperative to make sure it has a good market fit. Also, it has to have a compelling competitive advantage over others in the marketplace.
So how do you evaluate the competitive edge?
Duh!… By creating a comprehensive competitive analysis report.
As per my experience, one of the common errors when carrying out a UX competitive analysis is the never-ending feature list. The last thing you want is to be drowning in loads of information. So, it’s extremely important to know your focus areas right from the outset. As mentioned before, I focused mainly on the purchase journey and its key features.
My past experience in product development came in handy to estimate the implementation cost of these features.
Empathy map, Proto-Personas & Goals
The insights gained from brainstorming and secondary research, our target audiences’ attitudes and behaviors were identified. On the basis of patterns observed from their personalities, below two user personas emerged:
- Caring Garima, who is a stay-at-home mommy with two beautiful kids.
- Fitness freak Abhay, an IT professional who considers his body as a temple.
Any guesses who was chosen as the primary persona?
Of course, it’s Garima! She is a modern-day mommy who cares not only about her nutrition, but her family’s as well.
So the Empathy Map was built around Garima since it was realized that Abhay’s needs, motivations, pains, etc. were all a subset of Garima’s. The Empathy map helped me gain a deeper understanding of the personas.
Subsequently, business goals were mapped with the user goals to come up with a profitable model for both the users as well as the business.
Information Architecture
Lo and behold! Here comes one of the most critical phase of any product’s journey, the Information Architecture.
I have seen firsthand how a poor IA would render a product useless (Just in case, I wasn’t a part of that product’s UX Journey).
Therefore, it was necessary that EarthFoods should have an IA where users would perform their tasks with the least amount of effort possible that would eventually create the easiest and most pleasant experience for them.
Low-Fidelity Paper Sketches
Paper sketches were made for both the desktop as well as responsive mobile version of the application to iterate and quickly make design changes. Variations of pages as well as components were made and shown to the potential users. Although a lot of significant feedback points were received, it was apparent that there’s a need for a mid-fidelity prototype of the application since users were unable to fully understand the interactions with the paper sketches.
At times, do you also feel the same with paper sketches?
Want to see all the paper sketches? Here’s the link.
Mid-Fidelity Prototype
As mentioned earlier, in order to get clear user feedback and perform usability testing, a mid-fidelity interactive prototype of EarthFoods application was created. And it worked like a charm. The working prototype acted like an actual application and users were able to relate to it as an actual product. The wireframes and working prototype was created using Figma.
View all the Desktop Wireframes
Here’s the link to the interactive prototype.
Usability Testing — Getting inside the heads of users
Usability testing of the mid-fidelity prototype was conducted to validate the application design. Participants were recruited based on their similarity with the defined personas and moderated remote testing was conducted.
A test plan was designed according to the identified test objectives and a scenario based task was given to participants. Their behavior was observed. Participants were encouraged to “think aloud” and speak up whatever comes to their mind while using the prototype. Doing this exercise, I analyzed the qualitative as well as the quantitative feedback received to understand the usability issues within the application.
I loved the simplicity of design. It’s very clear, uncluttered and there was zero confusion in performing the task.
— User Participant Feedback
Here is the summary of findings from the Usability Test:
From the overall test findings it can be inferred that the prototype is a success, with respect to the user purchase workflows. It has helped unearth some issues in content copy and the components which need to be fixed for better usability. Not to forget the recommendations received from the participants are quite valuable.
- Quantity section on the product cards under the listing page needs to be changed to a dropdown. This is because users are more familiar with the dropdown selection while choosing product quantity.
- Homepage needs to highlight the section ‘Why choose Us’, This would reinforce the user’s belief in buying products from EarthFoods.
- ‘Why shop from EarthFoods’ section on the cart pages is too overwhelming. This section needs a redesign with a minimal but concise content so that it doesn’t overwhelm the user.
- There is a need for a feedback mechanism or a micro-interaction when the user clicks on ‘Add to Cart’ so as to inform the user that the action has been performed successfully.
Want to dig deeper into key findings? Here’s the detailed report.
Branding
After implementing the feedback points received from usability testing, it was time to start working on the visual side of the application.
Since EarthFoods is closely related to natural organic products, I started collecting various picture snippets that would convey the EarthFoods’ association with natural products.
All the picture snippets were put together on a moodboard and voila, a color scheme emerged.
With the color scheme ready, the next step was to incorporate those shades to create a unified brand style guide showing all the major visual components to be used in the application.
High-Fidelity Screens
After creating the UI style guide, I started creating high-fidelity screen mockups on Figma. The overall user interface design was kept minimal to ensure users don’t get overwhelmed using the application.
View Desktop High-Fidelity Screens
Coming back to the problem statement:
How might we help the metro cities’ communities access organic produce through a digital platform at an affordable price?
The problem is solved by designing a minimum viable product for EarthFoods from where users can buy certified organic produce and schedule them for home delivery at their convenience. Apart from offering weekly deals & discounts, EarthFoods has partnered directly with the farmers to reduce the middlemen costing.
EarthFoods currently caters to Delhi NCR regions with an eye on expansion in other metro cities. They also plan to expand their inventory by introducing other organic products like organic oils, flours, milk etc.
Next Steps
Working on EarthFoods application was really interesting as well as informative. The research conducted to absorb the domain knowledge proved to be really valuable. Not only I learned the pros of organic food consumption but I also got to know the nuances of the organic food industry. In this case study, I covered only the purchase journey of user. The next step would be to explore other user journeys such as profile creation, order tracking etc.
Learnings
At times user preference takes precedence over usability best practices
As a best practice in usability, it is best to avoid a dropdown if you have to show a handful of input options. In our case (remember the first usability test finding?), we had only 3 input options to show. Since users were more familiar with selecting the product quantity from a dropdown list, they preferred it over an upfront list.
Want better feedback from users early on? Use original content copy
In case you noticed the paper sketches as well as low-fidelity wireframes, I tried to incorporate the original (or close to original) content copy in them. It proved to be really valuable while performing the usability tests on the wireframes since users were able to relate more closely with the actual product.
Thanks for reading! I hope it was worthwhile.
Check out my other case study on medium.
References
[1] Statista — Number of internet users in India from 2015.
[2] Cambridge — Fast-food and commercial baked goods consumption and the risk of depression.
[3] IntrovertZone — Introverts are taking over the world.
