Allrecipes International

Rebuilding a platform using Agile UX

Overview

So how does one find the perfect cupcake recipe? Allrecipes is world’s largest food website built to help you do exactly that.  As a Creative Director for the the International team, I managed the UX for the platform that served 17 different countries in their native languages. One of my main projects was a year-long effort to reimagine the Browsing and Navigation on the site, so that users can discover that perfect recipe they were looking for. 

The goal of the project was simple: increase user engagement and, as a result, revenue.

My Role

Introducing Agile UX

My core responsibility as Creative Director, was to introduce UX into the Agile framework that was being rolled out as I joined the team. This meant communicating the approach and getting the buy-in, establishing processes for research and design, building out the Design team, and working with Development and Product to refine them.
 

Introducing Responsive Design

The team I joined has never done a responsive project before, so I worked with Dev and Product on changing our prototyping and testing processes to enable the new platform to be responsive from day one.
 

Research and Analytics

I worked Business Intelligence and Development teams to design the analytics that would help us evaluate current platform. We also defined what to measure to help us evaluate the new UX we were introducing.
 

Information Architecture

Working with Content Managers for each country to refine the content taxonomies and how we display them throughout our new navigation and browsing experience.
 

UX Design

I was the principal UX designer for this project and did all the concepting, prototyping, design and production work.

SEO + Ads + PVV = Paycheck

If the headline makes sense to you, feel free to skip this section.

The world of online advertising is very complicated but knowing the basics will help understand the UX decisions and considerations that were made on this project. Here is a quick overview.

Allrecipes International, like many ad driven sites, make money by showing advertisements or by having various food brands sponsor content. Think Heinz Ketchup ad showing up on hamburger recipe or Nutella sponsoring a crape recipe (yum!). To get users to visit, Search Engine Optimization (SEO) is crucial; very large percentage of users arrive via Google search. This means that leaf node, usually a Recipe, is the first page users see. If they don’t like it, they will overwhelmingly click back to Google and pick out another recipe from Google’s search result list. Percentage of users that go back to Google are measured as  “bounce rate”, and minimizing that is the name of the game. So how does one make more money? By enticing people to stay and browse more pages, or in advertising speak “getting more pages views per visit (PV/V)”. More pages = more ads = more money. Pretty simple.

The final consideration is that money paid depends on a) how long user stays on the page b) how long the user sees the ad and c) how popular your site is overall (especially important for sponsored content). From UX perspective, this means what is being displayed is just as important as how it’s displayed.

Phew! If you can’t remember all of that, just remember this: getting users to view more pages for longer time is the ultimate goal for any ad driven site.

Onward…

Unique Challenges

17 countries, 1 platform

We designed one platform to service all of our supported countries for efficiency. However, this meant that our UX approach had to be simple and work for variety of languages. Text flow and wrapping issues were always present so design had to be very flexible. This is why we eventually settled on a simple tile approach.
 

Cross-cultural design

Our design had to work for East and West Europe, Asia and South America. Stylistic preferences across those cultures vary differently. Our approach was to design modularly so that components can be restyled or redesigned for individual markets when necessary.
 

Content breadth variability

Discrepancy in content volume across our countries meant that some sites had hundreds of recipes in some categories, while only a few dozen in others. Our browsing model had to account for these extremes and be both functional and visually appealing in both situations.
 

Technology considerations

Browser usage varied widely across countries. Some, like Korea,  had huge mobile adoption and modern browsers while others, like Russia, had large adoption of esoteric browsers like Opera. China, on the other hand ran a lot of old Internet Explorer. This meant that our browser test matrix was large and that our designs couldn’t use modern technologies like CSS3. Once again, taking a simple approach guaranteed consistent experience for all our users.

Research Approach

Food and cooking is one of the most ubiquitous activities across cultures. The main goal of most visitors to a food website is simple: find a recipe and make it. This is the top use case across all geographical locations. Therefore, research wasn’t focused so much on WHAT users were trying to do, but rather on HOW they were doing it.

On a very popular website like ours, the HOW was best answered by gathering the right analytics and interpreting them to understand where users drop off and where UX can be improved. The same analytics can then be used to measure the improvements once new designs are implemented.

