The Foodie Influencer Blog

Project Duration: 1 Month
Role: UX/UI Designer
Tools Used: Adobe XD, Invision, Adobe Photoshop

The Problem

The Issue

A baking supply company was in need of a design for their blog. It primarily focused on recipes, with ingredients and tools in them, that the company sells. The client handed me a base template to design the blog. My job was to deliver a wireframe that was easy-to-use, contained logical navigation, and understandable groups of content that recommended recipes to their target audience.

The Audience

In the project, the target audience that the company wanted to increase was of a tech-savvy elderly woman. The business has noticed most of their in-store customers are in this category and would like to increase their presence on their blog to keep them informed on new products and recipes.


For the research of this project. I interviewed three people from age ranges from 50 - 65 in order to get an idea of what they look for in recipes online. I asked them various questions about where they find recipes online, what they pay attention to for in recipes, and what they find useful.

Key Findings

Most people found recipes on google or Pinterest.

Prefer to print recipes.

Love visuals and videos of recipes.

Loved knowing the cooking tools used.

How people Choose Recipes




Cooking times

User Persona

Initial Designs

Ideation on Paper

The company provided a simple template for the blog page. Its structure was divided into 3 sections: Header, main content area, and a side menu. Content in some areas were strict while others like the side menu allowed for more creativity. Following this template structure, I rapidly sketched dozens of concepts.

Low Fidelity Mockup

In the end, the client decided on another design that matched their template layout. This version includes the essential components plus some additional features for recipe finding.

The main content/blog section included big imagery with easy to read headlines and descriptions. Posts were divided into primary and secondary sections. Primary was for the recipe of the day, and secondary for other current recipe posts. The side menu includes a community recipe review section to encourage users to try new things. Below that are recipe categories to help users find recipes quickly based on cuisine.

Designing the Blog

A war between two goals

Advertising or Engagement?

The Client wanted to have two options for designs for the blog post to compare and contrast which would meet business needs. Which one be a better fit for the blog? Advertising or Engagement?

Iteration One

A Focus on Selling Product
Ideation on paper

When it comes to initial brainstorming Ideas, I am simple. I use pen and paper.

During the brainstorming process, I kept in mind the business goal that was established by the client: Selling product

Leveling Up the Fidelity

Gathering all the initial sketches I had done and brain storming, I looked at the best design aspects of all the sketches and included them into one layout. Using Adobe XD, I created this low fidelity mockup of a blog post.

With the goal of having a focus primarily on advertising the business baking products, I thought it would be effective advertising if the products flowed seamlessly in the recipe. The “tools” section where it highlights the cooking tools that were used in the recipe. When the user interacts with the product, to see how much and where to buy them, viewers could choose to purchase while looking for the perfect recipe for their project.

UI Revamp

Using the Ideas and information that I had created, the next step was to apply a color palette that is playful and creates a sense of happiness, making sure that the blog post was fun, inviting and usable for users meeting our business goal.

I drew inspiration from various blogs and influencers, making sure that the recipes themselves were easy to read and usable for users. Paying attention to highlighting, I made sure that the tools section was our primary focus on the post to establish attention to product.

Iteration Two

A Focus on User's needs

Initial Sketches

Like my previous work, I start my sketches on pen and paper. I made three quick designs on paper and selected parts of the sketches I felt like aligned with the goal: to meet the users needs.

Low Fidelity Mockups

With a design in mind for a tech-savvy elderly woman, I had to be empathetic about the clients and design with a tech-savvy elderly woman in mind. I made sure there were links for popular social media amongst my focus, which was primarily pinterest and facebook. Also a link to save, print, and email the recipe. Also a comment section so that they can look at ratings and comment with other viewers.

Final Design

Because the design was empathetic to users and their goals, we had to be cautious for different design aspects. The primary goal was to make sure everything was easy to read. I wanted to make sure that the colors used the right amount of contrast and colors so that color blindness was not an issue. I wanted to use clear descriptions and interactions and to pick the right vocabulary. I wanted these features to be easily understood for our primary audience so that they wouldn't have any difficulty navigating the recipes page.


During this project, I learned the importance of sketching, iterating and wireframing and why it is so important in order to come up with the final design. It is definitely crucial in order to clearly think what is important to the user, think of creative ways through low fidelity sketches, and use these ideas to create mockup for the client.I learned the importance of making a bunch of sketches, and drawing them very quickly in order to get my ideas out. Something on paper for the “vomit” sketch period is so important, even if the idea is weird at first. I can always edit later.

Next Steps

My time and resources only allowed me to go this far in the design, however, my user research many rounds of usability testing yielded several ideas for future expansion on this app.

 My next steps would be to expand to the ideas for all pages of the website and to create wireframes for other sections of the website.