Rene Paccha
OPen
Client:
Reclair

Reclair

Client

Reclair

Year

2020

Scope of Work

UX Usability | Website Design

Location

Chicago

This case study looks at how Lucas recreates an eclair. He wants to find a way to reproduce this dessert rarity. His way is to do it without any gluten, which he cannot have because of his allergies.

No items found.

Introduction

An intern brought Lucas an éclair from a popup bakery that sprouted near downtown Austin.

In an enlightened search for the name of the shop, he finds it’s a dead end to try and find the source of this briefly-lived dessert.

Persona

Lucas is a 32-year-old marketing associate from Austin. He needs to continue experimenting with cooking dessert pastries a 4-day weekend.

A new iOS app, Reclair, looked promising. However, even without the benefit of a thorough analysis, problems seem to bubble to the top.

Background

Réclair was originally created for iOS mobile under a category of apps that share the Apple Design Guidelines. In general, this should help new users like Lucas find their way around a new app.

The prior hypothesis seemed to be: Having plenty images would build confidence for users of the app.

This wasn't the case.

Discovery

Unpacking the research, it was obvious that the app's creators were committed to health and safety.

What were these two stakeholders trying to realize that wasn't ingrained into the initial design?

These same stakeholders, two doctors, emphasized the importance of bring more people on board the initial stages of the app. This interview was done so that with any assumptions, as long those assumptions are recorded, the design process can begin.

Why UX?

Taking this approach provides a factual baseline. Additionally, goal alignment that looped in the stakeholders was required to be able to jumpstart a new direction for this project.

The persona makes the best start point. It grabs all the assumptions and repurposes it as a litmus test for whatever backstory defines the target users of the app.

For example, although Lucas already knows how to cook gluten-free, he made some time this weekend to explore deeper into sugary, delicious recipes. In this scenario, he also just bought a new phone, leading him to be primed for trying something new to test his learning.

The Start

Based on some previous knowledge of recipe websites, he ends up downloading Réclair from the iOS Store.

During a quick search, he found it was worth it, getting a day of baking to fit into his schedule in order to try something new.  His friends planned to fly in on this same weekend.

Case Details

The morning commute consists of a 15-minute trolly ride. He is mentally taking a deeper look at Réclair, physically using repetitive finger taps to continue checking off disclaimer boxes.

The Réclair app provides repetitive safety check. But, for what and for who?

The app‘s functions buried under legalese-style warnings, he gets to the part where he can convert a common recipe into a gluten-free recipe.

He has a pretty good pantry to begin with. It is stocked with some of the most popular gluten-free substitutes.

“Congratulations on making the first step towards your food-making journey! Please take a moment to become fully aware of the potential hazards involved.

Haphazardly using an app to tell you what ingredients to consume may result in extreme sickness.  Please use common sense.

We would be happy to provide food substitutions, but other people on this platform can't be trusted — they would have you cook recipes with substitutions not directly reviewed by us. So, please be exceedingly careful when combining any medical condition with a potentially bad meal. After all, we wouldn’t want to keep you from trying new, delicious food.”

It can be considered common, as of the time of this writing, to have the browser capture your response for a disclaimer and save it for the duration of the time you are working.  Inn-this case it is cooking. Found in other services unrelated to cooking, Lucas might expect to have to deal with a little unexpected repetitiveness.

On those other apps, it may take well over a few minutes to get through a little bit of redundancy. This has been a necessary evil before and had been accepted en masse.

On Réclair, however, all Lucas is trying to do is cook a French pastry using non-gluten ingredients. He is basically trying to cook a gluten-free éclair.

Testing

On Réclair, Lucas was proceeding along his cooking ritual.

Similar app services may offer to have a delivery driver, for example, determine ingredient substitutions, organic choices, and other customizations.

Identifying components inherently common amongst competitor services helped prove what was working and wasn't working when it was time to test.

Recipe generation when there was not one in place was a common theme in the testing of several users of the prototype.

Analysis

On the day his friends came in, Lucas had to use both handset get work done in the kitchen. He had to work through both dry and wet ingredients to eventually get the right crust. Done right, it would encase the filling of the new dessert. Even though there is very little gluten at all in his pantry to begin with, other ingredients still need to be converted to non-gluten. As he finishes signing up for the app, maybe he'll have some luck and see the dessert he wants information on straight away.