I worked with our Business Intelligence team to gather and interpret analytics for:

• Entry points to our sites
• Click path trough the site
• Bounce / abandonment points
• Component & feature use

For qualitative research, I relied on head content editors for each country to solicit and interpret direct user feedback. However, running formal research in 17 countries was prohibitively expensive for a small team like ours.

Key Analytics Conclusions

Looking at the analytics, we found 3 main drivers for our browsing experience redesign:

Most users view only one page

There were many reasons why users would bounce back to Google but the opportunity here was clear: getting users to view one additional page would have a drastic impact on our revenue. 
 

Single page view is often less than 3 seconds

Pages were either viewed less than 3 seconds or 30+ seconds. They either scanned the recipe and decided to find another one, or stayed to read and/or make it. We need to make good first impression fast and immediately provide smart alternatives so user stays on our site.
 

Mobile traffic is increasing rapidly

This is a foregone conclusion now, but in 2014 the mobile trend was just beginning to accelerate internationally (outside of North America). Addressing this was the key for long term plaform growth. Even though our first attempt at the responsive design project was going to cost more in time and resources up front, it was clearly the most scalable and cost effective solution for the platform long term. 

Increasing user engagement

Getting users to engage with content takes more than just displaying pretty food photos. It must be done strategically, and embedded into all aspects of the UX. 

3 second experience

As the analytics showed, 3 sec is all you have to capture the users attention and drive them to the right content. The content must be highly organized, for easy scanning, and highly visual, for quick decision making. The design must be as simple as possible so that load times and responsiveness to user actions are brisk.
 

Navigation

Navigation is not a highly used component as most people engage with page content, however if its quickly scannable it provides a great escape hatch to broader content. If done well, it also provides user with instant overview type of content the site has.
 

Exposing depth of content

Providing users with alternative selections is key. One can’t assume that Google got them to the right piece of content right away. Showing similar options, especially more specific categories, can help user locate the correct recipe or inspire them to try something different.
 

Showcasing content

Putting your best content first is a proven way to increase engagement. Often, a small subset of recipes drive large number of page views so showcasing them gives user the best option with least effort. Showcases also allow content editors to program the seasonal or holiday content, increasing the chance of inspiring users to view and make the recipe.
 

Consistent UX everywhere

Users expect the same content to be available from anywhere, regardless of their location or device. Using responsive design allowed us to have consistent, familiar, experience and start building brand loyalty.

Intermission

Navigation Goals

On a food site, navigation isn't as critical for the user but it's extremely important for SEO. Structurally, before redesigning the core browsing UX, we had to establish new navigation structure. The goals were:

1. Present users with a most useful paths to deeper content
2. Showcase content or areas we want to promote
3. Allow users to search for content by type or keyword
4. Allow search engines to easily create a logical map of the site
5. Work well across all 16 languages
6. Be simple enough to work consistently across older and less common browsers

Taxonomy Considerations

Taxonomy of AR International sites varied widely from a few dozen to hundreds of nodes. From the UX perspective, I limited the number of top nodes exposed to 7 or less that reflected the most common ways users would look for recipes (each site decided on their top 7). This small set of entry points allowed us to have the uniform experience across different languages (long and short) and also work well for mobile browsing.

Starting Point

Original design relied on text for displaying the taxonomy, which was problematic when you want to quickly communicate content breadth and entice the user to start exploring within 3 seconds. The visual hierarchy drew attention to the navigation bar instead of the rich recipe content below. Finally, the underlying structure of the page was inconsistent and couldn’t be easily modified for mobile devices.

New Navigation Structure 

Primary Links

Primary navigation links reflect most common ways users would look for recipes. Each site defined those and they were to stay largely unchanged for SEO reasons. Design was super simple with nodes simply exposed in order, to accomodate wildly varying string lengths. It also made links very easily scannable, which was important for our 3 sec experience.

Secondary Links

