UX audit

Mobile app

Members' area improvements

Uncovering pain points and usability problems for Checkatrade members', on the mobile app and website.

A computer showing an example page from the SaaS product.

Project aim

To understand how the members' area was being used and highlight problems or opportunities that could impact retention.

Outcomes

Top 11 user tasks reviewed

The most important tasks for users were identified and reviewed.

Actionable recommendations

Clear ways to fix the problems uncovered in the audit, based on best practice.

20 areas of opportunity highlighted

Ways to grow and expand the members' area were found.

Designs and prototypes

Designs and prototypes were created for the most severe problems and highest priority opportunities.

My role
  • User experience design
  • User interface design
Project phases
  • Live
Key tasks
  • UX audit
  • Survey creation and analysis
  • Mapping user flows
  • Data analysis
  • User interface design
  • Prototype creation

Key problems identified

  1. Potential customers found it hard to contact tradespeople due to low response rates.
  2. Tradespeople often don't respond to messages from potential customers, due to a lack of time, when they're not available.
  3. Parts of the members' area were underused due to navigation and usability problems.

Key stages of the project

UX audit

A UX audit was conducted to find crucial flaws that were impacting the user’s experience. The audit provided actionable recommendations on how to fix those problems. The recommendations are based on best practice and published research findings.

Identifying the areas to focus on

The areas to focus were uncovered by looking at analytics, support calls and business priorities.

Support calls Topics brought up in support calls were monitored prior to this audit, which helped identify key problem areas for users.

Analytics The top user tasks were identified through usage statistics. Usage also showed that some key features had low usage vs business expectation.

Mobile usage Visits on mobile devices were increasing. The number of new users visiting on a mobile was higher than returning users, which could suggest a poor experience. This was therefore an area to investigate as part of the audit.

Cognitive walkthrough

Cognitive walkthrough was used as the method to evaluate usability. Each of the user tasks was split into steps (the typical user flow), at each step 4 yes/no questions were asked. Any with a ‘no’ answer were assessed further to uncover what was causing the problem(s).

An example of one of the results of the cognitive walkthrough, showing each step of the task and the results of each question asked.
A page of the UX audit, showing a visual, marked up with comments and actions.

Gathering user feedback

Surveys and conversations were being carried out alongside the UX audit. Some of the problems identified in the audit were also fed back by users. When this was the case quotes and charts were added to the audit to give further information about the problems that were being encountered.

Chart showing the results of one of the polls that was run. The poll asked which features of photo they use, the results in order are photo upload, albums, before during and after labels, description of the photo/video, featured photo and video upload.
User quotes from the poll which gave context. 'I can only upload a single picture at a time' and 'When I attempt to manually swap the photo order I have to contact Checkatrade to do it for me.'

Scoring, recommendations and opportunities

Each of the problems were highlighted on a screenshot and given a score to show how bad they are, and to help prioritise what to fix first. The problem was described and a recommendation was given on how to fix the problem. Opportunities were placed next to the problems, giving wider suggestions for improving the experience.

Overview of user flows

An overview was included to visually show where in the user flow problems had been found. This was colour-coded to highlight the areas that needed most attention.

Example from the UX audit of how problems are highlighted, they are circled on a screenshot and given a severity ranking. The severity has different colours.
The page of the UX audit showing the results of the cognitive walkthrough for each task. For each task a square is shown for each step and those squares are red, orange or green depending on the result.

Mobile app dashboard

This was designed to help solve all 3 of the problems identified – to improve navigation and visibility of key parts of the members' area and to increase response rates to messages.

Increasing visibility of key information

A dashboard was designed to make it easier for users to manage their membership. The dashboard shows notifications for items that need their attention and gives an overview of membership performance.

Notification of customer contact

When the user receives new pieces of feedback and callback requests from customers a push notification is sent. This information is also shown at the top of the dashboard. This helps prevent unnecessary journeys to check if there is anything new.

Fast access to the most used content

Based on analytics and phone call topics, the most used parts of the Member Area were discovered. The dashboard provides quick links to get to these areas. This prevents users needing to use the menu to navigate to that content.

Screenshots of the mobile app, where it has links to feedback received and customer contact and a notification of the number of those the user has received.

Membership and profile performance

The app provides a simple, visual way to consume all the statistics that are currently displayed in the Member Area web app. This allows members to get a quick overview of performance. There is also the option to dig deeper into statistics and find out how to improve.

Screenshots of the mobile app, showing the user their profile performance stats and how they can improve that.

Improving learnability and encouraging engagement

To help members learn and gain more from their membership the app provides top tips, quick links to related actions, profile completion information, opportunities to upgrade membership and grow their business. These are all given in relevant places.

Screenshots of the mobile app, showing the user their feedback score and profile completion and giving top tips of how to improve.

Top tips to increase knowledge

Top tips are used to increase knowledge over time, as there are many aspects to the membership. Only one tip appears in each area, so that users are not overloaded with new information in one go. If the user chooses to close any of the tips a different tip would display in the same place the next time they access they app.


Messaging feature

This was designed to help increase response rates to messages.

Adding functionality for tradespeople to respond to messages

Previously, tradespeople could just receive messages through Checkatrade and would have to reply through another channel. Adding this messaging feature allows smooth conversation between tradepeople and their customers through the Checkatrade app and members' area.

Making it easy for tradespeople to find their messages

Users found it hard to know if they had received a new message and to find existing messages. Notifications were added to both the app and members' area. On the message page a clear indicator was added to the top of the page to show if there were unread messages.

Screenshots of the members' area, showing the notifications that highlight customer contact to the user.

Adding quick replies to save tradespeople time

Feedback was received that people tried to contact tradespeople through Checkatrade but hadn’t had a response. After asking tradespeople why this was, the most common reasons for not replying were that they already booked out and didn’t have time to reply or didn’t do the type of work that was being requested. To improve this process for both parties pre-written responses were added, allowing tradespeople to reply with just one click.

Screenshots of the mobile app, showing a message the tradesperson has received and the quick replies they can send.

Managing messages

It was difficult for tradespeople to manage their messages as there was no way to see if they had replied to a message or to delete messages. To keep track of which messages they had replied to they had to add a note to the message, which was time consuming and hard to scan. The messaging area was updated to show when the last message was received or sent. Responses were shown next to the original message so the full chain could be seen. The option to delete messages was also added.

Screenshots of the mobile app message list where reply and received are shown to the user.
Up arrow

Top