Increasing website engagement through design
This project was a complete redesign of my self-improvement website Mind of Steel. What started as a simple blog grew to thousands of readers and offered the potential for future growth.
To prepare for future business goals, this redesign aimed to optimize the entire site and introduce new features that would increase user engagement.
Project Overview
Why This Case Study?
This was a major overhaul that relied heavily on research and analyzing the competition. Building this website also required me to do things outside of my comfort zone, like coding in PHP/MySQL and developing custom solutions.
My role
Since I was the only person working on this project, I was responsible for User Research, UX/UI Design, Web Development, Copywriting, Marketing, Branding and Quality Assurance.
Why This Case Study?
This was a major overhaul that relied heavily on research and analyzing the competition. Building this website also required me to do things outside of my comfort zone, like coding in PHP/MySQL and developing custom solutions.
Challenges
- Deciding on the right strategy. With so many ways to accomplish the same goal, I had to make some harsh decisions on which features make the cut and which of them are a priority.
- Implementing custom solutions. Even though I was familiar with basic programming, this project required me to implement custom solutions which I wasn’t sure how to do.
- Understanding user behavior. Filtering relevant information was challenging. Users often can’t properly explain what they want, so I had to rely on a combination of data inputs.
1 : Research and User Analysis
Understanding users’ behavior, motivation and goals.
Goals of This Project
This project had several primary goals. Each of these goals needed to be measurable so I could track whether my changes had an effect. This is how I decided to measure each goal:
- More visitors. Continual increase in the number of new users that is organic and non-promotional (measured by Google Analytics).
- Better engagement. Increase in the number of email subscribers, social media shares, personal emails and user-generated content.
- Brand recognition. Having users differentiate the logo, name and content of Mind of Steel from similar niche websites.
User Research
To gain a deeper understanding of my users, I relied on the following methods.
- Surveys. Email subscribers were asked to answer a series of questions and provide explanations for their answers via Typeform.
- User Interviews. Personal email correspondence with the most active users about their experience with the site and how that experience could be improved (content, features, ease of use, etc.)
- Website analytics. Various metrics from Google Analytics about the performance of the site, as well as analytics about user engagement from email subscribers.
- Heatmaps and behavior analytics. I used Hotjar to create heatmaps of the most popular pages and record live user interactions with the site (tracks scrolls, clicks and time on page).
- A/B testing. Tested different design patterns, website layout and copy.
Target Audience
Based on data gathered from these methods, I narrowed down my target audience to:
- People aged 18-35 who live in the USA
- Use desktop and mobile devices equally
- Want to solve a specific problem in their life
- Engage content only if it appeals to them personally
- Don’t care a lot about the design of the website
- They want to see that somebody else knows what they’re going through
- Give higher value to fact-based articles than fluff content
Market Research
The overarching category of Mind of Steel is self-improvement. However, that category allows for a lot of niches. To differentiate Mind of Steel from the competition, I conducted a comparative analysis of similar websites.
My goal was to identify what makes those websites popular and to see what I could bring to the users that other websites lack — at least in a better way.
- Mark Manson — Similar writing style and topics. Very powerful engagement with the readers. Offers a lot of exclusive content for paid subscribers.
- NerdFitness — Main focus is on building a community. Trust is built through honesty and being open about shortcomings, so their target audience feels like they belong to the same group.
- Wait But Why — Articles explain complicated things in a simply. A big focus is put on being fun and relatable.
- Tim Ferris — Broad spectrum of topics. Detailed case studies about top performers and achieving above-average results. Very powerful interaction with the audience.
- Lifehack — A vast depository for self-improvement information. Aims to provide solutions to all self-improvement problems their readers might get. It is only meant to be a network and bigger than just a personal blog.
My own blog and content include elements from all of these sites. Moving forward, I had to determine which of these elements I will put the most focus on. Based on user research, I concluded:
- Strong advice with personal relatability (remains the same)
- Build a community people can feel they belong to
- Focus on providing solutions rather than blogging about yourself
- Explain complicated things in simple, easy-to-understand ways
Impact on design
This user research influenced the design of the website in the following ways:
- The front and center of the design must be content.
- Every page needs to have a clear call to action (CTA).
- Options for sharing and commenting need to be more prominent.
- Pages need to be interconnected. Almost every page needs to be accessed from multiple parts of the site.
- Allow users to generate more content and interact with each other.
- Make certain parts of the site accessible only to registered users.
2 : Building Website Structure
Creating a concept for the website based on information from the research phase.
Information Architecture
The first part of building a new concept was outlining the information I wanted to include on the site. Taking into account everything I learned from the research phase, I created a sitemap that would showcase different parts of the site I needed to create.
The next step was determining the information that will be placed on each page. I started by analyzing how each page fits into the goals of this project and then determined the design from there.
Here are examples for some of these pages:
Home Page
Type: Home page.
Target audience: New visitors who want to learn what the site is about.
Goal: Present highlights of the site and what Mind of Steel represents.
- What? What the website is about.
- How? Benefits of the site for the reader.
- Who? Who’s behind it, is it credible.
- Social proof? Social media, testimonials.
- CTA? Subscribe to the email list, read articles.
About Page
Type: Single page.
Target audience: All visitors who want to find out more about the site.
- New visitors through SEO
- Readers who want more information
Goal: Make Mind of Steel seem like a credible and trustworthy source of information.
- Who? About the founder, what makes him trustworthy.
- History? Mind of Steel origin, values and goals.
- How? How can this site help the reader.
- Social proof? The team, testimonials, social media.
- CTA? Read articles, subscribe, follow on social media.
Free Ebook Page
Type: Landing page.
Target audience: New visitors (not on email list).
Goal: Explain why the reader should subscribe for the free ebook.
- What? About the Official Handbook
- How? Benefits of the site for the reader
- Who? Who’s behind it, is it credible.
- Social proof? Testimonials, number of downloads.
- CTA? Subscribe to download the ebook.
Choosing Layout and Plugins
By this point, I had a general idea of how I wanted the website to look: clean design, easy navigation, focus on content. But a lot of the features I wanted to build (user profiles, member forum, restricted content) required me to plan ahead. After all, I wasn’t a developer.
I researched the themes and plugins I would use for these features, so I could test whether they work together and then build a concept around them:
- WordPress for the website core.
- Cedar Theme as the basis for the design of the site.
- Sabai Discuss plugin for creating a Q&A-style portal for discussions.
- Ultimate Member plugin for creating user profiles and directories.
Creating Wireframes and Prototypes
Once I had all the necessary information, I started sketching out the concept in several phases. First were the paper sketches, where I iterated heavily. Second were wireframes, which were used to communicate the layout and the feel of the website.
Interactive Prototype
The final step in concept building was creating an interactive prototype in InVision. It would allow testing the natural use of the website with a selected group of users.
You can view the complete prototype of the website below (desktop only):
3 : Design and Content
Creating the visual style for the new brand and website.
Creating the Logo
To distinguish Mind of Steel as a recognizable brand, I needed a logo that captures its values.
Research showed that the term “Mind of Steel” makes people feel inspired and strong, which was my goal when I chose it for my brand name. I wanted to show those same emotions through the logo.
I went through a lot of iterations, none of them seemed to be the right fit. They were either too generic or too confusing.
Eventually, I landed on the idea of a brain filled with lightning bolts, which doubles as a symbolic representation of the structure of the brain. I also added a light gradient to illustrate the reflection of steel.
Here is how the final logo turned out:
Visual Style
When it came to the visual style of the website, I wanted to keep it very simple.
- Strong, powerful titles and headings
- Typography optimized for long-form content
- Accent colors that clearly stand out
- Hero blocks with eye-catching visual imagery
The main focus needed to be on the content and CTAs needs to be clearly distinguishable. Here is the final visual style guide I used for the website:
For hero images, I organized a collaborative effort with a friend of mine, whose photography style matched the look and feel I was going for.
With permission, I used his photos for most pages and articles, with the rest coming from Flickr, Unsplash or Pixabay (with proper attributions).
Copywriting & SEO
Initial user survey showed that the one area that didn’t need a lot of improvement was the actual content (articles) published on the site.
Since over 90% of traffic comes directly through search engines, this was a good sign.
However, if I wanted to increase the traffic to my website, I had to expand my SEO efforts as well. So I performed a complete site audit to identify pages and keywords that were the most effective, as well as what I could improve.
Copywriting was an essential part of this redesign. Whereas before I didn’t place a high focus on website copy, the new website was supposed to be properly optimized for turning visitors into readers and subscribers.
To achieve this, I separated every page into several blocks. After filling out all the content, I sent it to several proofreaders and marketers to suggest improvements:
4 : Development
This process included building the website based on the concept.
Development Setup
During this project, modern WordPress page builders like Elementor were just beginning to hit the scene. So this is the way I approached website development:
- Child theme for customizations
- Visual changes through HTML and CSS
- Dynamic changes through editing (child) theme PHP files
- Minor plugins for plug-and-play solutions
- Building on top of plugin files for custom solutions
Custom Elements
Even though the main design was based on the capabilities and limitations of my chosen theme, I still wanted to create specific layouts to showcase my content.
To build my own layouts, I created custom templates and code snippets (shortcodes), which would allow me to create the design directly in the WordPress editor.
Custom Solutions
For building things like user profiles and discussion forums, I mainly relied on the plugins I selected in the beginning.
This was the most challenging part of the project because each plugin had a different code structure and a different design. Being a non-programmer, bringing my concept to life was no easy feat.
It took learning new things and familiarizing myself more with PHP/MySQL programming, but I finally managed to achieve the results I was looking for.
Quality Assurance
During the entire process, I conducted heavy testing by myself, with users and friends. I tested the concept, the design and the final functionality. Each new feature was tested on multiple devices and browsers before proceeding.
Once the website was completed, I conducted detailed functional and stability testing before releasing it live.
For the “Community” aspect of the site (user registration, profiles and forums), I also conducted testing with a select group of early adopters.
5 : Outcome and Results
Here is how the project turned out.
Parallel to the development of the website, I engaged in several marketing strategies to promote the redesign. This included building hype through email marketing by using images like these:
Measuring Goals
Based on established parameters, I tracked the success of the defined goals. Here are the results a year after the new design was published:
- More visitors. In the following year, the website got about 45% more visitors, more sessions and more pages per session.
- Better engagement. Even though the number of comments and user-generated content wasn’t high, there was a big increase in the number of social shares, email subscribers and personal emails sent.
- Brand recognition. The new logo was well-received by users and the website started ranking higher for the term “Mind of Steel” (occupying the first 4-5 spots on Google).
Lessons Learned
- Building a community. Even though the website itself was a wild success, the Community areas didn’t end up being as popular as I expected. Even though users wanted to not feel alone, they became more engaged when they communicated with me personally.
- A person can be a brand. The brand efforts achieved their goals, but I realized that users see me as an integral part of the Mind of Steel brand. Adding a more personal touch in later iterations increased conversion.
- Simplicity in complexity. I spend too much time on defining and redefining the scope of the project. As a result, the concept phase took much longer than it needed. Next time, I would build the essential scope first and then think about expanding it if needed.
- Imitation is a double-edged sword. With my design, I tried to copy best practices from my competition. However, in doing so, I sometimes lost track of what makes me different from them in the first place.
This was one of the biggest and most complex projects I’ve been involved in. I had to wear a lot of hats (considering I kept pulling my hair out) but it was one of the best learning experiences I’ve undertaken.
"Managing Filip was surprisingly easy because of his work ethic, passion for learning and working well with a team"
His capacity to absorb knowledge and connect things to make new conclusions is surprising. While creating concepts he showed a high level of independence and responsibility. He personally tested products at the end of each sprint, thus assuring the quality and fulfillment of the approved concept.
