Overview

This was my very first UX Bootcamp project where I selected the course category of "taking care of one's health". As a student I was solely responsible for coordinating and executing all phases of this project from ideation all the way to prototyping and usability testing. It was an excellent exercise in human centered design as well as developing my foundational skillset for UI / UX.

Americans struggle to balance budget and nutrition when it comes to personal meal planning.

Duration

3 months

My Solution

My solution was to create a mobile first responsive website that utilizes API integrations and AI assistance to generate budget-tailored shopping lists and simple recipes.

Problem

CHOMP

CHANGE

A mobile first responsive website that enables users to generate budget first grocery lists and then pulls simple recipes from those lists for easy meal prep, saving users time and money.

Tools

Role

Sole Designer
Feature Concept

UX Research

Branding

Prototyping

User Testing

Figma

Adobe Illustrator

Adobe Photoshop

Before I could start designing I needed to understand:


  • How does meal planning fit into daily life for users?

  • Determine why users may not be cooking for themselves

  • How can I prioritize user needs around meal planning?

  • Are there additional barriers preventing users from making healthier decisions?

TABLE OF CONTENTS

  • Research

  • Data Synthesis

  • Usability Testing

  • Visual Design

  • Key Takeaways

  • Strengths:

    • Mission-driven (Non profit)

    • Resource rich

    • Localized content

    Weaknesses:

    • Limited Scalability

    • Less focus on advanced technology

    • Mostly topic articles / No interactive features

    Competitor #1

  • Strengths:

    • Authority and Trustworthiness

    • Clear, practical guidelines

    • Accessibility Standards

    Weaknesses:

    • Limited Engagement

    • Outdated content due to bureaucratic process

    • Content is too broad and generic/foundational

    Myplate.gov

    Competitor #2

  • Strengths:

    • Community driven content

    • Real-Time Interaction

    • Engagement and Motivation

    Weaknesses:

    • Variable content quality

    • Lack of structure and organization

    • Limited control over user experience

    /r/eatcheapandhealthy

    Competitor #3

RESEARCH

Content Auditing & Competitive Analysis

I surveyed existing resources and information and to verify whether or not I am creating a solution for a problem that actually exists (it does). I then took the biggest players of the relevant content and shifted my perspective to view them as competitors for user engagement. I realized these key takeaways

View Full Analysis

KEY TAKEAWAYS:


  • Existing resources do well by community discussion, content abundance, and accessibility.


  • There is room for improvement by tailoring lists to more specific budgets and dietary restrictions. Chomp Change would be first of its kind to generate such lists with API and AI integration.

Click to enlarge

RESEARCH

User Interviews


I then conducted user interviews with 7 participants of varying ages and employment status to understand their values, motivations, and frustrations around personal nutrition. I conducted the interviews remotely with Google Meetings over the course of 4 days.

“Grocery costs these days are ridiculous”

“I just don’t have the time for preparing elaborate meals”

What's the point? Eating out is quicker and costs about the same these days."

KEY TAKEAWAYS


  • All participants desired to make more nutritious meal choices


  • Two main inhibitors prevented them from doing so:

COST

TIME

Click to enlarge

DATA SYNTHESIS

I reworked my research with the following methods to ensure that my takeaways stood up to scrutiny. I also participated in some brain storming exercises per the course curriculum to exercise my creating thinking skills being as this was an introductory project for new designers. You can click on the thumbnails to view the full images.

Creative Exercise
New skill realized: I have a knack for contrary ideas

Project Goals
I assessed and organized goals of the user business and technical considerations to prioritize features for Chomp Change

Affinity Mapping
I further identified and organized themes and user pain points to inform design

Personas
I created personas based on interview data for reference so I could design keeping their needs in mind

Story Boarding
I Illustrated scenarios to better understand users' frustrations and pain points

Analogous Inspiration
I mapped out what methods competitors are using to differentiate where I can improve

  • PAPER BEFORE PIXELS

    I start all my designs in sketch for to start developing a structure before moving into mid fidelity and the first round of user testing. I learned a lot through rapidly iterating from low fidelity to high fidelity designs. Swipe through this carousel to see how screens changed and how these changes contributed to my growth as a new designer.

    There was a disconnect between my personas and my initial concepts; my participants were pressed for time and I had created extra steps in the task flow. I learned quickly the value of listening to direct user feedback to guide my decision making.


    (Click on images to enlarge them)

  • PAPER BEFORE PIXELS

    Users mistook the budget display to be an element they could click or type into because I put it in a box! I learned to be more aware of existing design patterns and that using them in different ways may confuse users.


    (Click on images to enlarge them)

  • PAPER BEFORE PIXELS

    I initially designed everything to have fixed layouts. I spent a lot of time trying to "fit" everything on one screen. This was due to my then inexperience with interactive design. I learned to take technical considerations and developers into account - hence the addition of an overlayed navigation bar.


    (Click on images to enlarge them)

