computer screen logo

Nicole Peery

Front-end Developer & UX Designer

Bitchin' Baking Company

Bitchin' Baking Company Wireframe

Project Overview


This project was created for the UX Techdegree program at Treehouse.

Bitchin’ Baking Company is a business that sells baking supplies, and they wanted to start a recipe blog featuring ingredients and tools they sell. My role was to determine the blog layout needs and create a low-fidelity wireframe.

In the top part of the blog, the client wanted a navigation, logo, and search. In the middle part, they requested at least three blog post summaries with a title, author, date, and the first few sentences of each post. The blog's sidebar content was left to my interpretation.

Process


After studying the provided starter template, I created several layout sketches in Procreate to iterate through design options quickly.

I distilled the client's feedback on the sketches and created a low-fidelity wireframe with Balsamiq. We decided to stick with common blog design patterns to keep users comfortable with the navigation and facilitate their journey through the content.

Bitchin' Baking Company Layout Components

I chose to break the header out into two parts: the top bar focused on site navigation with links and an overall site search bar, and the portion between the top bar and the content focused on the company's logo and branding.

This creates trust by immediately establishing an identity to users, and keeps things organized by providing breathing room between the navigation and the blog's content.

The client's chief concern was helping users find recipes that met their needs, so in the sidebar I chose to provide clear categories for dietary preferences and a list of the most popular posts on the site.

I encouraged the client to consider a tab-style layout in the sidebar to give the users the option of seeing recent blog post comments and content archives. This will encourage users to get involved with the site without causing information overload or disorganization.

Finally, we included a free cookbook offer to help the company build a mailing list of loyal fans for future promotions and offers. We kept the form simple, only requiring the user to enter an email address. This will keep the barrier to entry low, and make it more likely for users to submit their information.

Wireframe design explanation

Lessons Learned


I learned about the importance of following client requirements, iterating through user experience challenges, demonstrating my ideas visually, and the process of creating wireframes.

During the design process, I was genuinely surprised to learn how quickly a sidebar layout can become cluttered and confusing to users. Luckily, the client was open to keeping the sidebar options simple in order to put the focus on the blog's content.

While the entire project was a big learning experience for me, I especially loved creating my first wireframe and experimenting with different tools.

The Result


The final grade I received on this project was exceeds expectations. To obtain the "above and beyond" grade, I:

  • Summarized the blog posts thoughtfully with good use of font and scale for emphasis.
  • Inlcuded creative elements in the sidebar that helped users find new recipes.
  • Made use of a grid to align elements efficiently, and broke away from the grid for creative purposes or to call attention to unique layout elements.

Here are some comments from my project reviewer on my work:

"Great use of design elements to add a touch of your own creativity to the navigation bar! The navigation follows popular design trends and patterns that the users would be familiar with."

"Way to use your creativity to add a new feature to the sidebar! The categories are a great way for users to find more recipes that they would be interested in making. The free cookbook is a great way to incentivize signing up for a newsletter."

"You have shown that you can organize elements on a wireframe in a logical and aesthetically pleasing way AND you went above and beyond to tackle the exceeds requirements as well."