David Lebovitz
Duration
September 2023 - October 2023
Problem
Users have trouble while prioritizing visual and informational hierarchy, causing excessive scrolling which wastes time and breaks their flow.
Goal
Users must be able to easily and efficiently find and follow a specific recipe's instructions.
David Lebovitz is a chef who maintains a recipe blog online. The page that I redesigned is a recipe page for crispy baked tofu. With a long blog section about the dish, this page also informs the user of the ingredients and a baking method to make the recipe. The recipe ingredients and instruction are camouflaged in the text, midway into scrolling down.
This redesign will help users to easily navigate through the page and view the recipe details.
My Roles
Design Evalaution
Based on reviewing the blog design, here are my findings in relation to user interface.
1. Organization
The webpage has been designed in an extremely monotonous linear layout without considering hierarchy of importance.
The recipe has been mentioned half way into the webpage which requires a lot of scrolling while the blog write-up takes up the first half of the page (which all users of this page may not want to go through).
This may distract the reader in-case they are interested in knowing only the recipe.
2. Navigation
The page does not focus on making the headings and sub-headings seamless and readable in the recipe section.
There isn’t a provision of a (view recipe) tab which allows a reader to directly skip through the blog and view the recipe either, which makes the navigating extremely time consuming and stressful.
3. Visual Design
The blog has a good selection of font which makes the page look visually pleasing but the absence of alignment and hierarchy in the typography dissolves the visual interest of the page.
The negative/white space on the screen is excessive on the right side of the page while scrolling down (below the ad section) which looks ordinary and is also a waste of space.
In addition to typography and white space, the random placement of images of the process of making the recipe within the blog section may prove to be useless if users directly would like to view the recipe instead of reading the blog. The proportion of image to text is not aligned either which causes visual distress.
Redesign Recommendations
The recommendations stated below focus on enhancing the design of the blog page.
1. Layout Change
The recipe section should be placed in a prominent section of this webpage. It is a crucial aspect for an intuitive experience and can be done either by shifting the recipe to the top of the page or by providing a link to go directly to the existing section.
2. Typography Hierarchy and Typeface
It could be designed slightly better by deriving different fonts sizes of the text based on the importance of the data, which can lead to a better interpretation experience. The recipe’s ingredient quantity can be shown with a highlighted typeface to emphasis on the quantity and make it more readable and simpler to infer (1 pound of firm tofu can be modified to – 1 pound of firm tofu).
3. Alignment of Text
In the recipe section, the ingredients are written is a basic format which is not visually eye-catching and may be distracting for the reader while cooking. This can be changed by spacing out the ingredients and quantities by aligning them both in different columns, respectively. This division can be white space for a minimalistic concept. The list can be modified to –
Firm tofu 1 pound
Toasted sesame oil 1 tablespoon
4. Headings and Sub-Headings
The recipe section of the blog does not have separate heading to help readers get a clear idea of where ingredients and method of cooking are mentioned. Although this is not a requirement, a provision of this will allow a reader to navigate with ease throughout the process of trying to cook the recipe.
Redesign Results
The following color coding depicts important section placements in the before (existing blog page) and after (redesign proposal)
Blog
Recipe
Before
Comments
Ads
After
Yup, keep scrolling...
I know right, it's insane! 😅