“This app is really not saving me any time. None of these recipe images feel right either. I'm not too sure if I’m getting what I want unless…

I have my hands full now.

… Am I able to just convert a recipe I already have in hand and ready to go? At this point, I've already started cooking.  It looks like I'll have to convert the dessert ingredients myself, though.

Time is limited. Maybe it’s me? I'm not quite getting the hang of this app yet..”

Overall, no risk is taken.  It could have been helpful by leaning into the atmospheric importance of good, clean or well-lit images.

Problem

After downloading, the app promises to either convert the recipe or have it already uploaded thanks to other users of the platform. At this point, having a complete recipe to look off of means relying on manually-entered dishes.  These have to entered into the system by other users who use the app and additionally choose to contribute their work.

Other considerations

Lucas is cooking a real-life dish. The app warns against consuming computer-made meals. Réclair tells them what ingredients to use to stay gluten-free. Lucas again checks a box saying: Yes, he is aware of the risks. Every other click is pretty much guaranteed to just by a byproduct of insecure coverage over the litigious populace.  The assumption here was an overused signal to the developers that they dare not miss including the disclaimer.

Design

The app had been originally designed this way, that is, to re-introduce past disclaimer notices. At the human end, Lucas is not aided in learning quickly by checking off more boxes than other apps would have you do.

To a significant extent, he is relying heavily on what a typical iPhone application looks like and feels like. In this series of events, and trying to get a recipe started, the conversion or math results are full of unexpectedly low-par images with confusing options.

“I get it. I'm here to explore, but nothing looks good enough to try. I'm on here for 5 minutes and haven't seen a single appetizing recipe. “

How long before we start thinking about a situation where Lucas is motivated to upload his own?

“I don't even know how to upload my own.”


The feeling of concern starts to grow within Lucas that this is “hold harmless” situation taking way too long.

In an effort to ground himself, Lucas remembers: The goal for the day is to cook desserts that everyone will enjoy.

“They are sweets. Why can't they be perfect? More sugar--“

Current State

Be willing to get used to tapping or clicking; Learn your own work-around just like everybody else and acknowledge that it all can't be perfect…this seems to be the overarching message.

It can be said that the app is making broad assumptions about how much time Lucas has in the first place to dedicate to learning both a new recipe and a new app.

He uses twice the time he imagine it would to complete the new recipe. Lucas also has to watch for ingredient amounts and cooking durations, and combine them into multiple processes. Thankfully, the entire recipe stays on his phone. Indications or instructions can be followed together. He has a lot of tasks going on, but they all take place in the kitchen, at this point. It might be a little mentally-taxing, but not a complete energy drain.

Prototyping

Lucas has a lot to do this weekend. His dish took way too long to make. While his plans are not delayed, his thoughts about returning to the app are ruined.

Learning something new takes energy. Lucas is already in our thought-camp because he likes learning how to cook. Any onboarding, in the initial iteration of the app, is missing any sort of remotely appealing images of finished dishes. It can be a huge discouragement.

Learning efficiency

There are two concurrent learning paths happening. Learning to cook the recipe and learning to maneuver the new app.

Seeing unappetizing food motivates no one. Where a list of ingredients on their own can be enough due to the element of recipe surprise, tipping off the end result in an unfavorable light can just lead to putting the app down mid-way through the process.

Without a redesign, Eclair will entirely sit in the "maybe box" of Lucas' mind.

Repeated warnings of risks and disclaimers that no longer inform, but seem to cover bases for the stakeholders can be easily checked off. One can continue using the app, and just expect to go through that process each and every time they use it. The given text is already correct.

"I understands why it’s there.  It’s familiar, like from work things.  Just click through it, right?“

Except he‘s not at work right now. Lucas is trying to impress his friends, and this might add a little pressure to the processes of learning both how to cook the pastry and learning how to cook with the app.

It's what he signed up for though, right? He has to come up with some of his own motivation, but thankfully once he's done, he's done.

From the app, the aesthetic gap placed before Lucas might not be one he wants to take on.  Will he improve upon the situation? Can he do better? Probably.  But, the bar has been lowered.  The effort is on him to see that his eclair look the best.

