The Greedy Panda Project

The Greedy Panda Oriental Supermarket app was designed for a fictional online retailer that supply Asian foods to the public. The company also have traditional stores located in Leeds with restaurants attached so these details were also incorporated into the design.

Project Outline

The design covered the entire user journey, starting from the app's opening screen and loading screen, through the onboarding process, to login or sign-up, and included the complete flow for searching and purchasing products, as well as handling payment and shipping details. Additionally, contact pages with maps and information pages for restaurants and physical stores were designed.

Greedy Panda design in Figma

Research Insights

Exploring Market Dynamics and Conducting Competitive Benchmarking to the Enhance Greedy Panda App Design

UX/UI Research

Competitive Benchmarking

In the research phase of developing the Greedy Panda app, I conducted competitive benchmarking to understand industry standards and identify opportunities for differentiation.

I analysed leading Asian food retail apps and mobile websites, focusing on user experience, product offerings, and customer engagement strategies. These included CoCo Island Mart, The Japan Centre, Ceylon Supermarket and Starry Mart.

I also used the Thai Airways and Grab apps to understand how authentic Asian companies were branding and styling their apps. This exploration provided valuable insights into design aesthetics, cultural nuances, and user engagement strategies that are popular in the Asian market.

screenshots for Thai Airways, Japan Centre and Grab

UI Style Guide

Colors, fonts, images, and icons were carefully selected during the design phase to evoke emotions, enhance readability, and improve the overall user experience.

UI Style Guide #1

Brand Logos

Custom logos were designed to create a distinct brand identity. The Osaka Sans Serif font was chosen to reflect the brand's oriental theme, while a playful panda eating noodles was used as the logo image to convey authenticity and approachability.

Greedy Panda Logos

UI Style Guide #2

Typeface Settings

The Greedy Panda App uses Kanit Semibold for headings to ensure clarity and impact, while Hind in various weights provides readability and versatility for body text.

Examples of Hind and Kanit fonts

Heading Styles

H1

Kanit Semibold

39.1px / 120%

Greedy pandas quickly jump

H2

Kanit Semibold

31.25px / 120%

Greedy pandas quickly jump, seizing every food by hand

H3

Kanit Semibold

25px / 120%

Greedy pandas quickly jump, seizing every food by hand

H4

Kanit Semibold

20px / 120%

Greedy pandas quickly jump, seizing every food by hand

H5

Kanit Semibold

16px / 120%

Greedy pandas quickly jump, seizing every food by hand

H6

Kanit Semibold

12.8px / 120%

Greedy pandas quickly jump, seizing every food by hand

Body Text Styles

Regular

Hind Semibold

16px / 150%

Greedy pandas quickly jump, seizing every food by hand. Just a few lazy dogs watch the curious scene. Over the hill, a fox observes their antics.

Light

Hind Regular

16px / 150%

Greedy pandas quickly jump, seizing every food by hand. Just a few lazy dogs watch the curious scene. Over the hill, a fox observes their antics.

Bold

Hind Bold

16px / 150%

Greedy pandas quickly jump, seizing every food by hand. Just a few lazy dogs watch the curious scene. Over the hill, a fox observes their antics.

Small

Hind Semibold

14.2px / 150%

Greedy pandas quickly jump, seizing every food by hand. Just a few lazy dogs watch the curious scene. Over the hill, a fox observes their antics.

Large

Hind Semibold

18px / 150%

Greedy pandas quickly jump, seizing every food by hand. Just a few lazy dogs watch the curious scene. Over the hill, a fox observes their antics.

X-Large

Hind SemiBold

20px / 120%

Greedy pandas quickly jump, seizing every food by hand. Just a few lazy dogs watch the curious scene. Over the hill, a fox observes their antics.

UI Style Guide #3

Icons

To ensure a cohesive design, icons from a single library were used, maintaining a consistent style and thickness throughout the app.

Truck Icon
Trolley Icon
Chopsticks Icon
Saki Bottle Icon
Noodle Bowl Icon
Profile Icon
Map Pin Icon
Heart Icon
Magnifying Glass Icon
Add a Profile Icon
Padlock Icon
Chinese Dumplings Icon

UI Style Guide #4

The 8pt Grid for Consistent Spacing

