Case study

Blogger’s Website and Graphic design

Blogger's website mockup

Project Overview


Website Designer 
Graphic Designer


Feb 2021 – Apr 2021


Peter Ivanco



Client, Challenge & Solution

Who is the client

Peter is a hard-worker who has spent a large part of his life working abroad. He felt that his lifestyle was not ideal, so he decided to change his approach to exercise and diet. He began to devote himself to intensive weight training and the keto diet, first as a beginner, and later at a professional level. When he decided that he wanted to pass on his experiences and knowledge to other people, he approached me to create his own blog site, where he would write articles and get feedback from others following his lifestyle. He also devotes himself to his Facebook group and affiliate marketing, where he recommends products that he has tried himself and believes can help other people, and he wanted to link these all together on his blog site.


Not having a clear idea of ​​how the blog should look and how it should be presented, Peter asked me to set a visual style suitable to the target group and to create materials for his Facebook group, including graphics for posts. After talking about the direction of his blog and future business opportunites, I realized this project shouldgrow from being simply a blog to being an affiliate business generating income for Peter.


I created a simple blog-type site with a home page, common post design and a category archive page. Also included was an author biography page and contact information.

After a few months, as mentioned above, we expanded the website with redesigned home page and for affiliated products and reviews. Since I had planned for this possibility from the beginning, adding more pages or page blocks was not an issue in the overall structure and information flow on the site.

Understanding the user

Summary of user research

For this project, I conducted user interviews (problem space) and user journeys to understand the users that the blog was designed for and their needs. A primary user group identified through research were adults over 40 who have difficulties losing or maintaining their weight due to slowing metabolism and overall well-being.

I created two personas to better understand users‘ needs and had them in mind while creating the product for now and for any improvements in the future.

Pain points

No time to eat a balanced diet

Our users are busy people who do not seem to find time to eat a balanced diet. They eat on the go, often unhealthy food, and then they overeat when they get home in the evening. 

Lack of motivation

The users claim they struggle to motivate themselves to change their lifestyle, which means eating a healthy diet and doing some regular exercise.

Low energy levels

Users say they feel tired and have no energy to do some physical activity after a long day at work, or due to their family schedule. 

Health-related issues

Users claim they struggle with physical and mental health. Apart from overall  fatigue, they often live in pain (muscle, joints, internal organs). 

Persona 1: Thomas

Thomas is a busy manager who wants to lose weight and improve his overall lifestyle, so he has more energy and can spend quality time with his wife and two kids.

User persona 1 Thomas

Persona 2: Maya

Maya is a grandmother to two kids, and is looking to change her diet to improve her health and can then spend more time with them. 

User persona 2 Maya

Starting the design

Initial draft

I prepared wireframes for 3 pages; a blog page with featured posts, categories and listed posts, a post page with related posts and room for ads, and an about page introducing services Peter offers and his story, including pictures from before and after he changed his lifestyle. At the bottom of each page is a section with Facebook feed and more room for ads.
Initial wireframe

Initial wireframe for the blogger

Wireframe for an expanded website

When Peters services expanded, I added a home page with his services, blog post categories, latest blog posts, downloadable ebook, and featured products. Another page was added for all his products, where users could find the product recommendations and reviews, and trending blog posts. 

Extended wireframe

Extended wireframe as the blogger’s website expands

Visual design

Typography and colors

I chose the combination of Montserrat for headings and Open Sans for text, to ensure a modern look and readability, especially in blog posts. For graphic designs, I chose League Spartan (similar to Montserrat) and Jonathan for easy recognition of the brand. As Jonathan is not as easy to read, it will be used just for decoration or up to 3-word informational texts.

Typography set of fonts

Peter’s typography visualization






Mood and imagery

I wanted to achieve a modern, energetic impression, which would be achieved mainly through typography and color choice. For images, I was supplied with branded pictures, which I used extensively. Main imagery content would be created by featured images for each blog post and additional pictures with the post. I made sure Peter was informed from which sources he could use images to ensure he complied with copyrights.


Final design 

I added visual design, copy, and images to the wireframes I had prepared and created a clean website that was easy to navigate. 

Final design bloggers website

Mockup of the final design of the blogger’s website

Responsive views

All pages were optimized for mobile devices, too. 

Mobile view bloggers website

Mockup of the final design on mobile devices of the blogger’s website

Graphic design

Digital and print graphic

I created a logo in light and dark mode, LinkedIn profile graphics, set of FB posts, e-book and business cards. All in a consistent design, supporting Peter’s brand. 

Visualization of Peters logo

Logo fo the blogger’s website

LinkedIn profile graphics

LinkedIn profile

Facebook posts design

Facebook posts design

Ebook design

Ebook design

Business cards design

Business cards

What does the client say

“Working with Petra is great. I contacted her a while ago because I needed to make a website and graphics for FB. Not only did she make me a website that was even better than I expected, but she initially presented several options for how the website could expand in the future. And that’s exactly what happened when I started affiliate marketing after a few months. Because it was all thought through in advance, adding new pages, sections and content took very little time. Petra definitely knows what she is doing. He is a true strategist and an incredibly creative person who you can be sure will get the best for your project.”

Peter Ivanco, blogger

What did I learn

Multiple font combinations

The main challenge was to come up with the combination of fonts for the website, ensuring readability for the blog while at the same time be attractive for social media. The resulting combinations work and are well rated by the users of the website.

Writing training

I prepared a training session for Peter in order to provide him knowledge for blog posts writing. Not only the structure and content planning, but also technical stuff such as alternative descriptions and sizing of images and basic search engine optimization.

Next steps

What I recommend to do in the future


Conduct usability study or survey to see if the language is understandable and not too academic for the audience.

Content strategy based on data

Analyse traffic on the website and create content plan reflecting topics that the users read the most.

On-page SEO revision

Check all on-page parameters and optimize factors that impact search engines and accessibility. 

Adjust the design to the current needs

As every business evolves, I recommend to review the business goals & needs in a year’s time and adjust the design based on any findings.