UX/UI Design + Design Strategy

Homepage Redesign

Allrecipes.com is an international food recipe site. They have 19 websites localized around the globe with 35 million visits a month.

PROBLEM & SCOPE

The Allrecipes International sites were unresponsive, inconsistent and laborious to update. This created a “band-aid” habit to solving problems that blocked our team from success. New updates were made to individual parts instead of the whole experience. Redesign was necessary to engage users and capitalize on unrealized advertising revenue. The goal was to establish an agile, UX focused design methodology. For this to occur, it was vital for the new design to be culturally unanimous, despite the large variations in content and languages (including Cyrillic). 

MY ROLE

I worked as a team with the senior product designer, content/SEO lead, sales lead, product lead & engineer lead. My role was creative directing, UX/UI and visual design, design strategy and management.

PROCESS

Research - user persona cards, google analytics, localization and CMS considerations, design examples/market research, SEO considerations, sales opportunities/ad products, content strategy

Define Metrics for Success - design a project plan, define KPIs

Exploration - sketching, brainstorming, style tile, high resolution mocks for UI design, low-resolution responsive wireframes

Validation - fully developed responsive prototypes, live user testing sessions in-house with live translations, Usertesting.com, google analytics & data

Execution - design & content refinements based on prototype/insights from user research, localization in each country

Repeat Steps (As Needed)

SOLUTION

1. A new container query-based modular design system that allowed for extreme flexibility. Content could be moved painlessly and quickly by changing the positions of the modules with very low risk.

2. A new style guide in Sketch and Invision to make a foundation of consistent design direction moving forward. This allowed us to create new design elements rapidly by having a culturally united, go-to resource.

3. Additionally, the team developed a fully functioning prototype of the new homepage site design tailored to test to gain valuable insights into our site experience.

MY DELIVERABLES

Style tiles, high resolution mocks, low-resolution wireframes & design project management (see below), medium resolution prototypes, visual design refinements in CSS & HTML, production of assets, agile design strategy, and design research. 

See the Style Guide Here ›

RESULT

1. Consistent bounce rate decrease across all sites with peak reduction of over 18%

2. Average bounce rate reduction surpassed a 5% target across 12 sites with the new design

3. A huge increase in agility overall allowing for the highest amount of agile releases to date



Initial Responsive Wireframe Layout

Latest Projects