Money Guru | Client overview

Money guru is a comparison site that went from 0 - 180k monthly users in its first few months and became the fasted growing comparison website in the UK in 2017. I lead the user-centric approach to user research, analysis, ux design and ui design. We continually monitor and improve the experience based on user research.

I am going to give a brief overview of the initial release and then focus on a later release to show a more detailed process.

0.1 | UX Research

  • Competitor research These included confused.com, gocompare.com, comparethemarket.com and moneysupermarket.com.
  • Analytics research We had the original site ukloans to base gather our analytic data from. Not the best but this was enough to start until we had a MVP.
  • Surveys and questionnaires We added hotjar to the site to gather as much data as we could on the users behaviours. This monitored all types of user interaction and allowed us to add surveys and polls to the site.
  • User stories These are my first point of call and we wrote over 100 user stories to delve into what the users needs were.
  • User personas Were used to study in depth key stories and find out what issues and goals they have.

0.2 | UX analysis

  • User story maps Help me to view the whole project and detail how each persona would achieve their goals.
  • Card sorting Help me to prioritise these features.
  • Affinity diagrams used to group content and define content.

0.3 | UX design

  • Sketching This is an important step of my process and allows me to quickly think of flows, components, possible solutions and quickly iterate are discard.
  • User flows Help me to detail each interaction for each personas journey to its completion and discovers how they achieved their goals.
  • Interaction design Planning out each interaction and designing how each step is carried out, detailing any notifications and feedback. I like to supply prototypes to showcase this to developers.
  • Wireframes I use these as a deliverable for developers / the client and also to define the content structure and any extra interactions.

0.4 | Prototype

  • I created several prototypes of individual component flows and also the full app to test internally and supply to the client (ideally this would be the first user test).
  • Sketch is my software of choice as it's has lots of functionality to speed up the design process.
  • Marvel app I used Marvel and principle to create prototypes, however, as a front end developer I can quickly code HTML, CSS and Javascript prototypes

0.5 | UI design

Using the style guide and branding guidelines, high fidelity designs were created. I also like to supply animated examples of how I want the interactions and flows to work.

0.6 | Usability testing

  • Lab usability test An extensive usability test was carried out to test the brand and all functionality.

0.7 | Results of Usability testing

  • User journey maps & affinity diagrams Using the Usability test results I created user journey maps and affinity diagrams to find pain points and barriers.
  • Prioritisation Matrix We then created a matrix to work out the impact on user against technical feasibility and design / UX feasibility of the issues we had found. Allowing us to include quick wins in one release and larger components in single releases.
“Using the prioritisation matrix we worked on a initial release in phase 2 to iron out some quick wins.”

Money Guru | Phase 2 release 2

A user benefit was spotted within one of the usability tests. This surrounds the car loan section of the site.

“I want to find out more about car loans versus car finance and have a way to compare car specific products”

How we meet this users needs.

1.1 | UX Research

The research phase follows the same process as the earlier phase but we now have more information to work with since we can analysis the new site.

What we used

  • Competitor research confused.com, gocompare.com etc
  • Analytics research ...
  • Surveys and questionnaires ...
  • User stories ...
  • User personas we had some real personas now to work with

1.2 | UX analysis

We analysed the data and using a User story map and affinity diagrams we started to build up a nice understanding of what we would like to include.

User story map

This gave us the full picture of the feature. We had one backbone of the big activity, the one under are the steps for each activity to be completed and then under are the details in each step.

Findings

  • Car finance we would call it car finance and it would be it's own dedicated section.
  • Comparison table unique comparison table that can filter by car registration plates.
  • Quick quote, Vehicle valuation, Dedicated wisdom content, Car finance calculator, Benefits section, Email / Save results, Car cost estimator, Garage and car search

We could then prioritise features into releases

  • Must have Quick quote, Dedicated wisdom content, Benefits section, Comparison table
  • Should have Vehicle valuation, Car finance calculator, Email / Save results
  • Could have Garage and car search, Car cost estimator

1.3 | UX design

Not we had the "must have's" it's time to revisit the personas and create user flows to plan out every point of contact.

User flows

This user flows is based on the first persona Phil, it shows his full process of touch points, from when he fills in a quick form on the home page to when he hits reply and fills in a modal. When outlining the flow it's important to include all touch points and keep it as simple and intuitive as possible, include notifications and call to actions to help the flow.

Interaction design | Comparison table

This detailed interaction design shows the process of pressing apply on a comparison result and then having to fill in a modal with selections

Interaction design | Car valuation

This shows part of the Car valuation interaction, how the user inputs his details and how we can gather data and get him to his goal as quickly as possible.

Next steps:

  • • Workshop
  • • Create prototypes of all journeys
  • • Test prototypes
  • • Review test results
  • • Iterate
  • • Create high fidelity designs
  • • Release
  • • Carry our further Usability test and monitor
Back
© willforsyth | Pattern Library