– Google Forms user survey.
– User experience (UX) wireframe designs using UXPin.
– User interface (UI) Adobe Photoshop designs.
– Site build using WordPress and Divi.
– Custom CSS and jQuery.
THE CHALLENGE – Raise the bar
My task was to carry out a complete redesign that would reorganize and present content in a way that addressed user interests, and develop a visual identity that was both unique and engaging.
The site before the redesign
THE METHOD – Let’s get quizzical
The user research survey
“We learnt from the replies we received, we had identified the right people but not the right priorities.”
To test whether this was an accurate assumption, I created a survey that gathered information about people’s gender, age, exercise habits and what they were interested in reading about.
We learnt from the replies we received we had identified the right people but not the right priorities. They were more interested in useful tips and information rather than ethical discussions.
Handily for us, they provided a number of suggestions about what they would like to read about. This helped us to narrow down four categories into which blogposts could be organized: Strength Training, 360 Health (a useful catch-all category to cover other sports), Fitness Fashion and Nutrition.
Because the site is a blog, I suggested creating an About section, as people would want to know something about the author and why they should read her articles.
Finally, as the client had mentioned potentially using the site to sell products at a later date, I suggested creating a newsletter in order to help sustain interest and keep in touch with her readers and added a Newsletter page to the sitemap.
Lo-fi wireframe of the homepage
It seemed likely that a lot of users would come to the site via searches that pointed to individual posts or category pages. I wanted to make sure they understood the site’s purpose, even if they didn’t arrive there via the home page. To do this, I started each category page with a slider containing images, a tagline describing the site’s puprose and a button that took them directly to the latest content.
Instead, I created a section on the home page to allow for more details about the author and also to draw people towards the homepage and explore other blog posts.
When it came to the newsletter section, I was keen to find a balance between ensuring people knew about the sign-up form and not intruding too much into their reading experience. After experimenting with the idea of having a separate landing page, I decided the best compromise between these two aims was to add the signup form at the bottom of each category page.
With the wireframe of the site completed, it was time to start thinking about the user interface design.
I began by looking at other similar sites to see how others had approached this type of site. I was impressed by one site in particular, gabstrength.com, which used a cool, clean black and white look.
Inspiration from gabstrength.com
I wanted to emulate the subtle flashes of bright colours and movement they use when elements are hovered over. I feel they keep the user interested in engaging with the content and help to illustrate that clicking will take them to the full version of an article.
Colour and movement ideas from refinery29.com
THE RESULT – Witness the fitness
To make it stand out further, I decided to break up the traditional straight lines between each page section. Instead, I used jagged edges and shading to give a fresher, more contemporary look.
My choice of fonts helped to create the sense the content is authoritative while also ensuring it remained easily readable. To improve readability further, I kept lines of text short, taking up only 80% of the line space, making it easier for readers to quickly parse text.
The final result
Interactive blog preview columns
I also realized that seemingly small choices about colour, font and shape can add up to a lot in creating a site with its own distinct character.