Informing potential customers
In 2013, Filtered.com was launched to provide an e-learning service for the corporate learning and development market. While beautiful and modern in design, its website failed to clearly communicate the service's core benefits. In this project, I worked with Filtered to create a clearer and more persuasive website.
My Role
In this project I worked as a UX team of one, collaborating with business stakeholders and developers.
The Challenge
Filtered asked me to redesign their corporate website, focusing on user experience and persuasion. A tight schedule meant I had to design, prototype and usability test everything in 4 weeks.
The Research
To understand who our customers were, and what they’d want to do when visiting the site, I interviewed stakeholders from sales, marketing and account management. These colleagues interacted with customers almost everyday, and were a excellent source of knowledge regarding customer needs, values and behaviour.
From my research data, I created a set of personas representing the main types of customers. And to model the personas' goals and activities I created a customer journey map.
Design workshop
After creating an intial set of wireframes, I arranged a design workshop with the business stakeholders to discuss the designs and generate new ideas.
One of the things we did was to collaboratively design the homepage using a set of “content blocks”.
Each content block was a section of content that may appear on the homepage. E.g. Benefits of the service, features, customer reviews, testimonials. And for the above-the-fold section, I created several alternative designs.
I printed out the content blocks and put blu-tack on them, so that they could be displayed and moved around on the whiteboard. The content blocks were like Lego blocks that we could easily swap and move around. We were able to quickly experiment with different designs and visualise them in front of us.
Feedback and discussions
Following the design workshop, I re-designed the wireframes taking into account what I had learnt. Using Invision I turned these wireframes into a clickable lo-fi prototype, which was shared with the stakeholders. The prototype gave them a sense of what the website feels like to use. Invision faciliated convenient feedback and discussions on specific parts of the design.
Prototyping and usability testing
After the wireframes designs were approved, I began making a high fidelity prototype (using Axure) in order to perform usability testing. The copy was created collaboratively with the sales and marketing teams, replacing the lorem ipsum text used in the wireframes. Testing copy was important because text affects user experience as much as the organisation and layout of a site.
Because of the tight schedule, I decided to use usertesting.com to carry out the usability tests. With this web based service, there was no need to recruit our own participants. Once the usability test was submitted, I was usually able to watch a video of the test within 2 hours. After fixing the usability problems we found, the updated version of the prototype could be tested in hours instead of days.
One of the usability problems found was on the “approach” page. After arriving on this page, no test participant scrolled down to further explore the content below the fold. The likely reason was that the content above the fold looked complete - people didn’t think there would be anymore content below the fold. To fix this problem I made the section that appeared above the fold longer, so that scrolling would be needed to see the rest of the content. This was shown to work in the subsequent usability tests.
Visual design refinement
I worked with a freelance graphic designer to define the visual design styling for the site. I was responsible for communicating the requirements to him, and providing feedback. We iterated 4-5 times to get to a design that everyone was happy with. Because the graphic designer was based in another country, we had to communicate over email and instand messaging. This made collaboration a lot more challenging than we had anticipated.
Working with development team
I worked with the development team to ensure the code they wrote matched the design that we had intended. Due to certain technical constraints, certain aspects of the design were too expensive to implement. After taking time to understand the technical limitations, I suggested compromises that were a close match to the original design.
The Results
After fixing the last usability problems we found, further testing confirmed that all of the issues had been fixed. The new website was well received by the Filtered.com directors and stakeholders. A later usability test of the live site showed that people’s initial reactions were very positive. They had no trouble using the site and understanding the messages we wanted to communicate.
