Baking Blog: Stage 2

In the previous stage, the initial blog design I sent to the baking company was well received. But this time, my supervisor wanted to push the design into two new directions. The first focusing on promoting the business' products and the second targeting tech-savvy elderly women found mostly in their stores.

Date: June 2019

Role: UX/UI Designer

Course: UX Design Techdegree @ Treehouse

The Users

Users were split into two groups dependent on which direction the design was to taken in. The first user group remained the same. It included late 20 to early 30 year-old men and women from all cooking skill levels. The second group targeted the increasing in-store traffic of technology proficient elderly women.

The First Iteration

As mentioned earlier, the first direction of this new iteration focused on the business' products. Feedback on the first design revealed that some users weren't always aware that the products used to make each recipe were offered by the company. My goal was to bring those products to light and each sketch reflected that idea.

Iteration 1 sketches.

Iteration 1 sketches.

Next was wireframing. 3 ideas surfaced from the original design, but were tweaked and adjusted. Some ideas I played with seemed risky while others were much more of a safer option. Despite my initial hesitation, I went ahead and tried every idea to see if it had potential.

A group of wireframe variations.

Many ideas and variations were tried.

The first wireframe introduces an recipe tool hint (the risky idea) below each blog post. The list would display some tools and hide others to spark curiosity to check out the products. Why was this risky? Well, there was the fear of giving too much information for the user to read ultimately tiring them. On the flip side, The hint list would free up space for content in the side menu since it was originally planned to be placed there. Needless to say, I tried it out anyway.

Categories of baking tools replaced the recipe review section from the last design implementing the UX pattern, "Recognition over recall". A simple 6-list category would help users get a head start to finding what they might be looking for.

Wireframe #1

Iteration 1 - Wireframe #1

The second and third wireframe implemented variations on those ideas with the addition of a slideshow featuring "on sale" products. I ultimately decided on #3.

Wireframe #2

Iteration 1 - Wireframe #2

Wireframe #3 (the design I chose).

Iteration 1 - Wireframe #3 (the design I chose).

Once finalizing wireframe #3, it moved to the visual design phase. This is where everything came to life and it was by far my favorite part of the process. Centered around the excitement to "chew" on good food, the visual identity for this iteration was bold, direct, hip, and confident. It includes a logo, a sharp and simple color scheme, custom iconography, and dramatic photography. Chew on this!

Desktop mockup of iteration #1.

Desktop mockup of iteration #1.

The final design for iteration #1.

The final design for iteration #1.

The Second Iteration

This iteration was a little more challenging. The goal was to create content that would engage elderly women who were comfortable with technology. Through research, I discovered some of the challenges older ones face as they age. The issues that stood out to me were declining health, social isolation, and vision impairment. Those problems were addressed in the sketching phase.

Iteration 2 sketches with notes on users.

Iteration 2 sketches with notes on users.

In the wireframing phase, 2 concepts stood out to me. The first concept had a section for healthy recipes at the top. It's immediate presence gives our users knowledge on healthy eating. The side menu includes a community baking project. The idea behind this was to encourage our audience to get active with community and to avoid feelings of isolation.

The second variation repeats these ideas, but differently. Blog posts were designed in a way that's familiar to older ones since they might not understand that images are clickable links. The side menu in this version also includes more ways to get active within the community through a gallery of community photos. This version was the clear winner.

Iteration 1 - Wireframe #1

Iteration 2 - Wireframe #1

Iteration 2 - Wireframe #4 (the design I chose).

Iteration 2 - Wireframe #4 (the design I chose).

The final design for the second iteration focused on simplicity. A rich, high-contrasting, complementary color scheme kept elements on the page easy to understand. Typography was also simple. The system included one typeface with only two contrasting weights since older ones tend to get easily confused when there's too much "noise" visually.

Iteration 1 - Wireframe #4 (the design I chose).

Desktop mockup of iteration #2.

Iteration 1 - Wireframe #4 (the design I chose).

The final design for iteration #2.

The Outcome

And that's a wrap. This project was a small "taste" of what the design process is like from start to finish. I personally love being able to practice different roles that keep me away from my comfort zone.

Delving into the world of accessibility was also intriguing. As a younger person, gaining empathy on the struggles the elderly face brought me an entirely new perspective on how I design. Accessibility shouldn't be an afterthought, but a fundamental necessity that guides what we create today and tomorrow.

See Project Files

Reach out to me

Interested in my work? Resonate with what I believe in? Let's have a conversation!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.