Old

New

Redesigning Usabilla.com

A much needed update of Usabilla's main website to improve work flows & content discovery. 

Work carried out with partial assistance from Concept7. 

Acted as project manager, UX designer, and copywriter.

Skills used:

  • Requirement capturing
  • User interviews & surveys
  • Task analysis
  • Wireframing
  • Journey Mapping
  • User feedback gathering & analysis
  • Competitor Analysis

The Challenge

After 5 years of use, Usabilla's website was beginning to look badly outdated – bad for a company that prides itself as an authority on UX. Over the years content had been liberally added in such a way that the website no longer provided a valuable nor intuitive experience.

The aim of the redesign was threefold:

  • Provide a uniform – responsive – experience across all devices. 
  • Increase website conversion, bounce rates, and solidify Usabilla's brand. 
  • Cement Usabilla as an authority in UX design by building a user-centric experience that met current best practices

 

1. Defining requirements (feedback analysis)

  • Feedback from site visitors had been continually collected over the past 3 years via Usabilla for Websites.
  • Analysing this feedback shows us the website's main pain-points & suggestions from visitors on what they want.
  • Provided a number of focus points for us to take forward into the new design.

 

 

2. User Interviews

  • Current Usabilla customers contacted through telephone interviews. 
  • Use the prior user feedback as a starting point.
  • Allows us to understand what users want to see on Usabilla's website and position it accordingly.

 

 

3. Competitor Analysis

  • Review Usabilla's competitor's websites to understand what they were doing, what they did right, and – more importantly – what they did wrong.
  • Provides a solid base on which to start with Usabilla's design, together with the user feedback and user interviews.

 

 

4. Task Analysis

  • By using website surveys, it was possible to understand visitors' motivations on the Usabilla website.
  • Users segmented by their status and their primary objective on the site. 
  • Allows us to hierarchise & optimise for specific use-cases.

    •  

     

    8. Improving individual pages

    Example of an in-page survey

    Feedback on old product page collected from Usabilla

    • Additional user research relevant to individual pages: User surveys, analytical research, user feedback analysis.
    • Provides an additional layer of research on top of what we've already learnt.
    • This allows for page-specific specialisation, whilst still retaining an overall site experience.

     

     

    5. Journey Mapping

    • Based on the previous research, we begin mapping the journey of Usabilla's users through the new website.
    • The focus here is to ensure efficiency of the flow, and quality of the experience.
    • Flexibility of the post-its allow us to iteratively optimise.

     

     

    6. Wireframing

  • Finally convert the previous quantitative and qualitative studies to a visual medium.
  • The page structure is dictated by the journey mapping outcomes.
  • Basic interactive mockups allow for low-fidelity, rapid prototyping.

    •  

     

    7. Visual Design

  • Visual design team takes over, building based on a strict set of guidelines laid out by the UX team.
  • Guidelines constituted the wireframes, together with strict layout & formatting instructions.
  • Copywriting was also completed at this stage with a defined tone-of-voice.

    •  

     

    9. Hi-fi Prototyping

    • With the first version of the visual design complete, we move to UXpin for a higher fidelity of prototype.
    • The aim here is to understand how the website will work in practice.
    • A process of trial & error, we can iteratively improve the visual design, user flow, user interactions, and user experience.

     

     

    10. Continuous Improvement

    • With the final design agreed and settled upon, the work slows down for now but never ends.
    • Usabilla's very own feedback button ensures the website is always collecting feedback.
    • The design can be iterated according to user feedback.

     

    Outcome

    The new usabilla.com was implemented in summer 2015, the same summer as I left the company.

    The live website has slowly iterated away from this  implementation, yet remnants of the user-flow and my copy still exist to this day.

    Using Format