OjaExpress
OjaExpress is an online grocery shopping and delivery platform that specializes in same-day delivery of grocery items that are intrinsic to various global ethnic communities such as African,Caribbean, Latin American, Middle Eastern, European and South Asian cuisine. At OjaExpress we aim to bring families, communities and generations together. We began our website redesigning process in early Jan 2021.
๐
Project Overview
๐
CHALLENGE
The main goal of the redesign process was “To facilitate a platform that promotes cross-cultural experiences through food that was product and consumer led and simple to use”
โ
Post pandemic, the shopping habits of people had changed. As the primary product designer of OjaExpress, I had to make the website more culturally inclusive by incorporating design aspects from various cultures as we were getting new customers. I aimed to design a website for people who came from very different ethnic backgrounds, who were not tech-savvy and make them feel included.
โ
Note: This is my second redesign of the OjaExpress Website.
๐ฏ
GOALS
1. Implement a Design Process
2. Improve usability across the platform
3. Establish a standardized design kit
4. Establish a standardised Design System
๐ฉ๐ป๐ป
ROLE
Product Designer
Product Strategy, Visual Design, Prototyping and Testing
โณ
TIME
Jan 2021 - Ongoing
๐ฌ
TASK
Redesign a responsive website
๐
TOOLS
Figma, Adobe Illustrator, Adobe XD, Procreate
Design Process
EMPATHIZE
I already had a brief understanding of OjaExpress’ user based on a couple of projects that I’d done before. None the less I still felt the need to get an overall understanding of the online grocery shopping trend, before any brainstorming sessions.
๐ฌ
MARKET RESEARCH
I started off with a thorough secondary research. I found many articles online done by Business Insiders, Forbes and Mercatus which gave me a deeper insight into the E-grocery shopping trend which had changed significantly following the pandemic.
๐ฆ
EFFECT OF COVID-19
The coronavirus pandemic had rapidly accelerated the widespread adoption of online grocery shopping.
Business Insider reported that more than 40% of Americans ordered groceries online during the week leading up to the pandemic and more than 90% reported that they’d like to continue shopping online. As covid-19 also brought new regulations and consumer concerns to light, many e-grocery retailers have made major changes to their business models.
โ
-
61% of ethnic or multicultural Americans are unable to find all the groceries they want at their main grocery store.
-
51% of multicultural American consumers go to more than 2 grocery stores to get all their groceries.
-
$42 B was spent on ethnic groceries by the ethnic grocery stores in the year 2020.
-
Immigration population is expected to grow to 70 M by the year 2030
๐
MARKET TRENDS
๐
COMPETITIVE ANALYSIS
๐๐ฝ
PERSONA
With an understanding of the user’s goals, needs, motivations and frustrations I set out to create a user persona based on the insights gained previously.
๐งธ
STORY BOARDING
โ๐
USER JOURNEY
To get a deeper understanding of the user’s needs and frustration I worked closely with the product team to see their shopping trends. I also made use of google analytics to understand the users' trends.
With the data collected I created a storyboard to help myself and the product team to visualize the user’s experience.
Defining Problems
DEFINE
๐ฌ
PROBLEM STATEMENT
People who shop for culturally diverse foods on OjaExpress need a trustworthy, white-glove experience to find and purchase groceries because they delight in discovering significant items and want to feel confident entrusting that responsibility to an online platform.
PROJECT GOALS
โ๐ผ
Based on all the research done previously, I began to identify and focus on the core problems that needed an immediate fix. Some were simple, others a little complicated.
To have a better sense of clarity, I created a Venn diagram that focuses on the different goals of the business, consumers and the developers.
๐ป
SITE MAP
Based on the research findings I created a list of pages and add-ons our website would feature. Oja had a large assortment of pages that needed to be designed. I also had to map put the pages carefully, making sure the users would find it easy to navigate throughout the site.
Ideating Solutions
IDEATE
๐
SKETCHES
After deciding on the user flow and the site architecture for OjaExpress, I started sketching out a rough design for the screens. The sketching was based on the design patterns I found while researching similar sites.
WIREFRAMES
Once basic sketching was done I had a fair idea about where each element of the screen would go. To present my idea to the stakeholders I developed some medium-fidelity wireframes. To make the layout responsive and fluid I worked on the different screens simultaneously.
๐ธ
REBRANDING
OjaExpress just underwent a complete rebranding to provide a fresh style to it's users. I worked closely with the marketing and graphics department for a seamless integration.
Old
New
New
PREVIOUS UI DESIGNS
Based on the research findings I created a list of pages and add-ons our website would feature. Oja had a large assortment of pages that needed to be designed. I also had to map put the pages carefully, making sure the users would find it easy to navigate throughout the site.
Previous Designs
๐ก
Prototype Development
PROTOTYPE
USER FLOW PROTOTYPE
Over the months I made several prototypes of different task flows that I use to present to team members , stakeholders and also during pitch meetings with the investors. I also use the prototype for user testing to get early validation from the users.
Usability Testing
TEST
๐งช
USABILITY TESTING RESULTS
We used the fully functioning prototype to test it out with users. We focused on usability and visuals during the first round of testing. Later we focused on the cart and the checkout experience. The tests were conducted remotely using Userbrain and over zoom calls.
The testers were from the United States, 1st or 2nd gen immigrants or international students and ranged from the ages 18-50.
Problems identified
1.Confusing search options
2.Unclear options for filtering out communitites
3.Two step process to get to the shop page
4.Shopping from two stores expereience
5.Lengthy complicated checkout flow
Solutions implemented
1.Introduce two different search bar features, one global and one local to the shop
2.Community filter added as an optional step in the shop page
3.By removing the community dropdown an extra step was eliminated
4.Improved the shopping from two stores experience
6.Introduced a new checkout flow which takes the user step by step through the process and drastically reduced the number of steps.
๐จ
LATEST UI DESIGNS
The latest rebranding and redesign focused a lot on user feedback. We ran several tests on user brain, talked to customers online and used data from Google analytics and smart look to assess the changes.
Reiterations
& Next Steps
To keep monitoring the trends in the food industry particularly the grocery side. To see if any changes impact the new customer acquisition, exiting customer growth. Conduct more user testing, analyze data trends, user behavior throughout the site.
โ
โ
๐ค
โ๐ผ
๐
1.Design Version 3
This is a big design change for Oja. With a rebranding of after 7 years and major layout changes we expect a huge positive impact on user behavior which will result in an increased conversion rate.
2.Design Handoff
The Designs have been finalized, documented and handed off to production.
3.Product Launch
The product is currently under production and is expected to be released during the final quarter of 2022
