Express

Timeline
Jan’ 19 - Apr’ 19
Tools Used
Sketch, Principle, After Effects, Marvel, Zeplin
Tools Used
Sketch, Principle, After Effects, Marvel, Zeplin

Redesigning, Express: A digital cafeteria solution that handles online food ordering, bill generation and payments, as a more seamless, engaging & accessible experience for the employees of the company.

My Contribution
I was accountable for user flows, explorations, interactions, visuals, and prototyping. Conducted user research alongside my PM using methods such as user interviews, and online study to address both user behavior and attitudes.
Collaborators
1 x Design Manager
2 x Product Managers
6 x Engineers
backgrounD

Express: Company cafeteria app

A complete end-to-end digital corporate food court solution primarily aimed at employees of a company. Automates the intended flow of cafeteria services ranging from ordering, paying and managing meal orders without the hassle of dealing with the physical cash at all.

Browse through company’s cafeteria menu in zeta express app.

Pay for the meal through zeta express app. No need for cash transactions.

No queueing in cafeteria. Receive notification when order is ready for pickup.

Spike in users & interest in acquisition leads to redesign of Express

The solution, which was launched in 2017, scaled from 5 companies in the first year to 36 companies by the end of 2019. With a massive increase in the number of users to 100,000 & interest from Sodexo in acquiring the business, zeta wanted to revamp the application into a fresh and enjoyable experience catering to the new and young crowd, ultimately driving sales.

We wanted to improve the experience in terms of usability, no of steps to order, visual appeal and performance. On the parallel, doing experiments with design at various points in the user journey to observe metrics, which can act as a guide later to increase revenue in various ways.

BUSINESS GOALS
Simplify the ordering process to save time
Increase sales for higher margin items
Fresh visuals & enjoyable user experience
Research & Synthesis

Understanding the current user journey

Before diving into the project, I wanted to understand how the application was structured, and how employees interacted with the application in an office environment. I mapped out the existing user journey.

Existing User Flow
Research Plan

Understand how employees order food using the zeta express app. Find challenges and identify drop off events, in order to ease their flow & introduce features for the future.

Interviewed 15 people across 3 companies

I went on field along with my product manager and visited 3 of our major clients: Netapp, Dell & Zeta in Bangalore, India. I conducted semi structured interviews with employees of the companies who were using zeta express for ordering food. Conducted interviews with 8 people aged between 24- 52.

Employees picking up their order at Netapp cafeteria

User reviews on play store & app store

I went through the actual user reviews on the Google Play and iOS App store to acknowledge any undiscovered pain points faced by the users. Given below are few of the reviews. Name of users has been changed to protect their privacy.

SYNTHESIzING ALL FINDINGS FROM RESEARCH
01
Most people have fav stores and have an eating pattern and order the same food for specific mealtimes.
02
People prefer to discover menu in person. Pictures in the app are small and not clear enough.
03
People are not sure about the status of their order and linger around the pickup spot crowding the cafeteria.
04
People sometimes order from multiple restaurants for the same meal.
IDEATE & DOWNSELECT

Brainstormed 25 ideas collectively & received feedback from stakeholders

I brainstormed multiple features & ideas based on my findings with my design manager. Had share-out's with other designers and my product manager for feedback. Involved the developers to understand their effort, which helped us prioritize ideas.

Impact-Effort which helped us downselect

Based on the learnings, the business green lit a few features based on impact and low effort, there were few which were high effort but important for business. The ones in orange were moved to phase 2.

USER FLOW

Restructured user flow to align stakeholders

We were introducing multiple features into the application; I created the restructured user flow to help all stakeholders to get on the same page. The following diagram doesn't address the error scenarios and edge cases.

Features marked in purple are the new additions

Once I brought everyone on to the same page, I found it essential to revamp the design language before detailing the features.

NEw design language

A fresh look that stands the test of time

