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.
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.
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.
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.
Understanding users’ behavior, motivation and goals.
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:
To gain a deeper understanding of my users, I relied on the following methods.
Based on data gathered from these methods, I narrowed down my target audience to:
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.
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:
This user research influenced the design of the website in the following ways:
Creating a concept for the website based on information from the research phase.
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:
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.
Type: Single page.
Target audience: All visitors who want to find out more about the site.
Goal: Make Mind of Steel seem like a credible and trustworthy source of information.
Type: Landing page.
Target audience: New visitors (not on email list).
Goal: Explain why the reader should subscribe for the free ebook.
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:
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.
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):
Creating the visual style for the new brand and website.
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:
When it came to the visual style of the website, I wanted to keep it very simple.
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).
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:
This process included building the website based on the concept.
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:
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.
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.
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.
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:
Based on established parameters, I tracked the success of the defined goals. Here are the results a year after the new design was published:
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.
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.
Let's work together
Like what you see? Want to join forces in creating great products? Get in touch with me by using the contact form below or email me directly.