My Framer Site

Mobile App

2022

Waycool App

A Seamless B2B order placing for quality focused food service client.

SEE LIVE

WayCool operates a full stack, broadline product range across multiple channels and categories such as fresh produce, staples, and dairy, serving over 1,00,000 clients in the general trade, modern trade, and food services space. WayCool's consumer brands basket consists of Madhuram, KitchenJi, L'exotique, and Freshey’s, to name a few.

Project Overview

In November 2021, the business teams discovered that Waycool's customers find it difficult to place orders using the Waycool app, resulting in a higher number of people dropping from the app.

Research Process

We interviewed a few operational staff members working in the warehouse to understand their day-to-day processes and highlighted the pain points they face on a daily basis.

User Persona

After conducting user research through interviews and observations of customers who regularly order from Waycool, we have identified two primary personas. These personas represent different types of customers with distinct needs, goals, and frustrations when it comes to ordering products from Waycool.

Identifying Issues :

When I used current Waycool app, which is currently used by customers, I was really surprised because the UI was disastrous. I had to go through the screens one by one to understand the flow.

Competitive Analysis

We studied a few competitor's apps to identify patterns and record their offerings.

Design Plan :

At the end of February, we began the designs, and we must release the product by August. We have exactly 6 months to design the complete app.

Following are the key questions in our mind :

What can be done unique in our design ?

What was our visual design language ?

Should we need design web ?

Did we need a design system right now ?

Paper Sketch :

For the onboarding flow, we already designed it without much thought to the design. We simply copied the flow from the salesman app in our organization. The home screen is the first impression of our app, and it should be able to captivate the user's attention and be the landing page after a tedious process. We created wireframes for the important screens.

Inspirations :

We took inspiration from other B2B apps, e-commerce platforms, Dribbble, Behance, and Pinterest. We tried to find the design patterns that would work for our app without getting too distracted by the visual elements of other designs. We took a lot of screenshots to help us stay on track.

Design Iterations

After doing multiple design iteration on homepage, we picked the best of every screen, reviewed it with the team and cross-functional team for feedback, and came up with a homepage that defines our brand and make our homepage look better than any other B2B apps in the market.

Visual Direction

Once we fixed the homescreen, which gave us an idea of visual direction we have to go.

Design System

Working alongside fellow designers, We began developing components that formed our design system. Simultaneously, we focused on visual design to facilitate seamless testing and efficient corrections. This approach ensures that future updates can be easily implemented with minimal design adjustments.

High Fidelity Designs

All screens in the app feature a colourful yet minimalistic design, aiming to provide visual appeal while prioritising functionality as the main focus.

Pitch deck Presentation

All screens in the app feature a colourful yet minimalistic design, aiming to provide visual appeal while prioritising functionality as the main focus.