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.
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.
Users preferred ad placements that did not block the content on a page.
It wasn’t clear that the “My Recipes” title on the home page was a CTA.
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.