Food content is very seasonal and what users search for varies widely throughout the year. A good example are cookies over holiday season. Same is true for food around main holidays. 
We needed a place to promote the seasonal content and also allow advertisers to promote the content hubs they sponsored. Secondary nodes below were displayed in a similar way as primary ones, with addition of "Recommended" label that drew users eye to that section. This was done because of the monetary impact of this section and requirements that advertisers had for making their sponsored content highly visible.
 

Search

Users look for recipes by keywords, ingredients or type of content (recipe, cook that made it, or technique articles). Searching by ingredients you have is very common and useful, so we created a simple dedicated ingredient search. This design also accommodates quick switching between different search types. 

New Hub Structure

The new structure needed to flow easily between desktop and mobile modes. Mid-size devices, like ipad, were just showing up in our international markets so most of the focus was on phones. I decided on 12 column grid, which would shrink to 6 columns on mobile, and a vertical typographic baseline grid. For type, Open Sans was selected because it provided great international support along with condensed option we could use in tight spaces.

Most of the heavy lifting was done by 3 components: showcase, category grid and lists. The category grid was selected because it both showcases the photo content, that users respond to the best, and also flows very easily when used in responsive design. We absolutely had to have the simplest, easiest to implement solution so all components were designed for easy scaling and text wrapping. 

Root, branch and leaf nodes we created by adding or removing components. For example, a root node may have a showcase carousel at the top, full sub-category grid and a list. A branch node may only have a sub-category grid and a recipe list, and a leaf node may only have a list of recipes. This modular approach can accommodate variable taxonomy depth between sites and variable content volume at each node with same base set of controls and components.

New Design

Visual Direction

New page structure was a sharp departure away from text-heavy visual experience toward more visceral, image-heavy browsing. White background provided contrast required to make the images stand out and very simple, two color, palette was used throughout. This simplicity made stylistic changes for individual sites much more efficient in the future.

Hub Components

Showcase

Showcase is the topmost element that displays a single headline recipe, or a carousel of recipes. It is configurable to enable programming for seasonality or holidays. In absence of editorial selection, it defaults to algorithmically chosen selection, based on recipe popularity. This puts the best recipe as the first option that user sees and increases engagement potential. Showcase also includes optional sponsorship component, making it monetizable. 

Categories Grid

This flexible component shows a flud two-row grid that represents sub-categories. This ensures that wherever user lands in our taxonomy, they have the option to easily more specific options that better match their taste.  Control expands inline to show more options, which is gives user a faster browsing experience. This was a contrast to competitors, which often opened a separate page. The grid was flexible and could be configured for specific number of rows, depending on the type of hub its on or the device user is browsing on.

Recipe List

This list is the workhorse of the entire site. It shows all recipe metadata that user would need for initial assessment: name, photo, rating, and cook time. List is flexible to display several content types, including articles and videos. Like other sections, in can be expanded inline ("More")  or take the user to the paginated list of all content ("Show All").

Related Content

Related content, like videos or other recipes, was added for cross-pollination of content. This benefits the user discover similar content that’s not part of the same content branch. It can also highlight seasonal content, or display sponsored content.

Ads

Ad configuration was designed to be very flexible as advertising needs change rapidly. Advertisers have inline and right-rail ad slots but the page is really optimized for sponsorship. Direct advertisers can sponsor the entire hub, a sub-category or a recipe, making the page very flexible and monatizable, but also not overly saturated with advertising.

Responsive Design

The design goal was virtual parity between desktop and mobile rendered pages.  This was achieved, with a few additional changes to optimize the mobile experience:

1. Number of items in each section was reduced for page weight and quicker load time
2. Ad configuration was switched to mobile
3. ight rail, non-essential, modules were not displayed on mobile

Results

Engagement Increase Across the Board

Below are numbers 30 days after the launch of the new navigation and hubs. Every market showed increase in page views, resulting from new UX and significantly faster page load times. The project was considered a success and Allrecipes International proceeded to hit profitability for the first time, a major milestone for the company.

Solid UX Foundation

This project build a solid foundation for development of future product features. The team now had the understanding of the Agile UX process, and process in place to work effectively with UX Design team. More importantly, everyone gained experience on how to research, plan, design and build a consistent responsive experience across all devices and multiple websites.