Revamp Chikoo's e-com site to transform Shopper's Experience 🖥️

Yugsha zia

Visual Designer

Web Designer

UX Designer

Figma

React

STREAMLINED FOOD ORDER PROCESS

Chikoo is a business management suite that helps young entrepreneurs manage their orders and scale their business. align with the sass software, the company wanted to unable young entrepreneurs with a website that enables multiple payment systems and delivery partners for their business.

THE CHALLENGE

ONE WEBSITE THAT SUITS ALL TYPES OF FOOD BUSINESS CONCERNS.

In today's busy world, people want an easy way to order food from their favorite restaurants. However, there's a problem: restaurants struggle to manage orders efficiently, and existing platforms take a big chunk of their earnings. Small businesses find it tough to compete because they lack branding options. This causes trouble for both customers and restaurant owners. We need a user-friendly food ordering platform that helps restaurants run smoothly in the competitive food delivery market.

‍

Ambrosia: A fine dine restaurant had a hard hit during covid cause of the inability of fulfilling their orders.

Food truck Bao Bae do not have the capability to cater serve people in large number and in better environments.

APPROACH

A MOBILE FIRST WEBSITE THAT OFFERS MARKET PLACE CHANGEABLE DESIGN ELEMENTS.

Designing a website that is flexible to add "Add- ons" for fast food type business, Pre-Order tags for the high end restaurant needs and elements that display like promos and bank discounts. The restaurant website would be designed with a strong focus on user-friendliness. It would aim to provide an excellent experience on both small mobile screens and large computer displays. Restaurants would have the ability to personalize their online presence easily with custom colors, fonts, and logos. Even those who may not be tech-savvy would find it effortless to add, edit, or remove menu items.

‍

Mobile First Design: 80% of users use their phones to browse and order their food online.

Flexibility of changing branded elements: Restaurants can personalize their online presence easily with custom colors, fonts, logos and images.

Incorporate a lot of imagery in the elements: Images are a big factor for displaying promos and add a presence of food products and food vibe.

Add ons and Pre- Orders: Some Businesses like a pizzaria, a burger joint or a subway have their orders customized by their customers. This requires previewing these choice of options on the menu for the user to check.

2-Step Checkout: Users who spend less time in the chenckout section tend to order more from the website then the users who had to spend more time of the steps in the checkout process.

Saved card information for ease of payment:

‍

A collaborative culture with lean UX

We opted for a lean approach which emphasises rapid sketching, prototyping, user feedback and design mockups. This created early team‐wide alignment, sparked tons of great ideas and created a strong sense of ownership across different disciplines within the company.

‍

A single page website layout

Limiting ourself to just a single page website to speed up the process and also keeping the ordering process simpler for the end user. Taking more feedback from the testing group ( handful of business owners) helped us to test this way out to further our team's confidence in this approach.

DISCOVERY

WHAT IS EASE OF ORDERING AND PAYMENT FOR THE CUSTOMER? HOW CAN IT BENEFIT THE BUSINESS?

The discovery phase was a quick, high‐intensity effort that allowed us to define project milestones, audit the existing work, review the competitor landscape, understand our client's vision, and begin research into user needs, behaviour and pain‐points. We also kicked off a technical discovery phase to understand feasibility and constraints.

Our research revealed that the current layout missed the visual contrast in the design that made the product visually less appealing, Lacked the customization of elements like category banners, Business that had add-ons in their product lacked the ability to do that etc.

After designating persona types and aligning this with our phasing strategy we were able to prioritise who we would be focusing on supporting in the early stages. The phase 1 app focused on supporting the goals of Hamza, Ali and Nassir. In 2nd Phase two we can cater to Jason Steak House.

We used personas constantly throughout the project to guide design decisions, priorities, and create empathy amongst the client and our team.

‍

“We used personas constantly throughout the project to guide design decisions, priorities, and create empathy amongst the client and our team.”

‍

Our persona hypothesis consisted of four different archetypes which we used to facilitate discussions about our users needs, desires and varying contexts of use. Through careful analysis of our research, we identified sufficient behavioural variables to segment our user audience. These variables could be categorise into activities such as frequency of use of the ordering, type of products business offers, and how efficient is the checkout for the end user. We discussed the personas with our client to develop a clear picture of who the design of the app would target in phase 1 and later in future releases.

‍

User Pain point insights:

For the Food Bussines Owners:

Centralized dashboard to manage menu items, update prices, and adjust availability in real time.

Efficient order management system for handling incoming orders, tracking deliveries, and managing order fulfillment.

Inventory management tools to monitor stock levels and automate restocking processes.

Analytics and reporting features to gain insights into customer preferences and sales trends.

For the food ordering customers:

Easy-to-use interface for browsing menus, customizing orders, and placing orders.

Secure payment options and real-time order tracking for an enhanced user experience.

Access to detailed restaurant information, including reviews, ratings, and dietary information.

Notification system for order updates and promotional offers.

DESIGNING FOR WHAT USERS WANT TO KNOW, DO & FEEL

Synthesizing goals from our research served as a lens through which we could consider not only what the website should do, but also how it should feel. We believed this would be the difference between delivering a good experience and a great one. Thinking about emotional design early on helped our client understand the importance of aesthetics and tone of voice to the experience.

‍

Storytelling About Ideal Experiences

Knowing who exactly I was designing for allowed me to ask myself how the app fits into the lives of the users. I imagined ideal experiences and focused on how our personas think and behave rather than getting into specifics about interfaces, technologies or business goals.

Keeping the scenarios at a high‐level allowed us to work fluidly and explore concepts that we could easily communicate with our food business owners and their client. They formed the backbone of our requirements, and allowed us to express these from both a functional and emotional perspective allowing for further empathy with our users.

‍

Brand and Experience Requirements

Understanding the usage contexts of the website helped me develop a clear vision of the tonal expectations of our customers who are our users. To communicate the personality of each business on their website, we developed a set of experience principles. These were used to sense‐check design decisions, articulate core values and describe key attributes the app experience should uphold for both the users and the brand. The principles were used constantly to drive the aesthetic, feel and overall tonal direction of the app.

‍

FINAL SOLUTION SCREENS

INTERACTION OF DESIGN

Because of some limitations in internet bandwidth of Pakistan, I decided to use google's material UI library MUI. The transitions in the app were chosen to strike a balance between reinforcing context and creating an engaging and compelling interface. Because google offers elements that are light in CSS hence the website can easily load on any customer device despite the issue of connectivity.

‍

DETAILED DESIGN

INTRODUCING … CHIKOO FOOD WEBSITE VERTICAL

The gallery below shows the final website that was launched and used by many bussiness big and small and increased (+60%) more sales for an average bussines. This website also helped Chikoo to onboard 60% more clients especially in the higher end restaurant market. Over all the website saw (+43%) more traffic after the revamp.

EASILY BRAND-ABLE ELEMENTS

‍

SINGLE PAGE LAYOUT FOR THE EASE OF USE

‍

DESKTOP VIEW FOR THE USERS WHO ARE BUSY IN THEIR WORK

‍

Like this project

Posted Mar 1, 2024

A website template with customization that is integrated with the business management software. Ideal for any business as a one stop shop to manage it all.

Likes

Views