PROJECT NAME:

Sweatpants Mofo

SKILLS USED:
– 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

Sweatpants Mofo is a fitness blog aiming to encourage more women into the weight room and cast an irreverent eye over fitness industry practices. However, the client was unhappy with the look and scope of her existing site and wanted a more focused site that stood out from the competition. She also raised the possibility of using it as a base to build a brand through which she could sell products at a later point.

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.”

I started by brainstorming with the client about the type of user she thought would be interested in the site. This turned out to be women aged 25-40, who do strength training on a casual basis and are interested in changing perceptions of female fitness.

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.

Site map

Next, I used these four categories to create a sitemap, giving each one a separate page. I felt it was important to have a homepage that gave an overview of the latest posts, regardless of which category they fell under, so users could have a starting point to explore the other content available.

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

With the Sitemap done, it was time to start sketching.

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.

It was important to have an about section as users would naturally be curious about the author. I initially considered putting this in the footer section but eventually decided this would clutter the design and only allow a small amount of text for the client to introduce themselves.

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 was also inspired by refinery29.com, especially their use of serif font titles which not only suggest authority but help with readability.

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

To build the site I used WordPress and the Divi plugin, as this combo provided me with all the elements I would need pre-built from the start but still allowed for a high level of customization later.

THE RESULT – Witness the fitness

My final design blends old-fashoned black and white coolness with flashes of pink. A combination that gives the site a strong and unique visual identity.

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

With the help of some jQuery and CSS tinkering, I was able to create text boxes that moved when hovered over, giving the site a more tactile and engaging feel.

Interactive blog preview columns

Through this project, I learnt about the importance of consulting users before deciding on the layout of content. Their preferences play a crucial role in determining what will work and what won’t.

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.