How is Lucas expected to hype this particular app up to his friends, family, or co-workers?

His dish might be delicious, but where is the part where he is driven to share the results of his efforts (via the app)?Unfortunately, precisely what the app needs in order to function fully is potentially being stifled. The stakeholders need the pictures to look very good, because the app needs to work. There is nothing to brag about with friends online or otherwise if every step of the way was more work created for them.

The app denies him of this social traction.

When every photo is eerily similar, done under the same lighting conditions, a professional is required. When Lucas decides to cook a different dessert, he might just use TikTok next.

Hypothesis

This time the photo taken outside, and the pictures are clearly taken under natural light. He takes different sets of pictures.  

Instead of typing in all the substitutions himself, he takes a similar recipe from a different cooking site.  He is able to generate the substitutions and tweak amounts to his liking.  

Uploading the pictures can be an illustration of the end result, or part of the step-by-step instructions.

An additional content review capability or team is able to sign off on the pictures being uploaded as being high-quality.

Other users have a chance to rate Lucas’ contribution and subscribe, thus adding to the encouragement.  The positive feedback loop is set.

Under the element of time, confidence in the app deteriorates as Lucas tries to cook.  As he starts to use all his time, he might miss the opportunity to have a community in the app support him.

Interviews

On a few calls of about 30min each, the founders aimed to build a different kind of support structure.  A community of users that welcomed and encouraged others to upload their own pictures could have been an alternative.  

Something as simple as the doctors starting within their own circles to simply ask:  Look through dessert's library and perhaps tell me what you think.

Recommendations

A human can focus on the images, and therefore get excited to share with friends or family.

For the images,  It should be varied enough in the ouput of each of the entries' pictures so that they don't become quickly outdated. To a potential user in an exploratory mood after a few scrolls, not seeing variation might be damaging.

In the re-design, adding scrollable images and calculation previews to enhances the user experience. Additionally, including a one-time disclaimer box to ensure transparency and compliance is also recommended.

For onboarding, the cue to take an approach to onboarding was heeded using the wireframes through to the prototypes. But, the initial iteration has far too many uninstalls.  Was this entirely an onboarding issue?

This paints a picture of a ramp up to a place where the at-home cook is somehow afforded time, is respected for their patience, and encouraged to share more recipes and engage the community within the app.

The problem not taking the risk of focusing on images.

It can be simple enough to say, “There are other more popular apps I can use.” And that's likely true of the competition.

However, the app falls into a trap of focusing too much on the fact that it makes calculations for you.  Or, by another perspective, it focuses way too much on the disclaimers needed to protect parties involved in the rollout of recipe app, a design decision alluding to a far future where this has become a big enough problem that it warrants building for it.

Finally, learning is always a bit frustrating. Lucas could have given up on the recipe journey if he had a few fewer moments to spare, or if the people coming were less so friends and maybe were people he really needed to impress.  If the stakes are a little bit higher, it might not be worth adding to his frustrations.

He'll uninstall for now, and use something he's a little more familiar with.

Conclusion

So what happened?

The images did not look good. They all shared similar characteristics and lighting.

Repetition and spacing in how images were presented were the primary focus of the redesign. How it all worked on the screen was presented through to the prototype.

Focusing on mid-fidelity prototypes has the most potential to give useful results, since starting at a deficiency with the images, the layout, and navigation on a mobile iOS device can be addressed with more care.

Contributing Factors

  • Lack of cookies to persist disclaimer decision
  • Buried within the capability is the option for the user to request sourcing content from other websites
  • Bad lighting on pictures

Spotlighting images is what has the potential for the most profound effect.

This is an important tool for those with diet restrictions. Are the users just "not getting it"?

They get it, they just see the other examples and don't feel like sharing it. While the stakeholders want the users to line up, the app is likely to send them to a competitor. Cooking has to get done. It still has to get done within a short amount of time, with only a few places to choose from, including the kitchen.

The re-design was weighted by spending more time in the mid-level wireframes.

Recap

In bringing the app from first design to re-design, navigating the app more easily and pulling from imported recipes brought the whole situation of cooking more predictability to the learning process when accompanied with a boost of quality imagery.

No items found.
Download this pdf and optionally use the following form to describe your project
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.