Responsive Website for a Recipe App
Challenge: Conduct a UX process + design a responsive website for a recipe app
Timeline: July 2 - Sep 5 (2 months)
The origins of The Truffle Club date back to the spring of 2018. What started as desire to share my favorite recipes and demystify cooking evolved into my first experience researching, testing and selling an original product.
When it came time to choose my second project for CareerFoundry's UI bootcamp, I opted to adapt The Truffle Club since I had already developed an original idea for my first project, Hausplant. Coming into a project with already preconceived ideas seemed like a good challenge. New ideas are exciting to develop, but what about the ones that need an overhaul? Or the ones that are technically sound but could better satisfy user and stakeholder desirability?
The parameters for this project were to:
1. Conduct a comprehensive UX process, and
2. Design a responsive website for a recipe app
In this UX case study I'll 1) walk you through the original inception of The Truffle Club, 2) tell you why I chose to adapt it for this project, 3) explain the evolution of The Truffle Club as a product, and 4) show you where it's at today.
You might want to buckle in for this one; it's a pretty robust article. Look for the highlighted text to scan through it quickly. Let's go!
- The OG Truffle Club: creating a product + selling it
- Testing Details
- Adapting The Truffle Club: overhauling a project vs. formulating a new one
- The UX Process: User Centered Design
- Phase 1: Discover
- Competitive Analysis Conclusions
- User Interview Hypothesis
- User Interview Conclusions
- User Persona Example
- Phase 2: Define
- Key Features, User Flows + Low Fidelity Wireframes
- Phase 3: Prototype + Test
- Phase 4: Design
- Working Mobile First
- Mood Boards
- Style Guide
- The End | Reflections, Final Product + Mockups
- Bringing It All Together
- Fail early + often (and enjoy it)
- Redefine objectives
- Let data drive decisions
- Final Screens
- ⟵ Previous Project
- Next Project ⟶
The OG Truffle Club: creating a product + selling it
In 2018 I began cooking A LOT, and sharing what I was creating on Instagram. I've always enjoyed cooking, but around this time it became an incredibly involved hobby. As I shared what I was creating, I received a lot of feedback asking for recipes and comments like, "I wish I could make things like that". To which I thought, "You totally can! You just need a good breakdown of how to do it."
I started thinking about sharing and selling recipes, or something along those lines. I did some research and decided to model it as a meal planning subscription service. The goal was to send out a weekly menu that included 5 nights of meal plans, a comprehensive grocery list and individual recipe breakdowns. Before moving forward and developing the idea further, I decided to conduct a test round to see if there would be any interest for such a product.
In order to validate the idea and continue developing it I wanted to see:
+ 3 individual sales
+ Positive feedback from customers regarding recipes, formatting, etc.
I decided to test the idea by offering a single 4 week bundle purchase, and released each section weekly through Mailchimp.
+ I offered only one product
+ I kept my test pool to my social media following (400 followers) and my email blog (100 subscribers) [no marketing or advertising budget]
+ I kept the test open and the purchase available for 1 month
+ 12 individual sales (3% conversion from social media following, 6% conversion from email blog)
+ Received positive feedback regarding recipes.
+ Analytics indicated that people were opening emails and visiting the website infrequently, suggesting that people were cherry picking recipes to cook instead of following the meal plan.
The results of the test round certainly surpassed my expectations. I honestly didn't expect to meet my minimum goal of three sales, so reaching four times that goal surprised me. I learned that I had a viable product on my hands. The analytics I tracked on the email opens and website traffic suggested that while people enjoyed the recipes, my attempted format of a meal plan to follow wasn't what people were actually wanting or needing. This was validated by the feedback I received from my customers when I followed up to see how they were using the product.
I considered variations like sending out a monthly email with a list of recipes to use as needed, but ultimately any variation I considered required a large and consistent time investment for recipe development. I didn't have the capacity to create the volume of recipes needed for such a product, so I decided to shelve the The Truffle Club for awhile, and slowly collect recipes as I developed them to release and sell in seasonal bundles later on.
Adapting The Truffle Club: overhauling a project vs. formulating a new one
When it was time to pick my second project with CareerFoundry, I had the choice between designing a location-based recommendations app or a recipe app. I absolutely love coming up with ideas. It's one thing I never really get tired of. But instead of creating another new product idea, I decided to challenge myself by reworking The Truffle Club.
Because of the limited success I experienced with The OG Truffle Club run, I knew that I had a decent working idea on my hands and that it would be a great place to start. I also learned through the UX process that my original ideas were pretty biased. In this instance, the bias worked decently in favor, since my online and email following gravitated towards the same things I enjoy. If I had tested on a truly neutral group, would I have seen the same level of success? Probably not. But I still had a working idea and it was time to make it better!
Since this was a conceptual project and I wouldn't have to go spend my life as a recipe developer, it gave me the opportunity to play around with iterations of The Truffle Club that I wouldn't have originally considered. This allowed me to consider a wider variety of solutions to the pain points I had identified from the original test round, and question if there could be something else I was missing along the way.
The UX Process: User Centered Design
Let's talk about conducting the UX process for The Truffle Club, the first of two requirements for this project. For those interested, I used User Centered Design theory as a basis for this UX process. It's best summarized in these four parts:
Phase 1: Discover
This is the phase of discovery and unravelling possibilities. Using my starting points of a recipe app (course requirements) and a subscription meal planning service (OG Truffle Club) I started exploring what else this product could look like. What things should it include? How far could I take the idea? What things were people actually interested in when it comes to meal planning? In order to identify where to take the product, I need to know what possibilities were in front of me.
Phase 1 consisted of three parts:
Competitive Analysis Conclusions
A competitive analysis can validate ideas by recognizing successful market trends, identifying gaps in the market, and discovering opportunities to improve on current products and services.
+ Don't do a lifestyle meal planning resource to help people eat better and learn cool cooking skills. Cook Smarts truly does it best and I'm definitely not going to do it better.
+ Cooking for larger groups (8+) is not supported. You're usually left to double or triple recipes and figure out the new time requirements yourself.
+ Single menu purchases (especially for a multi-course menu) instead of a subscription service are not frequently offered online.
User Interview Hypothesis
User interviews can provide insight into the lives of users and allows designers to create tailored, effective solutions to their wants and needs.
+ Information on how to host and cook for a dinner gathering would be useful to people.
User Interview Conclusions
+ Large dinner menus are an interest
+ Skirt away from educational hosting components; keep it to menus
User Persona Example
User personas represent users with similar needs, goals and frustrations, and can provide insight into the target audience to help shape the direction of a developing product or service.
With all this information in hand, it was time for:
Phase 2: Define
In phase two, it was time to take all the data collected, start paring it down and refine what product I was actually creating. Based on the user interviews and competitive analysis, I knew that I wasn't going to be creating a meal planning service, nor was I going to offer educational components. It took a few more steps to determine what I was building.
Key Features, User Flows + Low Fidelity Wireframes
From the personas and the user interviews, I wrote a series of user stories and matched them with key features the app needed to have:
"When I'm deciding what to purchase, I want to look at a variety of options so I can feel confident about my choice."
+ offer a visual catalogue of products
+ curate a range of experiences to meet various different needs
"When I'm prepping everything, I want to be reminded of when I should start the next task, so that I don't forget anything."
+ offer push notifications for critical steps
+ create comprehensive timelines for preparation process
"When I'm working on one recipe in the menu, I want to be able to see only that part, so that I'm not distracted by too much information."
+ offer a reader view option
+ clean navigation between screens
+ well organized instructions that don't overwhelm the screen
These stories and features were then translated into user flows:
And these user flows became low fidelity mockups:
side note: I used the crazy 8's method to come with ideas for this project and it was so much fun! It's such a great way to get ideas flowing. It's one of my go-to methods now when I find myself stuck in a design rut.
Phase 3: Prototype + Test
After turning my user stories into key features and user flows, The Truffle Club was beginning to take shape. At this point I took my paper wireframes and designed some mid-fidelity digital wireframes, spun them up into an inVision prototype and began my first round of usability testing.
If you'd like to see the details of the Usability Test I conducted, you can view it here:
Primary Pain Point #1
User Homepage was confusing. Information needed was nested too deep.
Primary Pain Point #2
Homepage and Products location confused people.
Phase 4: Design
After conducting my usability testing, I went back to the drawing board to implement the feedback I had received and design a better site. There were three important elements to this process:
→ Working mobile first
→ Curating a mood board
→ Creating a style guide
Working Mobile First
With 52% of sites being viewed on mobile devices, it was essential to design The Truffle Club's mobile site first and then adapt those design for larger breakpoints. When working mobile first, information hierarchy becomes an integral component in deciding how to arrange elements on the screen, in order to take the user through an experience that keeps their interest and invites them to explore the site deeper.
I took the information I received during the testing and worked to make things more accessible and less nested. I restructured the architecture to prioritize access to other pages and features. From there, I started blocking larger breakpoints and reorganized the information as needed per screen size.
With a working product and mid fidelity wireframes in hand, it was time to capture the aesthetic soul of The Truffle Club. Drawing from a contemporary take on natural textures and colors, I gathered lighter backgrounds and muted colors to evoke a feeling of modern creativity. The influence of natural textures provided a sense of grounding in an otherwise atmospheric experience, creating an overall aesthetic that's both confident and relaxed.
Working off the foundation of the mood board, I started creating a style guide for The Truffle Club, to keep components, colors, fonts and design elements consistent and cohesive across all screens.
The End | Reflections, Final Product + Mockups
Bringing It All Together
I knew that at the start of this project I would be coming into it with very specific ideas as to what I wanted to create and for whom, and that I would have to work to let go of the ideas that seemed good for ideas that were actually proven good. The final result is one that I certainly didn't expect at the start of this project (but hilariously came totally full circle), but the process works and the product I ended up with surpassed anything I thought I could create. During the process I learned a few key things: the delight of failing early, redefining my objectives, and using data to drive my decisions.
Fail early + often (and enjoy it)
At the start of this project, I had very specific ideas as to what I wanted to create and for whom. The first round of user interviews that I conducted showcased just how inaccurate my original assessment was. While I wasn't totally off the mark, I was definitely missing the opportunities that were actually present. I ended up having to go back to the drawing board, but without that redirect I would have spent far too much time and resources building out a service that wasn't really needed or wanted before I inevitably ended up back in front of the metaphorical drawing board.
This experienced kicked off a pattern of hypothesizing and testing that hypothesis as quickly and efficiently as possible in order to know where to actually apply my time and energy developing something. I'm a huge proponent for testing as much as possible. Ultimately, so many resources are conserved by testing ideas often to see if they fail or succeed. This is especially true when you're coming to the table with ideas already pre-formed, since we're biased in thinking they're inherently successful.
Continuing from the idea of failing early and often, I learned to redefine my objectives consistently. While some objectives will carry through from the first session to the last, many will need to change in order to accommodate an evolving product. While this applies to every product development process, I found this to be critical when adapting and idea, or reworking a feature. Original objectives, if not updated in keeping with the research process, can distract from creating something genuinely useful (and lucrative).
Let data drive decisions
Again and again, each step in this process drove home the fact that data is the backbone of good design. Involving users early on in the product design process is essential in knowing what your users actually want and need, and equally as important: what they don't. Cool ideas are just that, only ideas, unless they're backed with solid data.