Sugarbeet Supper Club Customer Portal
2021
A mobile app that simultaneously offers a fun way for customers to communicate their dietary needs, gain ownership over their menu curation & streamlines the customer intake process for the private chef platform - Sugarbeet Supper Club.
Overview
Photo via my client, Sugarbeet Supper Club - in Salt Lake City, Utah
The Challenge
Discovering customer dietary needs has become a bit of a lengthy process for Nicole, the owner of Sugarbeet Supper Club. Forms are not her style & Nicole wants an engaging way for her customers to communicate their important &, oftentimes, unique dietary needs.
My Role
UX research • UX design • Identity design
Tools
Figma • Pencil & paper • Optimal workshop
The Solution
SBSC Customer Companion is a mobile app comprised of a quiz & a customer profile that functions as a recipe keeper & a hub for communication, feedback for your private chef.
GET TO KNOW MY CLIENT
Sugarbeet Supper Club is the work of private chef, Nicole Marriner. It’s a small-scale, local operation based in Salt Lake City. Sugarbeet Supper Club exists to keep the doors of the culinary world open to those who may have felt left out due to important dietary restrictions. Between private chef-ing at SBSC, food photography & styling & her full-time job event planning & teaching at a local culinary school, Nicole is all food, all day!
Design Process
First up, Research & Discovery…
During a 2 week design sprint, I worked with the client to produce a low fidelity prototype of the product to take into testing & see how our ideas performed with users.
Initial Client Interview
Before jumping into anything I had a few things I wanted to understand, So I sat down with Nicole at Sugarbeet Supper Club to set some parameters, talk about our audience & get an idea for the vision of this product.
Business Requirements
Streamline the customer intake process so that curating a menu can move more quickly
Make sure users can communicate their specific dietary needs & tastes
Create a place for users to save recipes
Assure users can contact her whenever they needed
Scaling the Business
Another element that we were conscious of was Scaling this product. Initially, Nicole came to me from the angle of building this out for existing clients that she has in the salt lake area. Right now, Sugarbeet Supper Club is an operation of 1. Nicole is meal planning (i.e. cooking for, grocery shopping for, potentially delivering to) personally for every single customer. Nicole on her own only has so much woman power!
So when thinking about making this product for a potential audience of only about 3 users? We introduced a menu and grocery list curation element to increase the feasibility of the business & increase the audience & user base. Nicole loved it!
Target audience profile
After touching base with my client, I started with my initial research with Numerator.com’s “Meal Kit Market: The Whos and Whys Behind Meal Kit Buys” an analysis of category leaders like Blue Apron/Hello Fresh & retailer integrations like Wal*Mart & Gobble, to have a broader range of statistics about who our target might be. The time crunch had me sweating! so I pulled research from the wonderful world wide web to compare against our initial assumptions. Numerator had a very thorough breakdown of the meal kit market which really came in clutch during this lightning speed sprint.
Preferred Channels
• Shops at: Kroger, Target, Whole Foods, Trader Joe’s
• Browses Social media like: Instagram, pinterest, youtube
Age range varies highly
• Millennial - 25-40
• Gen X - 41-56
• Incomes of $80k +
• Full time employed
• Self Employed
Key Psychographics
• Values: Convenience, time, quality, health, variety
• Habits: Dines out frequently, reads ingredient labels, plan their meals
• Wants to: Save time cooking & shopping throughout the week add variety to their diet, want learn about new recipes & cuisines
Challenges
Meal planning services lack granular customization for people with specific dietary needs
Sales safari
I combed through reviews of industry leaders via Google, Trust Pilot & Consumer Affairs. I wanted to understand meal kit successes & failures from the user’s point of view.
User’s Love:
• Trying new cuisines
• The convenience of having meals, recipes, & ingredients pre-picked & delivered
• Learning new cooking techniques
Not so much:
• Unpredictable ingredient quality
• Limits on customization
• Poor customer service
• Potential for unlabeled allergens
User Interviews
That was the beginning of a tiny toe-dip into navigating the culinary world with a food sensitivity. To dive a little further into the Supper Club’s more specific business practice, I interviewed 3 people who have unique dietary needs in order to glean a little more on what it’s like in their everyday life & their potential experience with meal kits & their specific needs. I love hearing about people's experiences & I wanted to put myself in their shoes and learn a little bit about their habits, all in order to attempt to solve the problem as effectively as possible. I did a bit of networking & through word of mouth I met Lily, Brian, and Madeleine were so kind to sit down with me & talk for a bit.
What are some of the worst experiences you’ve had with food?
“...Recently, I ate something with gluten accidentally & had a flare up. It makes me feel like the world is not here to accommodate me & I just need to be very careful with what I ”
Have you ever used a meal subscription service before?
“I have tried Hello Fresh a couple of times but it didn’t align with my dietary needs. They just didn’t have many options that wouldn’t trigger my inflammatory response & they were not able to entirely accommodate my needs.”
What has it been like for you, navigating the world with this specific set of dietary needs?
“Labels at the grocery store aren’t always clear, and going out to eat with friends is difficult because restaurants don’t always have something that is okay for me to eat.”
There was lots of talk of feeling left out, tedious grocery shopping trips with the element of surprise that really sucks the joy and excitement out of things, Brian eating food he doesn’t enjoy because it's quick. Madeline having trouble with the lunch point in her day. Lily just wanting a little more help branching out & trying new things that are okay for them to eat
Picking the brains of my interviewees, identifying delights & pain points in market research, & speaking with my client about her mission placed a spotlight on my main challenge.
That challenge was to create a product that allows users to communicate & amend their unique dietary needs to Sugarbeet Supper Club & feel the relief of finding a culinary space just for them.
Picking a target
At this point, I referred back to my business requirements to hone in on some target areas for my app, I landed on 3:
• Make sure the user can supply comprehensive diet information.
• Streamline the initial back & forth between Nicole & her customers.
• Create a place to retain past & favorite recipes.
Persona
Parsing through my interviews, market demographics & user psychographics I was able to create an ideal primary user persona to take into empathy mapping & journey mapping
This is Jane Appleseed
Goals
• Wants new variety of recipes to try at home that are interesting
• Wants help finding versions and substitutions of common foods that they can’t typically eat
• Would like to have help with grocery lists of these new things that they discover.
Drives:
• Finally feels like they are a stable adult!
• Loves having nights in with their partner.
• Loves to try new things, & is typically a more adventurous person.
Frustrations
• Has trouble finding yummy alternatives to certain recipes that she sees & wants to try.
• Is bored with their diet.
• Grocery trips can take a long time.
• Sometimes feels left out of the food community.
Delights
• Loves cooking for themselves & their partner.
• Loves learning new things about food.
• Feels really good when they’re eating well & find something they enjoy.
Content Strategy
Nicole wanted users to be able to do 2 main things: Capture customer information about their dietary needs & offer a hub for recipe management & feedback. I bounced back & forth a little bit between mapping Jane’s experiences & forming user stories which set the foundation for me to begin sketching flows
Right about here, is where I began to feel like I bit off more than I could chew! Between thinking about the customer profile page & recipe keeper, the quiz portion of the app (which I needed to write for because my clients doesn’t have a formal set of diet questions she uses) I began to think I could have maybe split these functions into two separate projects even!
In drafting my flows I had to consider the different options the user would have to choose from when seeking private chef services from Sugarbeet Supper Club.
If you are local, Nicole will plan your meals, grocery shop, cook for you, & even deliver if you need. If you remember from before, users can opt into a less involved but just as convenient menu & grocery list curation service.
How can we integrate these choices that the user will have into the product as seamlessly as possible?
User Flows
At this point, UX Copy for the quiz was still yet to be developed, so I had decided to chunk out the questions into four main categories based on the information that Nicole told me she needs from clients.
After working my way through a few different flows for each service - I landed on an option that integrated the private chef services that Nicole offers into the customer quiz as a part of the “Basics” portion of the quiz.
Weekly Meal Planning Flow
Menu & Grocery List Curation Flow
Ideation; Brainstorming & sketching Ideas
How do I want to initially present recipes to users? How can we make recipe delivery fun & exciting! How do we let them know their quiz progress? This is a sample of things floating in my head at the sketching portion of my process
Quiz feedback screens
Recipe card screens
I was even considering a “Menu Tinder” rejection/acceptance system which is how I learned about UI Patterns & legal trademarks…. It wasn’t in scope anyway!
Wireframes
My sketches directly informed my initial wireframes that I eventually populated with photos & took into critiques with my peers & with my client before building out a low fi prototype that I took into testing.
Before
After
In the 2nd iteration of my wireframes I implemented:
• Stronger informational hierarchy with a focus recipe ingredients
• Page labels added to the top of every page for user orientation
• Recipe instructions changed to a card format to limit scrolling
I drafted up some email wireframes for service confirmation & menu arrival & also decided that contacting Nicole was the most important form of feedback that aligned the closest with the scope of our MVP. This was only a 2-week sprint after all.
Designing for Accessibility
Section progress animation
• Visibility of System Status:
We’re sure to provide feedback at multiple points so users can orient themselves inside of the app, in the quiz & can know when a task is complete
• Predictable:
the interface keeps with mental models
• Distinguishable:
Line & paragraph spacing + positive leading (14pt text and 25pt line spacing)
• Touchpoints:
are of navigable & accessible pixel sizes
Usability Testing
After my internal review & a couple of informal user interviews of the product, I spent a day tweaking my prototype. I put together a usability session guide with a script & tasks that aligned with my business requirements & I was ready to test my prototype. I recruited 3 testing participants & over the course of a day was able to test out my designs.
Usability Test Participants
Jason, 32, Environmental Scientist • Lily, 26, Actor • Anne, 22, Photographer
The Data
I timed each task & error rates were logged. I also made sure to check in with my testers on their opinions and attitudes about the prototype at different points along the way.
“I like that it’s talking to me how a person would talk."
"I’m having so much fun clicking through this test!"
“I love how it’s very photo heavy, this is making me very hungry.”
Navigation times and task completion rates were great! However, when answering questions about their dietary needs....
I beefed up the results from moderated usability testing with first click tests using the same 8 tasks & Optimal Workshop to generate heat maps & some patterns began to form.
Usability testing task #6, “where would you find last week’s grocery list?”
This was a SHOCK! Despite doing just fine in moderated user testing, this design underperformed on this task in the Optimal Workshop first-click test coming in with a
Something needs to change with my icon design, my icon placement or both. If I had a redo on the first-click test of this design, I would also closely watch my phrasing of to avoid it potentially having effect on how this design performed.
Aligning with user stories
This is our answer to the user story:
“As a user, I want to know what's in the food so I can feel confident that it's safe for me.”
In our initial iteration of the menu card, the photo took up a generous amount of space. when what’s most important at this point in the flow is the ingredients since the photo has already done its job & invited the user to view more information
On another task one user, in particular, surprised us. When asked to navigate back 1 question, he clicked the progress tracker indicators between the arrows, which got us thinking about the purpose of these dots. Should they go away? Can we make them interactive & utilize them as breadcrumb navigation within the quiz?
Hi Fidelity Prototype
CONCLUSION
Looking ahead
Whew, they don’t call it a sprint for nothing!
Next Steps
Armed with the insights from my user testing data, my client’s feedback I produced some key recommendations:
• Rework & potentially disperse the bottom navigation bar.
• Run another 2-week sprint to design an instructional interface for recipes (research, design, and testing)
• Re-evaluate the chat/contact function of the app.
• Develop UX Copy & curate a well-rounded list of questions.
• Apply visual design & generate high fidelity mockups.
I learned so much!
This design sprint, for me, was an exercise in pushing myself to really feel comfortable thinking non-linearly. I was able to hone my skill of really extracting crucial information from everywhere that I could. The hustle of using every single possible resource I have access to in order to get this made was invigorating, to say the least!
Mostly, for next time I would...
• Pipe up. Share earlier & more often with my fellow designers, mentors, & my client. I would ask more pointed questions to make the most of the feedback
• More interviews & Surveys - Overall I would have loved to have an even bigger pool of quantitative data to reference throughout this process, & be -even- more aware of how the way I present my designs can potentially impact how they perform.
Navigating a sprint on my own as a student designer was a splash of cold water to the face. The sprint was able to really condense my process down into only what was really, explicitly necessary & also revealed the areas in which I need to improve as a designer.
There were so many times in these two weeks I had to literally stop and say out loud “Trust the process” when something felt impossible or frustrating. Seeing users get excited about this product was reaffirming & seeing Nicole’s reaction to the possibilities for Sugarbeet Supper Club was moving. I’m so excited to continue my work with Sugarbeet Supper club