< Back to Portfolio
Project Name: Treehouse Bakers
Project: Create a wireframe and iterate on a design
Client: Treehouse Bakers
Project’s Problem and Context: Treehouse Bakers have asked me to complete a wireframe for a blog run by the company. They sell baking supplies. They would like the blog to focus on recipes that use the ingredients and tools that they sell. They have provided the basic layout and a number of elements they wish to be included. The goal of the blog is that it is easy to understand, with logical navigation and content groupings that helps recommend recipes to users.
The Process:
Before beginning the wireframes, I spent some time researching other bakery suppliers websites and blogs. The client asked for logical navigation and content groupings so looking for common trends among these gave me an insight into what users would already be familiar with.
Hand sketching potential designs enabled me to get many ideas on paper. I reviewed these and highlighted those elements that I wanted to include in the final wireframe.
The simplicity of the navigation bar makes it clear to use and the ‘Hamburger’ menu is commonly used on websites as a neat way of packaging the menu and options. The large ‘search’ area shows the main intention of this Blog is to search for and use the recipes. There is also a log-in area for customers to make and track their orders. The centre of the page displays the blog post summaries. The largest post in this area is a ‘Recipe for the Day’ along with three smaller, recent posts. This allows the user to see daily, varied content.
A side bar gives the company an area for new recipes. This would be particularly useful for regular users of the blog to find new content easily. Also, a highest rated recipe section gives confidence to the users that the recipes work well.
As the majority of clients like to see options, I created a second wireframe of the blog page to share as another option.
The navigation bar here has just three menu options for the blog, recipes and the shop as discussed in the brief with the client. These clearly show the main parts of the bakery’s business and vision for their website. The large blog post area displays a large picture of the ‘Recipe of the Day’ to entice the user and increase the visual appearance of the blog. Two other blog posts have equal prominence at the bottom of this section. The sidebar uses a scroll bar of new recipes to allow users to easily flick through many of the recent recipes uploaded by the bakery.
Iterations
The client particularly liked specific elements of both designs and requested further, high fidelity wireframes each with a focus. The first was to be a more product focused and the other on increasing the company’s user base of tech-savvy elderly women.
Iteration 1 – Product focus
This was to focus primarily on the tools and ingredients that can be purchased on the site. The client wanted users to be fully aware of the products available to purchase through the site. In order to address this I highlighted the new products in the sidebar. Below the main blog posts image ‘Recipe of the Day’ I added links to the various products that would be required for that recipe. Having these product links available from the blog page should drive users towards the shopping page and therefore increase sales. The visible trolley icon reminds users that this is primarily a shopping site and will clearly show when items have been added.
Iteration 2 -Tech-savvy elderly lady
This iteration is set out with more whitespace. A serif font was chosen for the headers as this increases the legibility of the text and a complimentary sans serif font for the body to increase legibility. I increased the body font size to 18pt and the leading has been increased to allow clearer definition between text lines. I also increased the sub headers and header size to 30pt and 45pt. I changed the text colour to black, which, on the very light pink background gives a greater contrast score. I spread out further the links on the header to give the user a larger clickable area for each link and the underline of the blog link on the header clearly shows which section of the website the user is currently in. The tech savvy elderly woman will be looking for inspirational recipes and to learn new things to make for family and friends. The newly created masterclass section takes the user to a step by step guide for perfecting recipes.
Skills:
- Iteration
- Adobe XD
- Web Typography
Hannah Belshaw 