Redesigning the Usabilla Blog

Client: Usabilla                    Platform: Web

 

To comply with my confidentiality agreement, I have omitted any contravening images, data, and information. 

For the sake of this case study, some items displayed here are re-interpretations of the source material.

 

 

The completed redesign, viewable at blog.usabilla.com

 

 

◆    ◆    ◆

 

 

The Challenge

 

The 'before' image

The Usabilla blog represents the bulk of Usabilla’s marketing activities; creating, curating, and sharing valuable UX content. By engaging interested readers, Usabilla’s products are promoted to potential customers - the UX community.

Unfortunately, the blog had many pitfalls that made it incapable of achieving its goals as effectively as possible: from poor mobile optimisation, to an ineffective user flow. 

To ensure I could work as effectively as possible in my position as Marketing manager, I had to ensure the blog did its job.

For the purpose of this case-study, I will focus predominantly on the desktop version of the redesign.

 


 

Why a redesign?

 

Page load times & mobile performance

Despite an update to a responsive design one year prior, the blog still performed poorly on mobile devices. Page load times hung around the 8 second mark for both mobile & desktop, and the page's responsive elements showed many bugs, usability, and interaction issues. On top of this, bounce rates were many magnitudes higher for mobile than they were for other devices, revealing an evident problem area.

The Analytics

Delving into the website's analytics, I could see issues with user session durations and related bounce rates. Clear correlation lie between the page load times and user sessions. It was evident that despite attracting a lot of traffic, much of this 'bounced' from the blog due to poor page performance

Listening  to user feedback

Usabilla’s main product offering is a popular user feedback tool called Usabilla for Websites. This allows visitors to leave feedback on specific elements of the webpage. Fortunately this had been running on the blog for the past year for promotional purposes, gifting many insights into our users needs & wants.

 

 

Understanding the blog's readers

 

Before any designing could take place, it was essential I understood precisely who was visiting the blog each week and what they were expecting to find. As the blog's chief writer I already had a level of communication with our audience so knew what they expected in terms of content & presentation. However, ensuring the site's design met these expectations was an entirely different kettle of fish. 

Using a mix of analytical data (Google Analytics) and on-website surveys (Usabilla for Websites), it was possible to identify 4 main user groups from which I could build personas to follow throughout the process.

 


The social UXer

A UXer dropping-by after discovering a link on their favourite social media site.


The subscriber

An existing fan of the blog who likes to follow each new article.


The potential customer

Interested in UX & research tools. Thinks Usabilla's products could be useful to them.


The customer

A customer of Usabilla who is already engaged with our product offering.

 

 

What challenges are we trying to solve?

 

The true start of the user-centered design process. From here I map each user to their challenges using a blog like Usabilla's - what are their needs? I'll then take these challenges and define solutions for each.

This allows me to identify precisely where our focuses lie within the redesign, and will prove invaluable when I later come to defining the redesign's requirements.

In order to identify these challenges, I used a mix of sources: 

  • User feedback provided by users to the usabilla blog via Usabilla for Websites.
  • User research (with no budget, I opted to ask our twitter followers, blog mailing list, and used on-site surveys on the existing blog.)
  • Relevant website analytics - though this doesn't provide a definite need, it provides evidence for issues raised elsewhere.

 

 

Requirements

 

Now that I understand the challenges and needs for each user, I can use the identified solutions to build a solid set of requirements for the redesign going forward. 

At this point I know the Blog has two main use cases; to encourage new visitors to subscribe and to encourage visitors to learn about, get using, and buy Usabilla's products.

By having defined requirements, we'll know precisely what aspects we needs to focus on and include in this redesign - ensuring the needs for each user and these use cases are catered for. 

Each use case has their own requirements, but these requirements also overlap with the other use case. In the end, the aim is to build a site which works as a whole so it is key that these requirements work off of each other. 

This scope includes mobile design and page loading times. Though not identified as specific challenges for our user groups, the analytical data proves that these are aspects of the design that require much focus.


 

 

Competitor Analysis

 

The concept of the UX blog isn't new: I knew very well that the majority of our readers also frequent similar UX and webdesign blogs such as UXPin and Smashing Magazine.

As an authority on the subject, we had to showcase our knowledge in our own design, something that wasn't currently the case. If we wanted to stay on that leading curve or even move beyond it, we'd have to know what our users were getting elsewhere, and how we could use this as inspiration through our own design.

With the main legwork of the process finished, this is a case of taking our requirements and seeing what facets of these other sites match up to what we need. Allowing us to use these facets as inspiration for our own design going forward.

 

 

 


Site Map - Optimizing an existing structure

 

Now that I understand the requirements for the redesign, and how we want to implement them, there's one final step to go before I can jump into the actual design. 

A big part of this problem that we're attempting to solve is the flow of users on the blog - retaining users and nudging them towards a conversion. In order to improve upon the blogs prior performance here, it is imperative I first understand how users move through and interact with the old blog. 

Once I know that, I can set about refining and optimising that flow to something which works better for ours and the user's needs.

Finally, a completed user flow provides a perfect starting point for wire-framing as it outlays the structure of the design. The wireframe then merely has to interpret that structure into a more visual form.

 

 

Wireframing

 

With the full system constructed 'on paper' through the user flow, building it into a wireframe is a relatively simple task. We know the structure and the requirements it contains, we just have to create a graphical representation of that user flow.

As we are basing this redesign on our existing system, the aim here is also to retain some sort of consistency. This ensures that our current users aren't suddenly perplexed by drastic changes. We're looking for an evolution, not necessarily a revolution to ensure visitors aren't shocked by a forced change.

