Boosting business value through web re-design

Overview

Mischief Makers is a facilitation agency with lots of focus on bringing energy and enjoyment to working, meetings and learning. They also offer trainings in facilitation for individuals and businesses. They want to discover the usability issues in the current website, understand the problem behind high bounce rates and create a new solution for this problem with a website redesign.

Boosting business value through web re-design

Photo copyright belongs to www.mischiefmakers.co

The challenge

  1. Mischief Makers services to be presented in a direct, concise and ‘mischievous’ way while giving value to the users.
  2. Current website has usability issues, including information architecture, friendly user experience. It violates multiple UX laws, including heurtistics and hicks law.
  3. New brand identity to be applied and launched with the new website, which leaves no room for error in communicating the new brand to both existing and new customers. Users that are already familiar with the old website should still feel like they’ve landed on the correct website.

Research & Analysis

The research phase was pretty straightforward. Mischief Makers had conducted their own customer research and had enough user data to offer at the beginning. These data include persona data of their users, analytical data from the website and business goals.

However, these data do not offer hints about what the exact problem to solve was. To understand this, I did the following:

  • Customer journey mapping - Uncovering painpoints and opportunity areas and insights
  • Competitive analysis - Brief review of how Mischief Makers competitors
  • Expert review - Audit of issues with current website and design suggestions
  • Data Analytics - Review of Google analytics data to find potential issue

Customer Journey map

Here’s a comprehensive version of the current customer journey.

Customer journey map

Design considerations from customer journey

Competitive analysis

I analysed 4 competitors to find opportunity areas and find inspiration on how things can be done differently

Expert review

I color coded the severity of issues found, Red is high severity, Orange is mild, Green for idea’s i’d like to iterate on, and maybe implement in the new website.

Data Analytics - Period of May to August 2021

Google analytics data gave additional insights on how the pages are performing, and also to confirm the high bounce rates issue I’m trying to solve.

What I learned from research phase that might help boost Mischief Makers buisness value

  • A dedicated Case studies page should be added, and designed to help boost trust. Testimonials should also be added to display Mischief Makers credibility.
  • Most visitors spend little time on the website before ‘bouncing’, It appears they leave the website after visiting the about us page and leading groups page. These pages has several usability issues.
  • Good Information architecture will play a big role in helping visitors quickly find what they’re looking for. The new website needs to be intuitive and information should be presented in a consice manner.
  • Reduce the numerous amount of CTAs, they’re confusing for users. Less options to choose from often lead to quicker decisions

Ideation and design

The research phase help me understand what to problem to solve. To kick off the design phase, I made a list of things to do that will guide my process.

  1. Site map
  2. Wireframes
  3. Usability testing
  4. Insights from testing and list of iterations

Sitemap

There was an exisiting sitemap which was created by Maria Erlandsson, my designer colleague at Mischief Makers. The map helped me in making a final one.

Here’s the final sitemap for the website.

Mid fidelity prototype

These wireframes are the end results of several rounds of sketching and reiterating on the sketches to get the best possible Information Architecture for the website.

Usability tests results

I and my teammate planned and conducted usability tests using mase.design. We had sessions where we brainstormed questions for testers and the tasks. The tests were carried out in small tasks assigned to testers, a combination of new users and existing users to gather insights.

Apart from the metrics shown below, we paid attention to the hotspots, the misclicks and hints for information architecture issues and potential cause for bounce rates.

👉 View detailed report on maze.design

Iterations on lofi prototype after testing

  • Some of the CTA are a bit confusing. There’s a mix between ‘Contact us’, ‘connect with us’ and others; the tone differs there as well.  In case studies, it says “connect with us” as CTA to contact MM, “Register Interest” was changed to “learn more” .
  • I created a new page for courses. Test result shows that users spend more time looking for courses out of all other task. I assume it's because it's in a page called 'services' which can be confusing.
  • Long scrolls on some of the course page was fixed by cutting out unnecessary information.

👉 View live website

Challenges & Learnings

This project served as my final individual project at Hyper Island. It was challenging to work alone as a designer, unlike what I’ve been used to doing in school - working in a team with others. However, I learned a lot and this project definitely helped my practise my design skills and challenged myself to create designs that actually solves problems.

Here are some learnings

  • Understanding the services and the users of this website took a bit longer than I thought it would. I knew it was really important to reach this understanding, this however led to the research phase extended.
  • Working with design systems was a new thing. For this project, I had to take a different course to boost my UI skills and learned how to create and use components and variants to speed up interface design and keep it all clean & uniform
  • A lot time could be saved if I spent more time on finalizing the wireframes before moving to high fidelity prototype.

Next steps

To improve the user experience even further, I’ve suggested that Mischief Makers implement a login members area for students taking the courses. Currently, they send course materials and other important course information through slack (which seems to work perfectly) but the website can also be a point for all of future clients interations and this will add additional value to the Mischief Makers brand.

Facilipedia is Mischief Makers curation of tools, exercises and articles for facilitation. It’s currently in beta and will continue to improve. I suggested to make it a lot more user friendly by implementing filters and navigations that allows users to find contents faster and easier.