I was working on a few variations that are both classic and appealing to the current generation. At the same time, I did not want to compromise on the readability or functionality of the app, by focusing on amplifying the visual aspect. 2 major decisions that completely changed the look of the application.

Typography

A mono font IBM Plex for both our platforms IOS and android, that is easily readable and aligns when the numbers total in the payment page.

Color Palette

Introduced light gray as the base color in the app, for better visibility, scanning and to improve focus on the content.

Moved away from the basic color palette which had majority of purple. Introduced flat pop colors in necessary spaces without overwhelming the audience.

FEATURES

Homepage & Personalization

I wanted to make the home screen dynamic and personalized to each consumer. Our existing app did not have any details other than the available stores. I tried a few versions and illustrations before we finalized.

Previous Homepage
Homepage variations
FINAL VERSION
Illustrations & Order Again

I came up with different illustrations in the homepage banner based on time of the day. Based on user’s routine ordering, we decided to show personalized order again section.

Favorite stores & Rating

System starts populating the user’s favorite stores based on order frequency & also gives the user option to pin their favorite stores.

Order Again GIF
Unpin Store

Revamped Store Menu

We wanted to make the store menu a lot richer with images, details, filters and allow merchants to promote their store specials. I experimented with layouts & icon style.

Previous Storemenu
Storemenu variations
FINAL VERSION
Best sellers & Fresh icons

With the addition of filters, we also added a section for best sellers, to help with discoverability & decision making. I came up with a new icon style & implemented across the application.

Item Details

Improved readability for the overall details section. One can tap on the image to expand it and have a better view.

Item Details GIF
Best Sellers & Icons

Payment Flow

Apart from adding features like instructions & other payment methods, I experimented with cross selling features like “last minute ordering” section in payment screen.

Previous Payment Screen
Payment Screen Variations
FINAL VERSION
Promo Codes & Instructions

After discussions with business, the product team decided to add promo codes option in payment section. I also added quick instructions that the users can share with the cafeteria.

Last Minute Ordering

For cross selling, we added a section where users can easily access last minute ordering like desserts & beverages, imitating real life scenarios.

Last Minute Ordering GIF
Payment Screen

Order Status

We wanted to keep the consumers informed about the order status at all times, so that they can prepare accordingly and not crowd in the cafeteria. Tried out a few variations to keep the user informed and engaged during this period.

Previous Order Status
Order Status Variations
FINAL VERSION
Multi store receipts

Apart from having unique illustrations for order status, I also wanted to address the possibility of multi store receipts at the same time. Differentiated each receipt with their token number and color of the receipt which was based on the cafe’s branding color.

Order Status GIF
Order Collected

Delightful Animations

Illustrations based on time
Homepage scroll down anim
Crowded cafeterias
Outcome

Launched the new version by the end of 2019

With the design mostly finalized, I worked with our engineering team on implementation. I had weekly sync ups with the engineers and product manager to get status updates and worked out the remaining details, there definitely were hiccups, I made minor iterations and came up with workarounds to keep the wheel churning. We launched the new version the end of 2019 with all new features implemented

Increase in number of transactions by 36%
Overall, 17.4% increase of new consumers.
Rating increased from 3.7 to 4.0 in playstore

Sodexo partners with Zeta express

In June 2019, Sodexo invested $60m in zeta and acquired the zeta employee benefits division along with express. The leadership decided to setup a separate design division to work with Sodexo, I did a clean handoff to them with a series of meetings explaining the rationale behind our design decisions.

Closing notes

The perfect underdog project that kickstarted my career

Zeta express was not expecting a refresh when I joined the express team. With sudden interest for Acquistion, I was trusted by my manager Ramakrishna with this project. I had the opportunity to see through all stages of a project from design to implementation.

Having given the sole responsibility of research, experimentation & design, I took this project as a challenge. From managing stakeholders, synthesizing research, presenting to leadership, receiving feedback from peers - this project helped me become a better designer. The success of the project helped me build trust within the team and I was soon moved to Zeta’s banking vertical to take over new initiatives.