IDEATION to PRIORITIZATION

I created a feature set based around my user research and their needs, prioritizing features that were most relevant to their pain points: Generate a budget tailored shopping list, and easily generate recipes based on that list. I created site maps to structure what my users' flows would look like, and what steps they needed to take to use my key features.

User Flow for generating a New List

User Flow for generating a Recipe

Task Flows for more features

I didn't get to build all of these out as I had to choose two hero features per the course curriculum

RESPONSIVE DESIGN

One aspect of this project was to introduce us to and develop our understanding and skillset around responsive design. The course required us to investigate what other devices our participants used and create the correlating responsive mid-fidelity screen for one task. I was a bit surprised to learn how uncommon desktop browsing is becoming for people who do not need desktop computers for their jobs as my participants used tablets for their secondary devices. Moving forward in the course I was instructed to conduct my user testing on the screen they used the most (mobile) so these tablet screens were not included in user testing though I did find it to be a good foundational exercise in adjusting layouts for varying screen sizes.

  • LOW FIDELITY

  • HIGH FIDELITY

  • USABILTY TESTING

    Screens continued to better adapt to user needs after conducting additional testing with the high fidelity version of my screens. 7 participants used my prototype to accomplish the following:


    • Generate a shopping list

    • Swap a shopping list item for something else

    • Generate recipes


    I used prompts, duration timing, and task completion as my success metrics.


    Swipe to see more iterations!

    Most participants did not have allergies or dietary restrictions. This was adding a lot of time to users' duration of testing. My verbiage was also not obvious enough to users.

    Testing screen

    So I adapted the flow to prompt users for dietary restrictions first to skip the step entirely for those whom it did not apply

    Iterated

  • USABILTY TESTING

    Some participants did not understand the functions of this button. I explored some different layouts but I wanted this screen to say as simple as possible to mimic the feel of a paper list.

    Testing screen

    Iterated

    So I hired a little help to show users around.

  • USABILTY TESTING

    Users did not understand the function of this. My idea was to make an obvious way to indicate that the recipe was pulling ingredients from their last shopping trip and updating the "inventory" in real time.

    Testing screen

    Iterated

    So I tweaked the content strategy to be more specific.

CH MP CHANGE VISUAL DESIGN

My idea for Chomp Change was to use color palettes that are associated with freshness and health. I initially started with a mint color palette but found it to be washed out when applied to my screens.


Course material required us to create a style tile before high fidelity mockups which I struggled with because I felt I was choosing colors out of context. Once I started applying the colors to the interface I made a lot of adjustments and shifted my direction to colors associated with produce to help drive the idea that Chomp Change is health oriented.


I also wanted the site to feel light hearted to encourage and delight users who felt intimidated by cooking and meal preparing, hence the illustrative style.

Mood Board
Striving for fresh, light hearted, fun.

Logo Exploration
The "O" in Chomp Change was an easy target for play. I experimented with different veggies but ultimately chose the tomato because I felt the product name is very strong and didn't want to over do it.

First Style Tile
I really like my color choices until I started adding them to the interface. It felt too washed out!

Illustrations to Delight
I really enjoyed adding an illustrative flair to Chomp Change to further drive the branding.

A mobile first responsive website that aids people in making healthy and budget friendly meal planning. Start the video to view this prototype in action!

KEY TAKEAWAYS FOR MYSELF AS A DESIGNER


  • Learning new software was initially challenging but I loved exploring informational resources and really immersing myself in user interface design.

  • New skills acquired! Miro, Figma/Figjam, Prototyping.

  • I am very proud of the overall brand identity. I was surprised by how well my illustration skills complement UI design and delighted to realize how complementary and supporting those skills are.

  • I genuinely enjoyed this process, pleased with how my experience in customer service translates to the user research world. I finished this project feeling very inspired about this career change into design.

FINAL PROTOTYPE

Contact

Bio

Case Studies