A CASE STUDY
This is the story about how I helped Kraft-Heinz redesign and rebrand their recipe website so as to provide a more health conscious and millennial friendly experience for its users while earning the company more revenue.
To comply with any non-disclosure agreements, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Kraft-Heinz.
The turn of the century brought two decades of significant changes to the CPG (Consumer Packaged Goods) industry as people worldwide became more health conscious about the foods and beverages they were consuming. During this time Kraft-Heinz saw a decrease in younger generation sales because of the association of the brand with unhealthy processed foods.
How might we redesign and rebuild Kraft-Heinz's old recipe website to have a more commanding web presence, drive more product purchases, and increase company revenues?
After several weeks of team ideation and brainstorming for solutions, we came up with three primary goals we wanted to achieve – each with their own list of objectives.
While our ideation and brainstorming sessions were a mix of suggestions from everyone in the group, there were a few specific ideas of mine that made it into our final solutions.
Upon my recommendation, we would add a ‘Similar Recipe’ module to recipes, like I had designed at Allrecipes. Research there confirmed most users come from a Google Search when visiting our recipes. If our recipe is not what they are looking for, they go back to the Google search. I was able to keep more users on our website by surfacing ‘Similar Recipes’ at the top of the page.
Upon my recommendation, we would implement a recipe hub taxonomy structure similar to what I had designed at Allrecipes where we would surface recipes at every level of our hierarchy instead of waiting to the lowest level to show them. This had caused frustration among our users browsing through our taxonomy looking for recipe ideas.
Upon my recommendations, we would implement and offer Native Advertising to sub-brands on our website. This would require me designing for the integration of these ads into existing pages and grids so as to give them a more natural content feeling and flow.
With the implementation of new BI tracking services, we created four KPI measurements to help us define the success we wanted to achieve one year after the redesign and launch of the new websites and templating system.
Increase Website Traffic
Reduce Website Bounce Rate
Increase Website Generated Revenue
Increase Sub-Brand Website Traffic
The primary audience is millennial families with 2+ children under 12. The core audience also includes young Gen-Xers with young children. We want to retain older Gen-X and Boomer audiences, and do not want to turn away millennials without children either.
Our target consumers experience tension between their extremely busy lives and their desire to do the best for their families by creating nutritious recipes and happy mealtimes. They feel like they’re expected to do it all.
Our audience generally falls into one of three categories:
Almost our full audience is time-challenged to some degree, but a member of this group feels especially frazzled and like her life is always about to slip out of control. She cooks frequently during the week but it can feel like a chore. She is especially in need of time- saving easy ideas and recipes to help her get it all done.
These are our foodies. They are relatively confident in the kitchen but struggle with the pressure they feel to create meals and experiences that will make them and their family and friends happy. They are looking for inspiration and new ideas to help their creativity shine.
These consumers are stuck in a bit of a recipe rut. They are torn between easy recipes that they know are dependable and the desire to try something new. They cook often but aren’t very confident in the kitchen so they need new twists and spins on old favorites to break them out of their cooking habits.
Brand, Design, and Development work would be done in parallel. As a team, we would work together and coordinate what needed to be done through:
I would be in charge of all UX and design needs for this project. After grooming all our stories in Jira as a team, I would start on the backlog of prioritized design stories doing the following:
Development would code up all templates as done by design, with the same swappable tokens and styles. Close to the end of the project, branding would be finalized, implemented into the design, tweaked as needed, and then handed off to development for final implementation.
It is important to understand that the design process we used was not my own... The aggressive scope, fixed launch date, and lack of project agility created challenges with coordination which lead to an intense work environment.
It is important to understand that the design process we used was not my own and was implement by the product owners to meet the aggressive scope, tight deadline, and personal preferences of Kraft-Heinz. Working backwards from a hard stop date negated much of the UX value proposition I had purposed. Research practices and design iterations would be minimal, there would be no user testing up front, and product owners with little to no understanding of UX would be making all final design decisions. The aggressive scope, fixed launch date, and lack of project agility created challenges with coordination which lead to an intense work environment.
UX flows were synthesized early during the planning stages of our design. They formed an important part of the foundation on which our website information architecture was built. User flows helped determine how many screens were needed, what order they should appear in, and what components would need to be present. I designed flows for everything from the login and join process, to submitting recipes and on-boarding.
Wireframing allowed all stakeholders on the project to agree on where information would be placed and what it would be before actually mocking up any high res designs. They were used effectively as a means of communicating general ideas and thoughts visually without getting into too much detail. Wireframes facilitated feedback from the product owners, instigating conversations with the stakeholders, and generating ideas for my designs. When implementing specific features, I was able to better clarify how they would function and what purpose they would serve.
No branding. No images. No styles.
How do you design and develop a website without knowing what the branding, imagery, and styles will be until late in the process? It’s not ideal for sure, and a constraint that made this project a challenge. To address this, I created a generic, grey scale component library & style guide following atomic design principals. I then designed generic page templates for each page.
Early in the initial design system setup, I used design variables (tokens) so that I could later swap out fonts, colors, icons, borders, rounded corners, shadows, and other styling options. I then passed my generic designs to the development team so they could start development following the same setup.
The plan was to be able to swap everything out with our new branding (or a sub-brand’s branding) and have ‘initial’ styles for our websites up and running quickly. Our website, along with any other sub-brand websites that wanted to pay extra, would need additional style tweaking and customization outside the default design. Basically, swapping out the tokens would get us to about 80% of our design, but the last 20% would require custom design work based on branding's vision.
Branding finally came in. It was absolutely critical for the business because of the impact we were trying to make for the new Kraft-Heinz recipe website.
It would change how people perceive the brand, hopefully drive more business, and increase our brand's awareness.
For starters, Kraft Recipes would be renamed to My Food and Family.
There are a million ways for families to be inspired. A million ways for branding to get it right. We wanted to celebrate unique family styles, at the kitchen table and beyond, with delicious, personalized recipes as well as hacks and tools that make dinnertime a little easier. We wanted to serve up recipes that families love to eat from a trusted brand that they already know and love.
We wanted colors, fonts, and styles that met the diverse needs of content creation across all our channels and seasons.
Our primary colors would be Kraft medium and light blues in addition to a rich black adding boldness, contrast, and an overall modern sensibility. Secondary colors include a modified kool red and Kraft yellow to serve as strong pops of surprise and excitement.
Our primary font would be a modern, geometric sans serif font. Small details lend a unique and fresh take to this display font. Excellent legibility makes it perfect for smaller copy block and caption use. The secondary font would be a rounded serif font for use on complementary headline treatments, subheads and captions.
Our content should serve to demystify and simplify cooking. It's especially important to anticipate our audience's struggles and points of confusion, then address them before they become stumbling blocks. Whether for recipe-focused or lifestyle-centric how-to content, our main concern should always be clarity and ease of use.
For technique-focused tutorials and other step-by-step content that we have evidence will resonate with our target audience, we should have a more conversational style. This can help clarify anticipated points of confusion and allows tips usually displayed at the end of a recipe to be added in organically.
When discussing non-recipe content, our tone should be relaxed. There should be clearly articulated steps/ideas, and the structure should be loose. The content within our how-tos should be discussed in a more conversational tone infused with humor and fun.
Kraft’s voice should be that of an especially knowledgeable friend. Kraft understands the challenges that families face today and is here to offer advice and understanding. Kraft is a trusted brand offering recipes and other solutions developed by experts, so Kraft should speak with approachable authority, but in a language that feels natural and familiar.
We should always use the active voice as it creates more immediacy and gives the sense of being more human (and less corporate). Overall, Kraft tone should be: Friendly, optimistic, natural, compassionate, non-judgmental, humorous where appropriate (but never in a forced way), clear (but not clinical or stiff), warm (but not saccharine), irreverent and genuine (but not snarky inspirational), not over-promising contemporary, not controversial conversational, and not bland.
Compelling imagery, whether static or in motion, is vital to telling our food stories in a unique and ownable way. We seek to inspire, to motivate, to educate, and to reflect our consumer's life through our imagery. Our food imagery entices in an authentic way.
Our imagery makes it all seem easy and doable. And our depictions of family life make her realize that we get her and her tribe. Quality is at the core of all our imagery and should reflect the heritage and modern innovation our consumer expects from us and our family of brands.
After the My Food and Family branding came in, I was able to update all my design tokens in the templating system as well as my Sketch library with the appropriate colors, fonts, and styles. This set up a nice default visual for everything, but there was still more tweaking and polish work that needed to be done for the final design.
My Food and Family was not the only template ready for style updates. Because our design system was token and variable based, we were able to apply styling to all of Kraft-Heinz’s sub-brand websites as determined by each company.
The default styles applied to each website template came out pretty nice. Setting colors, fonts, logos, corner radiuses, etc. really provided each sub-brand with their own unique look and identity while also showing their affiliation with Kraft-Heinz.
That said, sub-brands did have an advanced styling option if they were willing to pay for it. Kraft-Heinz would implement any customized design requests on a case-by-case basis.
Using our learnings from Brand and Marketing research, we wanted to customize the My Food and Family website design to better reflect our demographic and users. The default template styles would need to be revisited, tweaked, and updated.
For all our advanced atomic design components, molecules and organisms, I looked at the Gestalt Principles for grouping and instead of using the default common region I opted for proximity with continuity groupings to help minimise the design and provide more whitespace. This is most apparent when viewing our recipe and product card collections.
Two other primary influencing factors were the integration of ads and the implementation of higher quality imagery. This influenced my decision to go with as much of a flat minimalist design as possible. Following the Nielsen Norman Principles of Heuristics Interaction Design, I wanted the least amount of distractions possible so that users could focus more on our quality imagery. Plus having animated ads was already distracting enough. The less unnecessary design elements on our pages, the better.
Below I have showcased some of my design work from three of our most popular pages: the Home Page, the Recipe Detail Page, and the Recipe Hub Page.
Kraft-Heinz wanted the home page to have a carousel at the top with an optional call to action for each slide. I went with traditional dots and arrows for next/previous slide discoverability since I wanted our quality hero images to be 100% width of the viewport.
I went with swipeable horizontal scrolling card collections for each of the major sections of the page. This would let users quickly vertically scroll past sections of less interest but still allow them to deep dive into more interesting collections by scrolling horizontally. I used the illusion of continuity created by half images or text that look like they are continued beyond the vertical edge of the screen to make it more discoverable. At desktop viewport size, I add in scrolling arrows.
To help showcase videos, articles, and other non-recipe products I created a Featured Fun section using a ‘non-traditional’ grid to break up the monotony of the other similar sections. This provided me an opportunity to integrate some native advertising slots.
The Recipe Detail Page is the primary landing page for My Food and Family. Through our ideation sessions and my recommendations there were several new features added to improve the user experience for this page and help us meet our KPIs.
Some of these new features included adding Nutrition Information for all our recipes and adding a Healthy Living label to healthy recipes for millennials and health conscious users. We also added a Add to Shopping List feature that would allow users to add ingredients to a printable shopping list (a popular feature requested by our users). Future revisions of this feature could eventually lead to an online shopping experience.
Most people reach our recipes directly from doing a Google search for a specific recipe. If the recipe is not what they are looking for, they leave our website and go back to the Google search results. To help retain visitors and lower bounce rate, under my recommendation, we added a Similar Recipes collection at the top of the page on wider viewports. Based on past research I had conducted at Allrecipes, we believed this would entice users to click one of these other recipes instead of leaving our website.
Let’s not forget website monetization. Designing for the user experience while integrating ads as seamless and native as possible was critical here in order to help fund supporting the website and future ecommerce operations. The Recipe Detail Page is the highest trafficed page on our website, so how we designed our ad integrations here was very important. We went with sticky sidebar ads on scroll for wider viewports (tablet, laptop, and desktop) and a sticky 320x50 ad at the foot of the page for smaller viewports (phone).
The Recipe Hub Page’s primary purpose is to establish our SEO Taxonomy for search engines while also providing a hierarchical browsing experience for curious users. We know from past research that I have done that if a user wants a recipe for something specific, they just do a search for it (either through Google or our website). Users that traverse through our recipe taxonomy hub pages are usually just browsing, not searching for anything in particular.
I went with easy-to-click, larger, bold buttons for breadcrumbs vs just standard text links. That in combination with clickable sub-hub thumbnail images demonstrates my focus was on a strong mobile first approach to our design.
Both the breadcrumbs and the sub-hub collections would be swipeable, horizontal scrolling, collections using partial text/images and fading transitions to give the illusion of continuity. This would allow us to surface recipes at each level of the taxonomy hierarchy sooner with the least amount of vertical page scrolling. From past research I had conducted we knew this would alleviate a frustration point that users had rejected - having to drill down to the lowest level before seeing an actual recipe.
Every atom, molecule, organism, and page went through a design iteration process. Because of time constraints, we only allowed for 3-4 different variations to be presented to the product owners for review. Based on their feedback, there usually was an additional iteration or two where specific design features from one design might be swapped out with those from another.
Final design decisions were made by the Kraft-Heinz product owners. My suggestions on UI design best practices or common UX Patterns were not always heeded. Personal preferences from the product owners and their managers overrode many of my design recommendations. Working within these constraints I followed through as best I could for all our final designs.
Throughout the entire design and development process, I was handing off design specs to the developers and testing out their implementations in our Development and QA environments. I even managed to squeeze in some user testing a few weeks before our first production release.
Developer specs were handed off through coded prototypes with the HTML, CSS, and JavaScript as well as through InVision Inspect for static vector based designs and images uploaded through Sketch.
QA and bug reporting was done by everyone on the team throughout the entire project lifecycle. Showstopper bugs were prioritized and fixed first so as to meet our deadline. Unfortunately, there were hundreds of design bugs that didn’t make it into our initial release as they were not deemed as critical bugs.
Even though we had agreed to no user testing until after our first release, I took it upon myself to contact UserTesting.com and see if they would give me a few users test for free in the hopes of enticing Kraft-Heinz to user their product for more testing in the future. I was able to successfully demo the value of user testing and feedback to Kraft-Heinz and further expand the UX value proposition to include more of it in the future.
The My Food & Family website successfully launched on time and under budget. It was without a doubt the most fast paced and intense project I have ever worked on.
That being said, it still needed a lot of work. A successful website is never finished. Unfortunately, Kraft-Heinz is not a technology company, and they considered the website to be complete after its initial launch. Almost all of the bugs and design issues we logged still remain today.
