Case study
Blogger’s Website and Graphic design
Project Overview
Role
Website Designer
Graphic Designer
Duration
Feb 2021 – Apr 2021
client
Peter Ivanco
CMS
WordPress
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.
Challenge
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.
Solution
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.
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.
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.
Starting the design
Initial draft
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 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.
Peter’s typography visualization
#000000
#666666
#ededed
#e0d1cf
#e02b20
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.
Website
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.
Mockup of the final design of the blogger’s website
Responsive views
All pages were optimized for mobile devices, too.
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.
Logo fo the blogger’s website
LinkedIn profile
Facebook posts design
Ebook 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
Research
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.