Increasing website engagement through design

Increasing user interaction through improved user experience 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 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 a 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 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 share, 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 Typerform.
  • 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.
Some results from conducting user surveys.

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.
  • NerdFitnessMain 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 simple way. Big focus is put on being fun and relatable.
  • Tim FerrisBroad spectrum of topics. Detailed case studies about top performers and achieving above-average results. Very powerful interaction with the audience.
  • LifehackA 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 website 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.

  1. What? What the website is about.
  2. How? Benefits of the site for the reader.
  3. Who? Who’s behind it, is it credible.
  4. Social proof? Social media, testimonials.
  5. CTA? Subscribe to 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.

  1. Who? All about Phil, what makes him trustworthy.
  2. History? Mind of Steel origin, values and goals.
  3. How? How can this site help the reader.
  4. Social proof? The team, testimonials, social media.
  5. 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.

  1. What? About the Official Handbook
  2. How? Benefits of the site for the reader
  3. Who? Who’s behind it, is it credible.
  4. Social proof? Testimonials, number of downloads.
  5. 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 and 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: 

Homepage and Single Post
User Profile

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. Highly recommended for UX and QA related positions.

Mario vagner
Worked as Project Manager and my immediate superior