Responsive web and branding redesign for Ryan Nordheimer, an NYC-based chef

Duration

80 hours

Figma, Mural, Whimsical

Tools

Product Design Lead (UX/UI)

Role

UX Researcher

Ryan Nordheimer, an NYC-based cook who discovered his passion and talent for cooking during the 2020 pandemic. Ryan’s social media fan base has increased to 176k followers on Instagram and 186k followers on TikTok within the past 3 years.

Introduction

The client recently rebranded as “Ryan Nordheimer” and moved away with his former business name for personal reasons. As Ryan’s followers count increases on social media, his website and brand identity were in need of a redesign. 

Solution

Research

User Interviews

I interviewed current and potential users to gather insight into how users visit and interact with Ryan’s website. Key insights included disruptive ad placements, lack of site organization, and distracting design elements.

Although there aren’t many ads, the ads do affect my user experience.
— Gloria
Ryan’s website could be improved by sorting recipes into categories to help organize by use case.
— Ally
The diagonal name banner design is not necessary and distracts from his content.
— Caitlyn

Contextual Analysis

To understand how other chefs are organizing their website content, I performed contextual analyses on Alison Roman, Justine Snacks, and Skinny Taste.

Alison Roman

Justine Snacks

Skinny Taste

Survey

The client kindly agreed to share a survey I created in Google Forms on his public Instagram to reach a larger audience and understand their background. Based on responses from 15 participants, I obtained information on the client’s core user base, their lifestyle habits and their preferred devices from which to visit Ryan’s website. Given that many of Ryan’s followers come from Instagram, the preference for mobile device was not surprising. However, it was still helpful to prove the preference and analyze the number of users who preferred both devices.

90%

Impact vs. Effort Matrix

The Impact vs. Effort Matrix is a helpful visual representation of potential website enhancements based on the impact they may have on increased site traffic and the effort required to implement them. Of all the potential enhancements, I focused on the clean and consistent interface as it had the highest impact and lowest effort.

User Personas

Project Details

Site Map

The revamped site map for the client’s website presents a more streamlined and organized user experience. The homepage offers users a glimpse into the chef’s latest creations and signature dishes. The most notable changes were the “My Recipes” page, which serves as a digital cookbook for users to explore and is organized by food category (Desserts, Fish, Chicken, etc.) and the addition of a “Cooking Series” segment, which provides captivating blog posts such as “Cookbook Recreations,” “Cooking with AI,” and “Cuisine Adventures.”

User Flow

For users navigating to Ryan Nordheimer’s website from his Instagram profile, the redesign ensures a seamless transition. Selecting the link in his Instagram bio leads to an inviting homepage where the client’s signature dishes and latest creations take center stage. Alternatively, users can navigate to Ryan’s website from an internet search for his name or a specific recipe. From here, users can choose to navigate to “My Recipes” or “Cooking Series” to explore further and select a recipe to recreate.

Product Roadmap

The product roadmap for Ryan Nordheimer’s website redesign involves a three-phased approach. In Phase 1, the focus is on foundational elements of the client’s website, including UI development, a comprehensive rebranding strategy, and a thoughtful restructuring of the website. Phase 2 focuses on aesthetics and informational enrichment, which includes improving the photography and integrating restaurant reviews. Phase 3 delves further into new content creation with the chef’s original recipes while also leveraging site analytics to gauge the impact of the rebranding and site reorganization.

Visual Design & Branding

I worked closely with the client to understand his vision for the brand. Ultimately, we decided on a simple logo of his initials to emanate a sense of sophistication, maturity and elegance. The deep red color palette is spread out sparsely throughout the website and conveys his passion for bringing home cooking to his viewers.

Color Palette

Typography

Logo

UI Component Set

Responsive Design

The following wireframes provide a more structured experience of navigating the client’s website, with organized recipe categories and improved responsiveness. Responsive design is arguably extremely important for a cooking website in particular. Communicating with the client weekly was key to developing designs that aligned with his brand values and future goals.

Lo-fi Wireframes

Desktop

Mobile

A few things I aimed to highlight in the hi-fidelity wireframes were the high contrast UI and clear call-to-actions. If I were to continue working for the client in the future, I would suggest having photography and video reshot with a professional.

Hi-fi Wireframes

Desktop

Mobile

Usability Testing

I recruited participants for usability testing and A/B testing to determine least intrusive ad placement and whether users could find a specific recipe on the client’s website.

  1. Users preferred ad placements that did not block the content on a page.

  2. It wasn’t clear that the “My Recipes” title on the home page was a CTA.

  3. Users suggested adding visible titles under each image.

Results

A/B Testing

Preferred Ad Placements

Disruptive Ad Placements

UX Redesign

Final Prototype

If I were to continue building the client’s website, I would implement Phase 2 of the product roadmap which focuses on improving photo quality and creating new content such as restaurant reviews and original recipes. Further updates and designs will always be aligned with the client’s culinary expertise and brand identity.

Next Steps

As a fellow fan of Ryan’s cooking adventures, it was a pleasure to redesign his website to improve user experience and implement his rebranding. This redesigned website has elevated the client’s online presence and position in the culinary world while also fostering meaningful connections with the audience. Working with the client on the redesign of his cooking website was a valuable experience that highlighted the importance of aligning design choices with a client's core values. His insistence on retaining ads showcased the delicate balance between user experience and revenue considerations. This experience has taught me the value of clear communication and flexibility to understand client expectations.

Reflection

Previous
Previous

Google Maps, Customization Feature