A CLIENT PROJECT IN CONJUNCTION WITH GA
Many Hands is a not-for-equity, online art gallery, successfully funded via a campaign on Pozible as of the 1st of May 2015. At the online store people can purchase limited edition art prints with 50% of the sale profits to a local, Melbourne-based charity, which rotates each quarter.
Many Hands director and founder Joshua Lynch approached us for the purpose of conducting user testing on the beta site before launch. The aim was to derive any insights which could help to improve Many Hands as a business, as well as further the cause of connecting art with social issues.
As part of the GA course three students (Felicity Mulhall, Monique Aronica and Nik Fenech) agreed to perform supplementary research to consolidate what was provided from the client and also to run usability testing on the already developed Beta site.
The beta site was not ready for the launch planned for two weeks later. It presented issues with accessibility and findability of important information about the supported charities. No user or cross browser testing had been undergone. There was no clear connection between the charity and artwork and the opportunity to identify key information points regarding the charity throughout the site journey was missing. There was no content strategy therefore content needed to be validated from beginning to end.
Identified problems were analysed and ordered by priority (P1 –stops working, P2-major, P3- minor, P4- cosmetic) and and grouped under four sections; visibility, interactions, language and missing content. Focusing on P1 issues a collection of designs and recommendations to improve Many Hands first as an e-commerce platform, and also as a charitable entity were provided:
Site functionality across all devices
Pages populated with relevant content
Accessibility and findability of local charity information
Use of language on the site and Information architecture
- I developed the scenario using the key persona (Emily) provided from the client. I then determined three tasks to test the usability of the site. The tasks were designed to test the ease of use and also to ensure that the artwork could be purchased and that the customer clearly understood where their donation was going.
- Prior to testing the site with participants I performed an expert review and cognitive walk through of the current site. This was extremely useful as several correlations were found when conducting the testing with the participants. The videos from the testing proved to be very powerful to illustrate confusion and frustration when using the site.
- I performed card sorting and path testing. Card sorting helps to determine which wording the majority of people identify with. Path testing was used to know where and why customers were lost on the web site, it removes the visual design, clarifying which parts of the site work well and which not.
- After collating the data from the testing as a team we used affinity diagramming to identify the problems and split into sections. I recorded the information and gave initial recommendations and solutions.
- I sketched and wire framed, initially individually, iterating collaboratively with the team. Axure was used to prototype to show interactions and responsiveness.
1.scenario & task flows
the following scenario was created based on the primary persona, Emily, identified by Many Hands.
Emily has 1hr for lunch so she decides to look for a print to go above her bed to replace her own work that she did at college. She wants to get something that complements her existing prints- maybe another Prue Stent or Ben Hosking? She heads to the Many Hands website as she knows that 50% of the proceeds is given to a local Charity. She is not sure which local charity is currently being supported so wants to check that out as well. As she lives in Melbourne she wants to pay local postage.’
An expert review, cognitive walk-throughs on both desktop and mobile, a trunk test and current site usability testing were conducted to identify key pain points and problems within the site.
Current site usability testing was conducted with 9 participants(24-44 year old males and females). Participants were asked to complete tasks on either desktop or mobile, to identify problems on both platforms. Users were asked to complete three tasks:
One-to-one usability testing using video and audio was performed to allow for thorough analysis and to create key take out videos as this is the most effective method of communicating key usability problems to the client. Users were asked to “think aloud” as they complete tasks and to describe any problems or frustrations they experienced. The client was asked to perform the tasks outlined below to give him a greater understanding of the usability issues faced.
Determine which local charity is currently being supported and read the background information or see if there is a link to their website for more info.
Buy the latest (newest) print by Ben Hosking and donate to the current cause.
Select and buy a print by Prue Stent from the web site, identify what percentage of the profits is going to the current charity.
3. Information architecture
Card sorting and path testing were used to test the navigation of the site. After reviewing the results a new recommended site map was created.
4. TESTING FINDINGS
Affinity diagramming was used to reveal patterns in the testing results. This method is really useful for team discussion and synthesising the data. The issues were grouped into four areas: visibility, interactions, language and missing content. I used a spread sheet to record the data, decide on the priority and give initial solutions and recomendations
5. sketching & wire framing
It was decided that 3 main problem areas needed to be addressed by mocking them up as wireframes and redesigning sections of the navigation or pages. The team met as a group and sketched their ideas out on paper, making it easy to compare ideas and discuss the format of the pages. The team then further refined their ideas individually, which resulted in redesigns of the Cart page, the individual Artist pages as well as the global navigation and the footer into responsive Axure pages.
Video to demonstrate the responsiveness of the proposed new artists page, with the visible header and site ID and the addition of breadcrumbs.
Video demonstrating the cart page- removing excess white space to allow all information to be seen without scrolling down.