A few of the design decisions:

  • Minimalised the options in the top-navigation based on Google Analytics data
  • Removed the carousel based on analytical data (it didn't produce any more clicks than a regular article) and user feedback displaying dislike for it,
  • Provided greater prominence to the 'subscribe' element inline with marketing needs and in a bid to produce more subscribers
  • Removed the old categories section based on user feedback perplexed at what the categories represented and due to a lack of clicks on the analytics. It took up too much space for its minimal usage
  • New most read article section in a bid to up visitor retention by allowing them further navigation options drawing them in with the hype of popularity.

 

 

Prototyping, Testing, Iterating, Testing...

 

Wireframes allow us a glance at how the final system will look, but are very one dimensional. They are nothing but a guessing game at whether the redesign would actually work, and provide little 'feel' for the system.

In order to discover whether my new ideas for the system are actually useful to our users, and to us, I up the fidelity - converting simple wireframes to multi-page prototypes.

Prototypes not only provide myself with a higher level of understanding  due to being able to better conceptualise the system, but for the first time I can let our users get involved with the process!

 

Prototyping

Produced in Balsamiq, prototypes are clickable and exported as PDFs, allowing easy clickables for sharing with users.

Testing

With little in the way of budget, I used user surveys of the prototypes, heat mapping, and click tests to understand user interactions with the redesign.

Iterating

I take the testing results & user opinion then tweak the prototypes accordingly before starting the process again. Rinse and repeat until a desirable level is reached.

 

 

Final Iteration

 

After a number of iterations, looking at the testing data, user feedback, and turning it over in my own mind - I land at the final iteration of the wireframe. Finally I'd found a version that had it's own uniqueness, separating it from the existing design, and it was a design that appeared to respond well to the testing.

 

A few of the design decisions:

  • Further minimalised the top navigation based on interactions with the prototype and further analytical data.
  • Brought in the hamburger based on heatmapping results & user feedback. When looking at an article mockup, readers complained that this information on the side distracted them too much distracted - and the heatmapping agreed. We wanted a content-first focus so reshuffled everything into the hamburger menu. This allows it to be hidden when within an article, and opened when needed. Automatic openings/closings were planned on specific pages to ensure that, for example, when the user is on the blog's homepage it is open to aid navigation, but closed on an article page to aid readability.
  • This influences the decision to move the subscriber field up to the top navigation, to ensure it is always evident. The hamburger also helps here by reducing the number of CTAs on our page; when its closed, channeling visitors to those few remaining CTAs and not overwhelming them with options - as verified int he heatmapping.
  • The popular article section proved successful, so the same methodology was applied to each article - using the social share numbers to prove popularity and bait visitors into clicking.

 

 

Visual Design

 

Towards the end of the prototyping stage, I was blessed with the ability to recruit a dedicated visual designer.  This allowed me to double my team size on the blog project from 1 (myself) to two (me & him)! 

From the previous stages, I had a solid concept of how the redesign should appear and by bringing a new team member on board, we had fresh ideas brought into the design. I ensured these didn't conflict with the prior user testing, but it also allowed us to solve problems in new ways. Having a dedicated visual designer that knew his stuff also ensured we had a certain polish and design identity which I may have been unable to produce. Basically: more heads are better than one!

I handed over the prototypes, and the designer did his thing whilst incorporating design styles based on the competitor analysis, current web trends, and his personal style.

These saw iteration, but only via Usabilla's team (which also included a UX design intern unattached to this project) as I felt I'd carried out the necessary iteration in the prototyping stage. 

 

 

Defining Interactions

 

The visual design provides us a static representation of the redesign and something for developers to work from. However, in an age where the experience is defined via the user's every little micro-interaction on the webpage, we were certain to define precisely how the user would interact with the new website. Not only this, but each of these interactions had to be intuitive and retain a high level of polish. 

Collaboration again between myself and our visual designer allowed the creation of high-fidelity mockups of these interactions using UXpin

 

 

Implementation & refinement

 

Once we had the completed assets for the redesign - namely the UXpin and Sketch files - things can really get interesting. The files are handed over to a developer to do his thing. 

Working closely with him, the key requirements for the redesign were segregated into 3 distinct levels of priority. This allowed for features that were more aesthetic - namely certain interaction - to be pushed back in the implementation cycle allowing the main features to come in first. This enables an efficient implementation as no time is wasted on fixing bugs that we needn't worry about yet, and provides us with a usable iteration before the entire site is ready.

Finally, at this stage it was imperative we work closely with our implementer. As stunning as we could make the visual designs, not everything can be simply translated to the web. Thus we had to stand by, working through the implementation and reinterpreting anything that was not quite possible - making tradeoffs, but ensuring the design evolved in a way that worked.

 

 

Release & the future

As is life, I had already left Usabilla when it came to the redesign's final release. Prior to this however, I had ensured a number of processes would continue - mainly the use of the Usabilla feedback button.

This button serves a dual purpose - firstly as a piece product promotion for Usabilla, allowing users to interact with and demo Usabilla's prime product offering.

Secondly, it collects user feedback! As users are demoing that button, users leave feedback on webpage elements and the page as a whole. This allows the team to consistently gather real user feedback on the blog, from its users. Ensuring any bugs found and any disliked or non-working elements can be sussed out and actioned upon long into the future.

 

 

Finally, thank you for reading. You can find the Usabilla blog here if you'd like to see the design with your own eyes. I'd love to hear your opinion :)

Unfortunately I'm unable to bring you any definitive results as I left Usabilla 2 weeks prior to the redesign going live. I have heard however that it's been met by our users with great enthusiasm!

Using Format