Background
The Kriyative Kaleidoscope is my personal art and craft blog hosted in blogger with DIY tutorials on clay jewelry making, mixed media layout, and recycling crafts. The blog is successful with 150+ posts and over 5000 monthly visitors till 2018.
Problem
Due to my busy life and studies, I discontinued posting after 2018. When I wanted to restart blogging again, I realized that the site looks outdated, and there is a significant drop in the percentage of monthly visitors.
In short, I want to use my UX design skills to improve the user experience of my personal blog.
Existing Interface of Kriyative Kaleidoscope Blog
The high-level goals of this project are
Navigation: Understand the pain points in the current design and improve the blog’s, overall user experience,
and navigation.
and navigation.
Content discoverability: Help readers find the right content as there are plans to add new categories to the blog.
Rebrand: Implement a fresh, modern, clean visual design.
Resources/Tools
Figma, Blogger ( CMS), Google Analytics, HTML & CSS, Adobe Illustrator, ZOOM, Notion
Target Audience
1. New followers
Craft Enthusiasts: Regular crafters who dive deeper into the posts to know the process.
Occasional Crafters: Users who craft occasionally and bookmark or save for future reference. They don’t have a preferred category and like everything crafty.
Craft Enthusiasts: Regular crafters who dive deeper into the posts to know the process.
Occasional Crafters: Users who craft occasionally and bookmark or save for future reference. They don’t have a preferred category and like everything crafty.
2. Existing Followers
They are familiar with the blog and usually have a preferred category of posts that they check.
They are familiar with the blog and usually have a preferred category of posts that they check.
User - Testing of the current design
I conducted interviews with 2 regular followers and 1 new user of the blog to discover the usability issues and pain points in the current design.
I asked the users to explore the current version of the blog and think aloud as they navigate through every part of the site. Apart from covering user problems, it was important to address the usability problems in the current interface.
Here are some of the issues based on the interviews and usability analysis:
1. Too many items in the navigation bar:
The navigation bar looks cluttered with a lot of items. Users have a short memory and can hold a maximum of 7 items. With fewer items, they will be able to navigate easily. Since the craft gallery and craft tutorials show similar content, there is no need for two separate pages.
Takeaway: The navigation bar has to be simplified and must include only the most important categories.
2. Excessive Scrolling:
With plenty of text on the home page, users get frustrated to scroll through the entire post to see another one.
This scroll fatigue overwhelms the user and make them leave the site quickly. Skipping around posts and browsing, in general, is difficult.
This scroll fatigue overwhelms the user and make them leave the site quickly. Skipping around posts and browsing, in general, is difficult.
Takeaway: The homepage must have an intuitive layout that easily directs the visitors to other posts.
3. Logo/Header looks outdated:
The header plays an important role in setting the tone of the website. The header has a lot of colors and looks pixelated. This will cause visual fatigue to the users.
Takeaway: The header/logo should be simple and minimalistic and must set an inviting tone for the blog.
Takeaway: The header/logo should be simple and minimalistic and must set an inviting tone for the blog.
4. Tabs on the sidebar are distracting:
There is no proper hierarchy in the content placed on the sidebars. The Sidebar should highlight key information about the popular posts and should serve as an anchor for increasing engagement.
Takeaway: The sidebar should serve as an anchor point to engage users by providing related content and a clear CTA.
5. The purpose of the blog is not clear:
The purpose of this site is not clear when a new user lands on this blog for the first time. I have only 10 seconds to engage and impress a new visitor, so the site’s intentions and its content should be clear and convincing.
Takeaway: The header should hint the users about the purpose of the blog and there should be a short description in the sidebar about the different categories present in the blog.
Quantitative Analysis - Understanding Data
Knowing how the users are navigating through the site will be helpful to make informed decisions.
Overall blog visits
The percentage of views dropped down by 60% when the blog was last active in 2018. This indicates that the blog failed to retain the engagement of its users after 2017.
Top viewed posts:
Identifying the real traffic drivers helped me to analyze the topics and categories people are more interested in. As seen in the below image the most number of viewership is for jewelry-making tutorials.
Referrers:
Most of the traffic comes from Google and therefore it is important to know which search terms brought them to my blog. I discovered that most searched keywords are terracotta jewelry making, jewelry set, and altered art.
Persona Analysis / Scenarios
Based on the article by Amanda Dyer from landslidecreative, I categorized my personas into three primary groups to plan the organization and design of the blog.
I defined their website goals and what would each of them gain from visiting my blog.
I defined their website goals and what would each of them gain from visiting my blog.
1. Skimmers want to find the information they need and get out as quickly as possible.
2. Swimmers will go a little deeper and browse more of the site.
3. Divers want to take it all in and spend time exploring.
What skimmers like Dolly would like to see?
1. Proper categorization of projects based on topics
2. Easy to find contact details
2. Easy navigation and clear headlines.
3. Grouping the most searched categories by labels
4. Include search bar
1. Proper categorization of projects based on topics
2. Easy to find contact details
2. Easy navigation and clear headlines.
3. Grouping the most searched categories by labels
4. Include search bar
What swimmers like Pooja would like to see?
1. Emphasize the most compelling content to increase the engagement
2. The most visited pages should be one click away.
3. Feature related/ relevant content in the sidebar and at the end of each post
1. Emphasize the most compelling content to increase the engagement
2. The most visited pages should be one click away.
3. Feature related/ relevant content in the sidebar and at the end of each post
What Divers like Mary would like to see?
1.Contents of the blog are organized logically.
2. Use short copy and more images to enhance readability.
3. Provide social sharing options.
1.Contents of the blog are organized logically.
2. Use short copy and more images to enhance readability.
3. Provide social sharing options.
Synthesis and Analysis:
In addition to user testing and data analysis, I also researched a lot about the best practices in designing a blog. I combined all of my findings and analyzed them using affinity map. (Click the image to enlarge)
Affinity Mapping
Grouping the affinity notes based on common themes
What I learned from research phase? - Main takeaways
1. The navigation bar has to be simplified.
2. Home page must include a number of posts with post image, summary.
3. Sidebar should be clutter free and should act as an anchor point for driving engagement.
4. The visual design should be clean and inviting.
Wireframes - Exploring different layouts
Inspired by my favorite blogs and websites, I sketched various interfaces that solved the above issues.
After reviewing the sketches with my friends, I decided to proceed with the Sketch #1 as it combines the best features of the old design as well as address the pain points found in the research phase.
1. Sketch #1 contains the sidebar which helps the visitor to navigate other information related to the blog and it also enhances the overall layout design of the web page.
2. In Sketch #1, posts are displayed with a big bold image and a summary along with social sharing options.
Building the site
Since the default blogger themes allow limited customization I decided to download a free third-party template that matched the wireframe.
Challenge: It was challenging to find a free template from a reliable source.
Some of the issues I encountered were:
1. The free version was not editable and have to get paid version to unlock certain features.
2. The blog will redirect itself to the parent website from where the template was downloaded.
3. The templates are not responsive across all devices.
Solution: Learning to code
After several days of browsing, I found a clean and modern template, but it didn’t have all the features that I was looking for. To match the downloaded template to the wireframes I decided to edit the code. Hence I learned basic HTML and CSS through online courses. I utilized the native template behavior wherever possible but also set clear rules regarding navigation and discoverability of content. Being a first-time coder I was not able to develop all of the features. So I decided to create a minimum viable product that addresses the major pain points.
Final design
A Focused Blog : Deciding the main categories of the Home page
I had a lot of stuff on my blog ranging from greeting cards and altered art to clay miniatures and papercrafts. I needed to slim it down and cluster it into categories so that it will be easy for me to create future posts as well as effortless for the users to browse. From the site analytics, I understood the most traffic generating categories are terracotta jewelry making, jewelry making tutorials, DIY, altered art, recycle crafts etc.
I found that a lot of posts did not have proper tags ( keywords) so when a user clicks a label they do not find the right content. I identified six-seven main labels and tagged all the 150 + posts in one of the above categories.
I found that a lot of posts did not have proper tags ( keywords) so when a user clicks a label they do not find the right content. I identified six-seven main labels and tagged all the 150 + posts in one of the above categories.
Navigation Bar
Main Posts section
Sidebar
My Story Page
Testing the performance
I tested the redesign version using Google’s Lighthouse Audits test. The results were promising but had issues, particularly with the image optimization.
I fixed a few of the issues like improving accessibility, compressing images, and deleting the unused CSS. I am continuously refining the code and making tweaks to the design, but I am happy that the redesigned version is already much more effective in conveying my identity.
Metrics post-redesign
After the redesign was complete in 2022 I posted in facebook about the revamped look of the blog. I didn't post anything new and still the last post is from 2018.
