ProjectsContact
ProjectsContact

Heuristic analysis & re-iteration

Project Aims

Utilising UX research processes to outline issues within an existing commerce site
To propose and implement solutions to issues found through UI design processes.

Introduction

Twisted Oaks is a mountain biking venue in Ipswich, UK, with a focus on online booking. This project enhances its customer experience through UX/UI design

Drag & Zoom

site map & routes

Building a full site map in Miro, determining primary & secondary routes helping to understand the main focal areas to improve upon.
Primary route - Make a booking
Secondary route - Learn about the park
The main goal of the site is to make a booking, if a user wants to book they will want to learn about the park.

Heuristic Review

Using the Norman & Neilson 10 heuristics I was able to analyse the site at depth, Using a traffic light system I annotated the sitemap and primary/secondary routes to help visualise the problems.

Issues found

  • A complete lack of aesthetic & minimalist design
  • Site wide consistency & standards issues
  • Poor matching between the system & real world

User flow diagrams

Leading on from the heuristic analysis I wanted to visualise the friction points, user flow diagram helped to show the over complicated process of booking.

As well as mapping out the current user flow I also proposed a simplified booking process as shown below:

Drag & Zoom

User Testing

User testing was the last part in my research phase to really solidify any any issues found.
My analysis found major issues with site wide navigation, clustered information and poor consistency, so I tasked my user testers with questions on site navigation, finding out information on the park and an emphasis on memberships/booking.

Questions asked

Task 1: What would you do if you wanted to go ride your bike at the park this weekend?
Task 2: You’ve just realised your bike isn’t in running condition, are there bike hiring options?
Task 3: Before you go you want to learn as much about the park as possible, how would you go about doing that?
Task 4: You’re local to the park and are debating a membership rather than paying per session, what are your options?

results

Design planning

The Redesign proposal

Redesign of the landing page, the membership cards, the map feature and the footer.

Visual Research

My initial visual research was a comparative process, finding examples that had strong features.

The example on the right is for the hero, I also did this same process for every section/component that was being redesigned.

Comparing the original focused section, describing where its problems lie based on heuristics and user testing, then compare real world examples describing why these work better.

Wireframing

The visual research gave numerous layout options to shape a set of detailed wireframes.
Iterating on the wireframes allowed me to try and compare various layouts.

Drag around

The re-design

Hero Section

Original

Issues

  • Unclear navigation menu
  • No organisation within dropdown menu
  • Poor quality image
  • Contrast accessibility issues
  • Useless map CTA
  • Map link is in sub-nav

Redesign

Solutions

  • Full width traditional nav-bar
  • Clear cataegories within nav-bar
  • High quality hero image
  • Clear heading, no contrast issues
  • Removal of map CTA, giving book now more emphasis

About section

Original

Issues

  • Poor visual hierarchy
  • No consistency in colour choice for links/body
  • Users when testing didn't even want to read it due to the amount of text
  • Users when testing didn't even want to read it due to the amount of text
  • Poor copy in the intro

Redesign

Solutions

  • Taking figures from paragraphs and displaying them as lozenge style info points
  • Leaving blue colour of text for text-links only
  • Cutting back the intro text and using more suitable copy

membership cards

Original

Issues

  • Very bunched cards with too much information in a small space
  • Pointless features e.g. 'attached services'
  • Poor copy used e.g. 'senior'
  • Icons that dont represent their text

Redesign

Solutions

  • Cutting back any information that isn't 100% necessary
  • Adult & Child rather than Junior & Senior
  • Better representing iconography

map/footer

Original

Issues

  • Map has no ability to get directions or ability to set location
  • Map is the full viewport width, users during testing were stuck trying to scroll and instead just zooming in on the map
  • Footer has no organisation, includes dead links and has different titled links to the same page

Redesign

Solutions

  • Using better embedded map systems from Google
  • Map is no longer for viewport width, giving users the ability to get out of the map
  • Complete footer redesign, same categories as the nav-bar, added logo as well as social media icons

The outcome

The outcome for this project was a landing page redesign in Figma.
The landing page design solved the problems found from heuristic analysis as well as user testing.
In terms of a personal outcome, I learnt new valuable skills like conducting user interviews and tackling heuristic evaluations.

key takeaways

The importance of UX heuristic analysis
How to correctly conduct a user interview and implement findings
As well as new UX techniques I continued to develop my UI design and prototyping skills

View the files