Group 3.png
iPhone-Mockup_OJA.png

UpperLevelCRM

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

My role as the primary designer for UpperLevelCRM was to do a complete redesign of the CRM along with the landing page experience. I also worked on a complete rebranding of the company. I worked primarily with the product manager/CEO of the company and also closely with the developers.

In this case study, I have included my work in redesigning the landing page along with the login/signup experience.

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

Apr 2022 - June 2022

TOOLS

TASK

  • Redesign the static landing page

  • Improve the “request invite” experience for the new users 

  • Improve communications throughout the site

  • Improve visual aspects of the site

  • Improve usability and information hierarchy

Figma, Adobe Illustrator, Adobe XD, Procreate

Design Process

EMPATHIZE

The redesign was aimed at giving the new users an easier way into the CRM. The ask was to provide all the information a new user would want to know about the software upfront so it would be easier for them to make a descision. 

Several areas of this redeisgn was based on the user feed back obtained through a “helpful genie” that allows existing users to talk about any frustrations or opinions they might have.

MARKET RESEARCH

As always I started off with a thorough research about existign CRMs. The first thing was to understand what a CRM is, CRM stands for “Customer Relationship Management” and is a software system that helps business owners easily track all communications and nurture relationships with their leads and clients. A CRM replaces the multitude of spreadsheets, databases and apps that many businesses patch together to track client data. The result: organization, efficiency, better time management, and impressed clients. 

What a CRM does must be communicated effectively to the new users.

COMPETITIVE ANALYSIS

Screen Shot 2021-06-17 at 4.33.52 PM.png

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.

Persona.png

STORY BOARDING

Group 234.png

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.

User Journey 2.png

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.

Group 18.png

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.

site map.png

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.

Group 235.png

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.

Website Design A.png
iPad Pro 11_ - 2.png
Android - 3.png

STYLE GUIDE

Frame 1 1.png

I decided to use the same style guide that I had previously developed for the older version of the website. The warm orange sets OjaExpress apart from its competitive green. These tones also go hand in hand with the design goals which is to be more culturally inclusive, trustworthy and empathetic.

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.

Website Design A 2.png
iPad Pro 11_ - 1 2.png
Android - 4 1.png

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

After a few times testing out the prototype, collaborating closely with other cross functional teams such as sales, marketing etc the following changes were recommended:

  1. The user flow was corrected to "Landing Page  ->  Community selection  -> Zipcode. 

  2. Users were still unclear about exactly what OjaExpress does and works.  

  3. No easy way to navigate between stores or communities.

  4. Users aren't aware that they can switch communities

  1. Design new Landing Page.

  2.  Redesigning the "How it works"

  3. Design a header

  4. Design a new community switching CTA

REDESIGNS

  1. Designed a new Landing Page

Landing Page.png

2. Cultural Community Homepage

Caribbean.png
iPad Pro 11_ - 3.png
Android - 25.png

3.Cultural Community Icons

SHOP RESULTS.png

The redesign of the  consumer side website was an overwhelming process. There were constant discussions, interviews, analysis and iterations happening throughout. I especially loved working closely with the developer team and the marketing team. Taking in everyone's idea and using it in the design proved to be super helpful. 🤙

Since the  designs are being constantly iterated there are chances that the version you see live  are slightly different to the ones I have posted here. I will try my best to keep this site updated as well. 

Reiteration & Next Steps