PROJECT OVERVIEW
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.
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
My blog is an outlet where I document my creative journey as a crafter, jewelry designer, and now a UX professional. 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. These days I am more involved in designing branding and digital interfaces and hence I wanted my blog to reflect that identity.
My blog is an outlet where I document my creative journey as a crafter, jewelry designer, and now a UX professional. 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. These days I am more involved in designing branding and digital interfaces and hence I wanted my blog to reflect that identity.
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.
Content discoverability: Help readers find the right content as there are plans to add new categories to the blog.
Responsive website: Nowadays, a lot of browsing and reading happens on mobile. Hence the blog needs to be responsive across the devices to attract new users and followers.
Rebrand: Implement a fresh, modern, clean visual design.
What did I do?
I redesigned the blog and improved the overall user experience by following a research-driven process.
I analyzed the site’s analytics to help me with my design decisions.
Finally, I implemented the redesign by coding in HTML and CSS.
I analyzed the site’s analytics to help me with my design decisions.
Finally, I implemented the redesign by coding in HTML and CSS.
DESIGN OUTCOME
Improved Navigation & Content Discoverability
Homepage features a simplified global navigation, grouped into categories based on the most searched keywords.
Homepage features a simplified global navigation, grouped into categories based on the most searched keywords.
Clean and modern design
There is a warm introduction in the home page that informs the purpose of the blog. The home page contains thumbnails of the recent posts with the option to read further. In the sidebar the users can find all the popular posts and option to follow/subscribe.
Resources & Constraints
Budget
Considering this is a personal project, I want to challenge myself and redesign the website with the existing templates and didn’t want to spend money on templates or hosting.
Considering this is a personal project, I want to challenge myself and redesign the website with the existing templates and didn’t want to spend money on templates or hosting.
Timeline
Being a passion project, I didn’t want this to be sidelined in the hustle of job hunts. So, I set myself a deadline of 10 weeks and held some of my friends accountable.
Being a passion project, I didn’t want this to be sidelined in the hustle of job hunts. So, I set myself a deadline of 10 weeks and held some of my friends accountable.
Resources/Tools
Figma, Blogger ( CMS), Google Analytics, HTML & CSS, Adobe Illustrator, ZOOM, Notion, Protopie
Figma, Blogger ( CMS), Google Analytics, HTML & CSS, Adobe Illustrator, ZOOM, Notion, Protopie
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.
Process
1. DISCOVER
part 1
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.
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.
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.
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.
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.
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.
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.
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.
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.
part 2
Quantitative Analysis - Understanding Data
Knowing how the users are navigating through the site will be helpful to make informed decisions.
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.
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.
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.
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.
2. Define
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)
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
Key Findings
Grouping the affinity notes based on common themes
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.
3. DESIGN
WIREFRAMES - EXPLORING DIFFERENT LAYOUTS
Inspired by my favorite blogs and websites, I sketched various interfaces that solved the above issues.
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.
DESIGN SYSTEM
1. The main aim of rebranding is to create a clean and modern look and feel. The visual elements have to be warm and inviting to the
target users.
target users.
2. The pink color is chosen as the primary brand color as it signifies a fun, calming, and feminine look which is exactly what I wanted to convey through my blog posts.
3. To give the blog a clean look and improve the readability the “Lato” typeface is used.
4. A basic design system was created in advance to help me design fast and maintain consistency. It also helped me to code the visual
design using CSS.
design using CSS.
4. DELIVER
Implementation
Why didn’t I migrate my blog to another CMS?
I thought transferring my website to another CMS like WordPress or Squarespace would give me better templates and much more editing capabilities to redesign my blog. But after reading this article by Valentyna Tysiachna, I understood the risk of losing my SEO position and follower base and the tedious workaround to fix them. Hence I decided to stick with the blogger CMS.
Why didn’t I migrate my blog to another CMS?
I thought transferring my website to another CMS like WordPress or Squarespace would give me better templates and much more editing capabilities to redesign my blog. But after reading this article by Valentyna Tysiachna, I understood the risk of losing my SEO position and follower base and the tedious workaround to fix them. Hence I decided to stick with the blogger CMS.
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.
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.
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
The Big Picture
Diving to Details
1. 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.
2. Navigation Bar
3. Main Posts section
4. Sidebar
5. My Story Page
6. Responsive Design
Although I initially tackled this project desktop - first, I wanted the blog to look spectacular on all sizes and devices. Unfortunately, the template didn’t support responsive viewport so I manually added the code to make sure the redesigned version looked ace on every viewport.
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 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.
CONCLUSION
LESSONS LEARNED
1. Implement the design process:
This project allowed me to use my UX design skills in a
real-world scenario.
This project allowed me to use my UX design skills in a
real-world scenario.
3. Challenging myself to code:
This gave me the understanding to look at design beyond wireframes. Learning the basics of coding can lead to a more realistic design approach.
This gave me the understanding to look at design beyond wireframes. Learning the basics of coding can lead to a more realistic design approach.
2. Flexible Design:
Through this project, I understood that I had to be flexible to amend my process/plans based on the user’s needs and constraints.
Through this project, I understood that I had to be flexible to amend my process/plans based on the user’s needs and constraints.
4. Good Performance is Good Design:
Web performance is the key to a good user experience. I learned that page load times and how fast the site feels should be taken into consideration while making design decisions.
Web performance is the key to a good user experience. I learned that page load times and how fast the site feels should be taken into consideration while making design decisions.
NEXT STEPS
Conduct user testing:
User testing is necessary to understand whether the users can easily find the right content in the blog’s redesigned version.
User testing is necessary to understand whether the users can easily find the right content in the blog’s redesigned version.
Accessible Design:
Lighthouse audit revealed issues related to accessibility like low contrast text and alt text for images. I am working on creating a more inclusive experience for visually impaired users.
Lighthouse audit revealed issues related to accessibility like low contrast text and alt text for images. I am working on creating a more inclusive experience for visually impaired users.
Track the metrics in real-time:
The next step is to start posting in the blog and tracking the percentage viewership and bounce rates.
The next step is to start posting in the blog and tracking the percentage viewership and bounce rates.
Improve the design for mobile screens:
Right now the web version is available for mobile screens. I’d like to revisit the mobile experience, troubleshoot issues, and develop a separate theme for smaller screens.
Right now the web version is available for mobile screens. I’d like to revisit the mobile experience, troubleshoot issues, and develop a separate theme for smaller screens.