Created By Cody

view live site

Project Breakdown

Project type: Web design
Team size:  1 Designer
Role: End to end design
Time: 4 Weeks
Tools: Figma, Webflow, 3rd party integrations

Opportunity

Discovery + Goals

Cody and I had a discovery call where he shared the needs and goals of his site. His season of Hell's Kitchen was airing and he wanted to be sure that fans of the show who visited his site would know they had reached the right place and would funnel into his social media accounts, newsletters and buy merchandise. He already had great imagery and a set of leaf and branch design elements he wanted incorporated into the site, so these would be taken into account when it came to design. It was a great start but we needed to define the information architecture and aesthetic direction.

Dinergy created an iconic logo and symbol that could easily be applied to novelty kids items as well as premium spa and organic products.

I conducted research into some of Cody’s industry counterparts as well as looked for design inspiration. He wanted the design to be a balance of professional, clean, and modern.

Takeaways

1. Professional chef's cater to multiple audiences ranging from brands, restaurateurs, their followers, and other chef's.

2. People will be visiting the site for many reasons, it's important the information architecture helps them to quickly navigate.

3. Cody will be managing all aspects of the online business so handoff will need to be detailed easy to understand.

User groups

We identified three main user groups:
 
1. Core fans (already following)
2. Fans of Hell's Kitchen who convert into core fans
3. Brands and restaurants that are interested in hiring or collaborating

place holder

Define

I created a list of requirements for the site keeping in mind our user groups

1. Links to season 19 of Hell's Kitchen and his youtube channel

2. E-commerce store with his new t-shirt collection with artist Gary Paintin’
3. Contact page with his manager, agent, and social media accounts

4. Newsletter signup

5. Members only recipe page

Cody understood that many people would find his site from seeing him on Hell's Kitchen. It was important that the connection to the show was prominently displayed so users understood they had found the correct site.

CBC also needed a few 3rd party tools which I would integrate into the site and handoff to Cody on launch.

1. Newsletter/email list management

2. E-commerce POS

3. Garment printing and fulfillment

E-commerce Flow

Since this site also has an e-commerce store, that flow had to be integrated into the sites design. While we opted out of adding user accounts to the site for now. I designed an intuitive shopping page that let users quickly browse and checkout using whichever payment method they were most familiar with. The use of 3rd party integrations were a huge help in getting orders fulfilled.

Design

IA & Wireframes

The design phase started with wireframes that would explore layout and information architecture. I chose a two column layout that would alternate left and right with text and imagery.Since many visitors would be visiting the site from mobile devices this minimal layout would be great for small screens.

Prioritizing the goals of Hell's Kitchen fans and CBC supporters we put links to HK and Youtube first. Fans of Hell's Kitchen would be able to funnel into the CBC social media accounts. These most important sections would feature on the homepage, while the shop and contact pages would be linked in the navigation.

A wireframe of the home page was made to define the information architecture and layout.

Design elements

Cody supplied some assets like pro photography and Hell's Kitchen marketing materials. I created mockups for his t-shirts and card for the youtube videos.

Color

Cody wanted the site to rely on black and white with shades of red. His youtube channel feature more color but we wanted to start the site with a palette that was more minimal and will evolve with time

Hi-fi and motion

To bring the site to life I created hover and scroll interactions that gave the otherwise static site some movement.

Interactions + States

A video showing page and hover interactions

Next Steps

Since release, Cody has expanded his content library to help grow his brand. As he prepares for his next t-shirt collaboration,jjj we'll be revisiting the site for a refresh that may include updated colors, type and an even more robust shop page.

Thank you!