computer screen logo

Nicole Peery

Front-end web developer known for strong design skills and creative problem solving

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. The client wanted me to create two blog designs: one that focused on their products and one that targeted an audience of tech-savvy elderly women.

My role was to create two medium-fidelity and two high-fidelity wireframes for both design purposes.

Process


With client feedback from the first iteration and a template provided by the client, I began sketching out ideas for audience and product-focused blog layouts.

In the product-focused iteration, I chose to offer the user product-related suggestions in the sidebar.

The first sidebar area invites users to sign up for the company’s email newsletter and offers a 10% off coupon for their first purchase. This will use a prominent “above the fold” area of the website to build the company’s email list to keep users coming back to the website.

The second area of the sidebar displays top-rated products to the user with the product’s title, price, and star rating. I used clear and enticing images of the products to encourage users to click through to the product page.

Bitchin' Baking Company Sketches

In the audience-focused iteration, I included how-to videos, a recipe card digitization guide, and an invitation to join the company’s Facebook group.

These design elements and UX content choices will create excitement around the company’s products, meet users where they are in their journey, and drive sales.

Both iterations include a large hero image with a featured recipe slider. The featured recipe displays a shopping list for the recipe to make it easy for users to buy the products associated with the recipe.

Lessons Learned


In this project, I learned just how many directions one design can take. While each iteration shares the same goal of selling the company’s baking products on its blog, the layouts and design elements are very different. This project solidified Adobe XD as my wireframing tool of choice, as it made the process of moving from a medium-fidelity wireframe to a high-fidelity wireframe smooth.

The Result


The client received 4 wireframes using common blog design patterns for a product-focused layout and one catering to tech-savvy elderly women. Using my wireframes, they’ll be able to make informed decisions about which design elements to include on their blog.

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

  • Created high-fidelity mockups for each design iteration

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

"Your written explanation is well done and definitely explains the design choices that you’ve made throughout your design. Keeping the user from being overwhelmed by conflict is a great choice, and shows that you’re definitely putting your users first!"

"Awesome! Your wireframe and your hi-fidelity mockup are looking fantastic and professionally designed. You’ve included all the elements needed for the project, well done!"