A globe, walking on a hill in the clouds with a shopping cart, whistling.

Bodego

(2023)

UX Case Study

My Role

  • UX & UI Designer
  • Visual & Graphic Designer
  • UX Researcher
  • Slick Deck Designer & Presenter

Team

  • Kayla Hop Hing
  • Chenchen Zhu
  • Benjamin Valles
  • Yibei Zheng
  • Winnie Huo
  • Steven Poung

Tools

  • Figma
  • Photoshop
  • Figjam
  • Procreate
  • Illustrator
  • Pencil Sketching

Our General Process

A design process graph detailing the steps taken to make this design, and the order to perform them.

Problem Space 💭

As commercialization of our food is always being upgraded, people find it increasingly difficult to be ethical consumers of the products we buy. Because it is perceived that actions on an individual level do not make a difference on the bigger scale, people often find it troublesome partake in habits that help us have a healthier planet on an individual level. However, by changing the individual habits of one another, we can hold corporations accountable for their manufacturing and development processes through the power of the collective.

The ethical dimension of food waste [that] puts increasing pressure on retailers to show corporate social responsibility in terms of the environment and communities.
- Teller et al., 2018
Generally green marketing which must satisfy two objectives, improving environmental quality and customer satisfaction.

- Ottman et al., 2010

Challenges

Lack of Information

Inconvenient Paper Tracking

Lack of Tools

Lack of Time

Economical Challenges

Our Solution

A shopping cart with a leaf through its center.

Bodego

Derived from the word “Bodega” which is Spanish for a small shop selling wine and groceries. Now used commonly as a slang for a grocery store in an urban area.

Bodega + Go = Bodego

Many assumptions about environmentalism wrongly presume that sustainability can only be supported through changes in infrastructure and public policy. While the individual consumer contributes to issues such as landfills and greenhouse gas emissions, it is miniscule when compared to the effects corporations pose to the environment as a whole.

Bodego Cares, From Start to Finish

The primary goal of Bodego is to ensure the formation of eco-friendly habits and choices within users without making it a hassle in a busy, consumer lifestyle. This in turn, influences companies to adopt more sustainable practices in the production of their products.

A flowchart diagram of the Bodego purchase cycle.

Problem Space 🔭

Primary Research

Secondary Research

We utilized a breadth of academic papers and journals and conducted a systematic literature review using the program Zotero. This information served a baseline to-better understand the production to consumer process in the e-commerce world. As well as the impacts and significancy of individual change on actually influencing more ethical production processes.

Insights

Super Apps ⭐️

  • User interface design which aims to include as many features as possible within an app, coined "super app." A popular design trend in the East over the more minimalist designs of the West.

System Architecture 🎛

  • Individuals buying products from companies with more ethical environmental practices, will encourage corporations to produce products ethically.

Profits to Change Cycle ⚖️

  • Corporations and industry titans are most influenced by consumer spending.
  • Promote change by redirecting consumer spending to support more ethical practices.

Our Design Requirements

Change on a consumer level

  • User interface design which aims to include as many features as possible within an app, coined "super app." A popular design trend in the East over the more minimalist designs of the West.

Corporate-Scale Change

  • Individuals buying products from companies with more ethical environmental practices, will encourage corporations to produce products ethically.

Promoting healthier and more ethical lifestyles

  • Corporations and industry titans are most influenced by consumer spending.
  • Promote change by redirecting consumer spending to support more ethical practices.
An image of a kitchen, containing a fridge with eyes and a smile, and a sun peeking in through the window.

Branding & Visual Design ✨

Hi there, I’m Bo!

I’m the official face of the grocery application Bodego. Here to help you take the necessary steps to a greener, cleaner, and fresher world.

An image of a globe, laying on its side, giving a 'peace' sign.

Because the visual & brand identity was solely my responsibility, I worked to carefully curate a recognizable brand identity that was different from other similar applications on the market.

Bo is meant to serve as the “face” of the platform, as an upbeat character designed with hints of retro and vintage stylistic choices. Additionally, with the UI design of the system in mind, I decided to incorporate softer complementary colours with the intention of pairing well with the actual UI and branding of Bodego.

Bright and Colourful

  • Bright and colourful colour palette to lean into the bright personality of Bo.

Rounded & Soft

  • Thin black stroke lines are less distracting to eyes.
  • Vertexes have rounded corners to bring softness to the graphics.

Simple & Welcoming

  • The graphics were created with simplicity & uplifting colours and imagery.

Colour Pallette

The colour palette uses many earthy tones for Bo, as expected for a mascot which looks like our planet earth. Moreover the colours used to complement Bo are lighter pastel colours without much saturation so the attention of the user will be on Bo whenever he makes an appearance.

8 coloured boxes with hex codes in them.

Logo

A design breakdown of the Bodego logo.

Graphics Display

A Splash of Graphics ✨

Throughout our system, colourful, eye-catching graphics were strategically placed to enhance the users interactions and experience with the Bodego Application.

A great example of the impact of graphics in our system in creating a welcoming environment is during the on-boarding process.

Each step in the on-boarding process is accompanied by a graphic to better explain each of the perks of the Bodego Application.

A gif walkthrough of the onboarding process for the app.

Prototyping 📐

Figjam Brainstorm

Deriving Product Features & Requirements

A site map for the bodego website.A low fidelity view of the mobile version of the application/website.

Wireframing

Wireframing is a crucial step that all designers must take in order to map out the user's interactions with the conceptualized system. Through these sketches, we were able to determine the skeleton of our interface to begin low fidelity prototyping in Figma.

A low fidelity view of the mobile version of the application/website.

Bodego: Key Features & Highlights

A gif demonstraiting the collaborative list workflow.

01

Collaborative Grocery Lists

  • Convenient shopping lists that can be shared between family, friends, roommates, and partners.
  • Shoppers can pin coupons within the list itself to easily pull up coupon codes at the cash.
  • Label function to help emphasize dietary wants & needs.

02

Grocery Scanner

  • Grocery Scanner aims to educate the user on the production operations used to create the product.
  • It also provides other options from different brands to make comparing products easier. So consumers can make more informed choices regarding the products they choose to consume.
  • The feature also provides a score of sustainability according to the MadeGood scale which measures the sustainability of the product during it's production.
A gif demonstraiting the product scanner workflow.
A gif demonstraiting the Fridge Lifespan workflow.

03

Fridge Lifespan

  • Aiming to aid in food overconsumption, the fridge lifespan feature aims to help consumers be more mindful of the groceries they already have in the fridge.
  • We also recognized a gap in knowledge when it came to food expiry. Wherein products labelled "best before" is often misinterpreted as already "expired."
  • There is a built-in calendar to help users view when they bought, and need to use or finish products.

04

Coupons & Deals

  • This is a shopping helper application after all, and like Flipp, our platform aims to reduce paper waste by providing users weekly flyers and coupons.
  • These coupons can also be linked within your grocery lists for easy access during shopping trips.
A gif demonstraiting the coupons and deals homepage workflow.
A gif demonstraiting the exploration and discovery page workflow.

05

Explore & Discover

  • Explore page helps users generate more ideas for recipes and crafts for the products and food they buy.
  • This feature also boasts the potential for an AI chatbot which could help create real value within this feature.
  • This feature also aims to help educate users on potential up-cycling that can be done once they finish using each product.