Chefin
Recipes based on what you have on hand. -iOS App
Have you ever heard someone describe the perfect sandwich?
“You take two pieces of sourdough, lightly toasted with olive oil. To that you spread a thin layer of basil pesto on the bottom piece. On the other, a thin layer of olive tapenade. Between these, you place roasted turkey breast, a thick slice of aged gouda, arugula, and pickled onions.
Then, your life changes.”
This passion for cooking was what prompted me to interview Sara. Her enthusiasm made me eager to try new foods myself. I wanted to give her everything she needed to become a true foodie.
I wanted to see Sara Chefin.
Chefin means to do chef like stuff , like cooking fresh meals from scratch, without actually being a qualified Chef.
Objective
Our objective was to create a recipe discovery app while implementing photographic machine learning (CoreML).
Using CoreML Technology, home cooks would be able to snap a photograph of an ingredient on their phone and the app would be able to identify and label the ingredient. The app would then use the identified ingredient to find related recipes.
The main challenge was to find a balance between the user experience and machine learning technology. We had 3 weeks to design and hand off the assets to the iOS development team.
I created a Team Dropbox, Trello board, Slack channel, and Zeplin board for the group to facilitate communication. We had daily stand ups and weekly meetings with our developers and product managers.
I tried to make sure the developers were included in as much of our UX process as possible. I wanted them to understand these home cooks and their motivations in a deeper way.
I decided to use the 5 Planes of User Experience to guide our process.
Competitive Market Analysis
I began by running usability tests on SuperCook.com to establish a competitive benchmark for the field. I observed and recorded usability on Silverback.
I asked volunteers to:
- Create an account
- Find a Vegan Chinese recipe that incorporated pasta and soy sauce
- Favorite three recipes, then unfavorite one of them from the favorites screen
Volunteers responded with frustration. Feedback indicated that the goals of the website were not clear on the landing page. Similar cuisines were confusing and there was an overwhelming number of options for volunteers to choose from ( over 10,000!). The shear number of choices available created a maze of drop downs and volunteers expressed a preference for just typing in the ingredient.
I determined that for the app we were creating, we would need to make sure there were:
- Easy ways to filter in one area
- Limited, concise options, rather than more options
- Clarity about the app‘s features
- Onboarding coaching tips
Assumptions
As a team, we started by listing our assumptions.
Our first thought was that this app would be for those who rarely cooked. But, would people who seldom cook care about a recipe app? That was something I needed to find out more through interviews and surveys.
We were also concerned with CoreML — as a new technology, would it work correctly for home cooks? If the technology made the app difficult to navigate, it would deter continued use. The developers would need to verify CoreML’s functionality so we could design the interface appropriately.
Surveys and Interviews
We noticed immediately that our survey questions weren’t capturing the demographic data we needed. We set up a new online survey and I conducted additional street interviews.
I found out that most people that cook from recipe apps are women between the age of 20 and 35. They tend to be in college or recent graduates. Some of them have families and some of them do not. Because they all have different dietary needs and preference, they do try to filter recipes by these different categories. They cook full meals on average about 3–4 times a week. And they use apps like Pinterest, Yummily or Google recipes, and share photos of their cooking on Instagram and Pinterest.
Our Persona and Survey Findings
Our survey and interview data defined our audience and informed our persona, Amanda Higgins. A chic, educated and tech savvy young woman. She would be willing and excited to try the CoreML to find new recipes.
Ideation and User Story Mapping
During ideation, I found we all had different ideas of what this app would become. When we were creating the user story map, we were thinking about the filters that Amanda might use to find healthy recipes. As we got going, we realized Amanda wasn’t necessarily a health conscious cook. We had gotten caught up in the features and diverged from our persona. We stopped, realigned ourselves with Amanda’s needs and started ideating again.
Ideating helped us create these main ideas:
We refined the user story map to make sure the CoreML would have what it needed to function properly. Features such as linking to social media, substitute ingredients and reading and writing reviews were cut.
Creating wonder and delight!
In my interview with Sara, I learned that she had her own system for tracking her food experiences. She showed me her DayOne app that she had converted into a recipe log. She meticulously recorded each meal with photos and details. A food log in our app would help home cooks record and validate their experiences.
However, the food log became a point of debate when trying to determine our MVP. Many of the features providing validation to our home cooks had already been cut because of development time constraints. I felt it was important to keep the feature of a food log in the MVP to help validate our home cook’s efforts. But, our team couldn’t come to a consensus.
Discussions revealed that our developers had already created a program similar to a food log. Unlike the other features that had been cut, a food log would be something the developers could program quickly and easily.
As designers we look for opportunities to create features that bring a sense of wonder and delight for the users.
And so, the food log remained.
Creating a site map gave me a deeper understanding of how this app would work. However, I should have gone deeper into this step than I did.
When I got to high fidelity mockups, I had a hard time determining which screens home cooks expected to see when they hit the back arrow. It all depended on where they were in the app. For example, if they were in the recipe results page, would they want to go back to the dashboard, the CoreML process or the filters screen? Spending more time at the beginning, detailing the site map and creating user flows would have saved me a lot of time and effort.
Wireframes
Next came the wireframes. We took two days and worked through them as a group. In 15 minute increments, all three of us drew out wireframes for as many ideas as possible for each screen. One screen at a time, we narrowed the design scope.
We chose layouts with double columns so more recipe choices could be visible at a glance. We selected dropdowns as a way to contain information. We created a menu that would slide in from the left with a swipe gesture. We used large icons to direct user attention to the main actions on the screen.
Low Fidelity Designs
With the wireframes completed, we moved into low fidelity designs and prototyping.
Testing
Initial testing revealed that home cooks were aggravated with the dropdowns, so we took them out in favor of a seamless scroll.
The large icons were also a miss. The home cooks were confused by the three types of favorites, and the icons added to that confusion. They were used to one type of favorite. So we merged the three categories of favorites into one list. This made it easier on our developers as well.
But, the swipe right menu was a hit. Which meant we would be able to opt out of a tab bar.
Home cooks also loved the idea of a food log. They just wished it could be sharable on Instagram. This validated our understanding of how important sharing was to our audience. We scheduled the sharing function for later versions of our app.
More Testing
I move on to standardize the low-fidelity wireframes. It was here I started to see where we needed to pay more attention to our transitions. With more user testing I was able to better map out the user flow.
Home cooks didn’t care for ”level of difficulty” or “cookware required” filters. They were also having difficulty navigating through our search process.
I realized we needed a better understanding of the CoreML technology to complete our designs. I brought in the developers to go over how CoreML works. Different navigation would help make our product more usable. The developers’ explanation also helped us hone in on a better dashboard and onboarding tour.
We were now ready to move into high-fidelities designs. Screen-by-screen we worked through the designs collectively. Even with a style guide, we wanted to make sure our designs were cohesive.
We used food-based backgrounds for simple views and white space for more complex layouts.
Hand Off
When it came to hand offs, we used InVision and Zeplin to help the developers understand the flow of the app and its details. We continued to work closely with our developers, even after hand off, to help address any remaining gaps in the designs. For example, our developers found we had three styles of icons and numerous font sizes. We adjusted and simplified the icon sets and standardized the font sizes.
Conclusion
Currently, we are awaiting release of our Testflight version of Chefin. Once our developers turn the demo over to us, we will begin testing and further iterations of our app.
In creating a recipe discovery app using CoreML, I learned more than just how to create and design for my user’s needs. I learned how to build relationships of trust and understanding with my UX and iOS Development team. I learned how to compromise on features and designs. And I learned how to work with different personalities.
I wish I had had more time to work through different steps of the process such as user flows and the style guide. I could have avoided a lot of frustrations and gaps in the hand off designs. But we had a strict timeline to follow.
I think back to Sara and how her face beamed with pride as she showed me her food log. I look back at the joy of ideating and testing. I remember how good it felt to work as a unified team on our high-fidelity designs. I reflect on how excited home cooks will be to find this new app.
I won’t let the misses negate the wins.
If you like what you read and would like to reach out to me, find me on LinkedIn.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
