New, responsive web design for an agency client
The Wooden Plate is a responsive website design made from scratch for a professional chef. The project consisted of two teams—content and UX/UI—to conceive of the new brand and website. The design team took an unorthodox desktop-first approach; mobile then tablet designs followed. Along the way, project requirements, client wants, and user needs were all carefully considered.
Context
The Wooden Plate is a responsive website created for a professional chef. The website and brand were created from scratch, built with both the client’s vision and users’ needs in mind.
This project was part of an internship for the agency Coffee & Bananaz. The design process ran from June to September 2021.
Project Team
Gayla Thompson - Design Lead
Tyler Diaz - UX/UI Designer
Valerie Garcia - UX/UI Designer
Mina Okamura - UX/UI Designer
David Castillo - Creative Lead
Mallory Russo - Graphic Designer
Natalia Deng Yuan - Graphic Designer
Rob Jones - Developer
Project Introduction
On the first day of the internship, members of the team gathered in a Zoom call to learn more about the client and the upcoming project.
The Client—Oscar Riquelme
The Client
Oscar Riquelme is an artistic triple-threat: designer, painter and chef. He has been cooking professionally for over 20 years. He co-founded and operates a supper club in New York City and offers culinary services as a private chef.
Oscar wants to build a website where he can start and expand a brand. He wants a site that will share his recipes and foster a sense of community among users.
Brand Identity
Gayla and David met with Oscar to forge the identity of his brand. The three discussed Oscar’s desired image for the project. How does Oscar want to define his brand and site? They brainstormed a list of attributes and ideas Oscar wanted his brand represent.
Proto-Personas
In addition to the brand identity, the trio discussed the users Oscar wanted his site to attract. These two proto-personas would serve as the audience for which we’d build the site. Their wants and needs became part of our aspirations for the project.
Primary Proto-Persona
Secondary Proto-Persona
In essence, both users are professionals who live busy lifestyles. They care about what they eat, and want the dishes they make to reflect that. Both want to make interesting recipes with quality ingredients and don’t mind spending more to achieve that.
Oscar’s Ideal
Gayla and David also shared a document that gave insight into Oscar’s overall objectives for his site. This included sentiments, quotes, and target traits that should guide our work. This document was the culmination of the presentation and gave us guidelines to inform our work and create the site that the client desired.
The Design team then gathered in a separate meeting to review the Information Architecture of the website. Gayla—the Lead Designer—and Oscar previously planned the website’s layout and content. The sitemap would serve as the blueprint for the website’s pages and how they related to each other.
Low Fidelity Wireframes
An Unorthodox Approach
The Lead Designer explained to the design team that we would be building a web responsive site, so we were designing for mobile, tablet, and desktop. However, the project would be unorthodox in that we would not undertake a mobile-first approach. Instead, we would design for desktop first.
Gayla thought that this approach would help Oscar better understand the initial designs presented to him. Additionally, although people would most frequently find Oscar on Instagram—a predominantly mobile platform—users would cook his recipes on tablet or desktop.
Oscar’s Instagram
The team started with the project’s two most crucial pages: Homepage and Individual Recipes. With this, Gayla outlined the elements that each screen must contain:
Homepage:
Hero Banner
Images for recipes/ blog posts
Call to Action to capture emails
Individual Recipe:
Hero Image
Copy about recipe
Additional images
Comments section
Call to Action
Furthermore, the client had in mind exactly how he wanted the instructions of his recipes to read: Ingredients and instructions side-by-side, ingredients listed concurrently with their step. Oscar shared an image from a cookbook to show the format he wanted for the recipe instructions.
Instructions sample Oscar provided
Competitor Analysis & Rapid Wireframing
The team quickly got to work. We examined other similar sites and shared the ideas we liked on Asana, our task manager. We recorded features we enjoyed and conceived of ways to implement the requisite elements and to add on other great ideas.
When we met over video chat, each intern presented their two favorite low fidelity wireframes to the group. We noted the formats and components we liked the most. We then decided which we wanted in our subsequent designs.
Homepage Lo Fis
Individual Recipe Lo Fis
Mid Fidelity Wireframes
The team decided on the design direction we thought the site should take. With that, the group diverged as we divvied up ownership over the website’s pages.
Among other pages, I volunteered to tackle the Individual Recipe page, despite being one of the most difficult and important screens. I welcomed the challenge and felt confident in my ability to deliver a user-friendly page.
Recipe Pages & User Gripes
I started the design process by visiting recipe pages of a bunch of different food sites, scouting for good design. I noticed the many similarities in content/ format between the various pages. It became a matter then of deriving ideas from these sources, as well as combining the best parts of the previous wireframes into an evolved form.
I also searched online for users’ problems with recipes. These were issues common to users that I felt I needed to take a pre-emptive approach to avoid.
Among them were:
Reading through excessive text before locating the recipe
Mental math while following instructions
Losing track of the current step
Several solutions were introduced. I implemented a feature that would scale the quantities of ingredients to adjust the recipe yield. Users would also be able to apply checkmarks to the instruction steps to keep track of their position in the recipe.
As for users’ issues with excessive descriptions, that problem was more complicated. Oscar’s story and his relationship to his recipes are near and dear to him, so he needed a dedicated section for his input. But we didn’t want to forget about users’ frustrations. Therefore, I stationed the gallery and Oscar’s descriptive text next to each other. Here users could view the multiple images of the food, read the description of the recipe provided by Oscar, and review tips the chef left. Also, at the top, I included a ‘Skip to Recipe’ button for users who were strictly business. The solutions balanced the wants of both the client and the user.
Mid Fis
During this design period, we collaborated and sought the others’ feedback and help. The works below are a product of our cooperative work. In our subsequent meeting, we presented our designs to Gayla.
Homepage
Recipes
Individual Recipe
Contact
About
Supper Club
Catering/ Private Dining
Videos
The other interns and I designed the Header and Footer together, as these components would appear on every page. Our wireframes would have to accommodate both.
Header:
Logo Placeholder
Links for Site Navigation
Search bar
Social Media icon links
Footer:
A Call to Action
Links for Site Navigation
Social Media links (again)
Mobile Screens
Mobile Breakpoints
As stated, this project was irregular in that we did not undergo a mobile-first approach. So at this point, we had to define the mobile breakpoint. Many users would funnel in from Instagram, which is a predominantly mobile platform. It was important we develop again the two most important pages: Homepage and Individual Recipe page.
This task would prove challenging: we wanted to keep true to the form of the computer but were restricted by the reduced screen space of mobile. What resulted was a lot of reorganization of the pages’ elements.
Homepages - Desktop & Mobile
Individual Recipes - Desktop & Mobile
The designers and I were unsure of how to translate the recipe instructions of the desktop version, therefore we created multiple versions of the Mobile Individual Recipe page. We didn’t have the room to replicate the side-by-side model of the desktop version. We experimented with the format and layout of the instructions. Despite people most likely using a tablet or laptop while cooking, we still wanted to create the best interface possible for cooking; it would have to be better than users scrolling back and forth between ingredients and instructions, like on other sites.
We invited close friends and family to test our work thus far with Usability Tests, as well as an A/B Test to see which mobile version of the recipe page users preferred.
Testing
Usability Testing
The design team conducted moderated usability tests of the desktop screens, using family and friends as users. The test’s purpose was to gauge how intuitive and user-friendly the designs were. We brainstormed a few tasks that we thought were essential or somewhat complex for users to test. In this order, we asked participants to navigate to a recipe’s page, favorite the recipe, use the scale tool to double the recipe, and locate the setting of Oscar’s next supper club event.
View Script Here
Usability Test Results
Overall, users flew through the test without an issue, indicating the site was in good shape from a usability perspective. However, designers observed one common user mistake: Some users had difficulty with the scale tool. The wording of the feature confused participants. Further investigation revealed that the feature should allow users to change the serving count, instead of scaling the recipe.
In addition to the change above, we relocated the ‘Favorite’ and ‘Share’ buttons to below the recipe name. We anticipated that users could easily overlook the two buttons, depending on the image that Oscar used for each dish. The ‘Jump to Recipe’ button was replaced primarily to better fit the design systems.
Before Usability Testing
After Usability Testing
Preference Test
For the A/B test, we presented two versions of the mobile recipe instructions to users. Version A had two tabs separated by ingredients and procedure, a classic manner of displaying recipes. Version B segmented the different sections of a recipe into tabs; we thought organizing the tabs by recipe section, with concurrent ingredients and steps together, would be user-friendly. We instructed users to vote for the model they preferred.
View Preference Test Here
Version A—Ingredients and Procedures tabs
Version B—Instruction sections separated
Preference Test Results
The vote results were inconclusive. Fortunately, when we moderated these tests, we collected user input and reasoning. Many users preferred the instructions of Version A, but liked the image and header of Version B. So we created a new version that combined the desirable features of both.
Revised Mobile Instructions
After user insights, Gayla gathered all of our work and the users’ feedback to present to Oscar. It was important to do so at this point because we had user proof to support our designs. We waited for the client’s response to our work with bated breath.
High Fidelity Screens
Hi Fis & Design Systems
Beyond a few small tweaks, the client really enjoyed our work thus far! It was really relieving to hear that. This was the green light we needed to proceed with the High Fidelity designs. Oscar’s approval now meant solidifying our designs. This is where the Content team and Design team really crossed paths.
We decided on fonts for the website: Montserrat for headers, Source Sans Pro for body text. The Talca font created (by Natalia) for Oscar would be used exclusively for recipe titles. These three fonts captured well the warmth and approachability the client wanted his brand to exude.
Talca Font
Hi Fis also meant pinning down our Design Systems and Style Guide, creating consistency within and across breakpoints. The design team now had to hone and finalize the interactions, spacing, and format of the site. It is here that we began to consolidate and simplify the components used in all the pages across the three breakpoints, as well as create from scratch the icons used. Our high fidelity designs would have to capture Oscar’s desired tonality for his site and implement the artistic decisions made by the Content team. The Content team created a style scape for the site, which included colors and their use.
Design Systems
Furthermore, we had to now make the site more reflective of Oscar and his brand. So we introduced Oscar’s artwork and chosen textures into some of the pages. This was a great way to add color and personality throughout the site! Lastly, the two teams decided on the brand name and logo. We ultimately agreed on The Wooden Plate and the logo of a hand-drawn basket filled with produce. Both really communicated the artisanal yet homey vibe Oscar wanted his brand to embody.
Hi Fi Prototypes
With the design systems in place, we performed the final touches on the wireframes, making sure to prototype all interactions.
The videos below showcase the different device interfaces of Oscar’s site:
Desktop Demo
Mobile Demo
Tablet Demo
Reflection
I am so grateful to have been part of Oscar’s brand development! From the beginning, it was one I was excited to tackle. Though the project tested my comfort zone at times, I had a lot of fun throughout the period. I learned so much from being on the team: collaboration, compromise, device breakpoints, style guides, design handoff, etc. I especially appreciated my teammates. Constant communication with my team members really helped us thrive together and stay on target. Plus Gayla’s guidance was indispensable.
And the cherry on top: Oscar said we exceeded his expectations for the site. Not bad! The project as a whole was one I’ll definitely remember.
Where I can improve:
Undertaking a more linear approach when upgrading wireframe fidelities
Making design systems more cohesive across devices
Where I excelled:
Understanding how to feasibly balance users’ needs, the client’s wants, and project constraints
Assuming a leadership role in times of uncertainty
Comfort and mastery in executing designs on the prototyping tool
Advocating for adherence to project guidelines, accessibility, and our design systems
Coffee & Bananaz Team
Thanks for stopping by! The site is currently in the development phase!