Overview

Research - Ideation - Product design

The No Moss website was intended to provide past, current and prospective clients with information on their products and services. As the company grew, so too did their diversity of services and the website trailed behind in encapsulating and communicating them effectively.

Brief

After receiving copious amounts of incidental feedback about the website, it was time to update and renew the website.

The intention was to:

Elevate and rebrand the website to modern web design standards
For the website to convey a clear goal and purpose to its visitors
Limit scope of the project by limiting and prioritising project solutions

Design Process

The approach I took to complete this project was as follows:

Interviewing internal staff members and past and current clients to understand their needs from the website
Run stakeholder workshops to identify, define and prioritise the problems we wanted to solve
Wireframe and prototype website design and copy
Test wireframes with real users
Iterate and deliver on website

Problem Definition

Our first step was to conduct user surveys with real users of our website - past and present internal staff, past and current clients and members of the executive team.

Top 5 observations from interviewing internal staff and clients showed:

Users did not understand the difference between the ‘tech’ and ‘product’ practices
There was no UVP above the fold, or people did not understand the language used
“I thought No Moss was a games studio”
There was poor selling of services, little call to actions on the website
No case studies or video testimonials were displayed, only client logos

Workshopping

Our workshops included the ‘Product Vision Statement’ and ‘User Experience Map’ exercises.

Product Vision statement and Audience analysis

The team underwent a 2-day inception process, conducting the following workshops: Product Vision Statement, User Experience/Journey Mapping, ‘How Might We’ Sharing and Affinity Mapping, and User Story Mapping.

The key outcomes of the workshops defined the website goals as the following:

To convert cold leads through website by providing a clear understanding of our services and themes in the industry
To convert warm leads through website to offer a solution to the problems clients have
To provide an emphasis on our culture, values, purpose - ‘not just a body shop’

After workshopping the priority of our target audience, we decided to target the following personas:

Referred Potential Clients (warm lead)
SMB/SMEs customer who has not heard of No Moss (finds us through Google)
Procurement/‘Head of X’

Prototyping and Sketches

I then used a Design Thinking exercise called ‘Crazy 8’s’ to ideate quickly and experiment with innovative features.

The following improvements were decided upon:

We decided to deliver the landing page and practice specific pages (agility, product and tech) as a priority.
We needed to update the copy to be more straightforward in language
We needed to incorporate more obvious CTA’s above the fold
Website needed to have a mobile-responsive design

Hi Fidelity Prototypes

Version A:

The design for Version A added:

A clear CTA in the form of a button
A re-write of the intro paragraph, using less metaphorical languaging
Strong use of the brand green
A metaphorical ‘moss’ image

We also made the decision to remove mention of the games ‘Studios’ from the website, to only showcase the three main practices.

Version B:

The design for Version B played with a more subtle use of the brand colours, a different design for the intro paragraph, two CTA buttons as well as a different graphic moving away from the moss green. We also worked on different ways of featuring and introducing each practise area.

Survey and Findings

Using this prototype, we sent out a survey to collect user opinions and feedback on our landing page prototype.

The following questions were asked:

HOME PAGE: On a scale from 1 to 5 how accurate is our USP sentence - Unique Selling Proposition?
HOME PAGE: Open ended question. What other call to action button should we have up top to enable viewers to request something easily?
HOME PAGE: On a scale from 1 to 5 how would you rank our visual presentation of our 3 services?
HOME PAGE: On a scale from 1 to 5 how visually inspiring is our background image and how much does it tie back to our services and our UPS sentence?

User Insights:

Users liked the less ‘flowery’ language of the USP
They preferred the ‘clean’ white design over the strong use of the green
One CTA button was preferred over the use of two
Users also liked the ‘rolling stone’ illustration - it added personality and a little bit of movement to the design

Finalised Design

Incorporating the user feedback, we iterated and chose the white design with the three practices visible above the fold. We chose a USP that had less ‘flowery’ language, and kept one CTA button per section.

Outcomes and Learnings

Website traffic for the month of Dec 2019 was as follows, before the website redesign was as follows:

Website traffic for the month of Jan 2020 was as follows, after the website redesign was as follows:

Over three months, submissions through the contact form rose from 0 - 2 per month. We found that having a clearer explanation of each product practice more clearly articulated our service offerings, and helped clients understand more thoroughly how we might meet deliver problems to their solutions.

Conclusions

This project helped articulate the importance of clear problem definition and prioritisation. It showed that targeting one audience and clearly delivering value for them is more valuable than creating a website that casts a shallow but wide net on different audiences.

If I could revisit the website project again, I would run an A/B test on the website design, to gather more data on real users in real time. As this project was had a limited scope, it was important for us to time-box and really make sure to avoid scope creep, particularly as our user feedback sessions brought up valuable and interesting insights. The project also highlighted the importance of testing early and frequently with real users.

No Moss Website