An 8pt grid system was implemented to ensure consistent spacing throughout the design. This approach enhances visual harmony and alignment, making the interface more intuitive and aesthetically pleasing.

8pt grid example for a Greedy Panda app screen

UI Style Guide #5

Colour Styles and Gradients

A cohesive colour system was developed, incorporating both solid colours and gradients. This palette enhances visual appeal and ensures a consistent and vibrant look across the app, reinforcing the brand's identity.

Indigo - Orchid Gradient

hsl(265, 85%, 42%) to hsl(295, 85%, 42%)

Indigo - Dark Gradient

hsl(265, 91%, 25%) to hsl(265, 90%, 35%)

Indigo - Light Gradient

hsl(265, 83%, 91%) to hsl(0, 0%, 100%)

Indigo - 400

hsl(265, 50%, 55%)

Indigo - 600

hsl(265, 85%, 42%)

Indigo - 800

hsl(265, 90%, 30%)

Orchid

hsl(295, 85%, 42%)

Mist

hsl(171, 100%, 85%)

Bisque

hsl(281, 61%, 90%)

Primary Dark

hsl(264, 70%, 9%)

Primary Light

hsl(265, 60%, 96%)

UI Style Guide #6

AI imagery for Onboarding Screens

Onboarding screens were designed using AI-generated images from Leonardo AI, enhancing visual appeal and engagement while streamlining the user introduction process.

Cartoon panda delivering a parcel in a jungle
Add an image icon

Image Prompt for Leonardo AI

Food Delivery Panda in Jungle

A cartoon smiling panda making a delivery of food and dressed as a delivery person , panda should be holding a box of vegetables set in a bamboo forest with purple fauna.

Cartoon panda in a supermarket
Add an image icon

Image Prompt for Leonardo AI

Supermarket Assistant Panda

A cartoon smiling panda in a supermarket aisle and looking at fresh vegetables and dressed as a sales assistant , panda should be holding a shopping basket with purple used as an accent colour.

Cartoon panda eating food on a dining table
Add an image icon

Image Prompt for Leonardo AI

Greedy Panda Eating at Table

A cartoon smiling panda eating food in a restaurant, the panda should be sitting at a table and the background should be purple and green.

User Interface Screen Designs

This section displays key UI screens, organized by user flow, to illustrate the application of design principles and ensure a seamless user experience.

User Interface Design #1

Loading Screen Annimation

A visually engaging loading animation screen was developed as a standalone prototype for the Greedy Panda app to enhance user experience during loading times.

Loading screen image

User Interface Design #2

Onboarding Screens

Onboarding screens were crafted to captivate users and accelerate user familiarity, providing engaging visuals and clear guidance.

Greedy Panda UI screen 1
Greedy Panda UI screen 2
Greedy Panda UI screen 3

User Interface Design #3

Welcome, Login, and Sign Up Screens

Welcome, login, and create account screens were designed to enhance visual appeal and engagement, providing an inviting introduction, a seamless login process, and a simplified user registration experience.

Welcome and login screen for Greedy Panda
Welcome and login screen for Greedy Panda
Create an account screen for the Greedy Panda app
account confirmation screen for the Greedy Panda app
Account exists screen for the Greedy Panda app
Login screen for the Greedy Panda app
reset password screen for the Greedy Panda app
Password sent screen for Greedy Panda app

User Interface Design #4

Store, Restaurant & Map Screens

Store and restaurant information and map screens were designed to enhance discoverability and engagement, providing clear details, interactive maps, and intuitive navigation.

Map screen for Greedy Panda
Store information screen for Greedy Panda
Store information screen for Greedy Panda
restaurant information screen for Greedy Panda

User Interface Design #5

Main Shopping Flow Screens

Main shopping flow screens were designed to optimise product discovery and purchase, offering intuitive navigation, clear product information, and a seamless checkout process.

Greedy Panda landing page screen
Greedy Panda category screen
Greedy Panda product list screen with list view
Greedy Panda product list screen with grid view
Greedy Panda product screen
Greedy Panda shipping details screen
Greedy Panda payment screen
Greedy Panda checkout screen

Looking to Start Your Next UX/UI Project

Get in touch to find out what solutions I can provide your business. I'd love to hear about any of your ideas and support you in reaching your goals!

Contact Me

Take your UX, UI or Web Design project to the next level? Let's work together on something amazing!

Get In Touch by Email