©2018 by Blue Learner | Sheffield, UK

SIRV

UX design/information architecture/writing

Increased sign-ups by big-name clients by 200% from Q4 to Q1 

March 2015 – Jun 2017

 

OVERVIEW

Sirv is a UK based tech-startup with an established image hosting platform, allowing individuals and companies to create image viewers for 360 spin, slideshows and image galleries which can be displayed on their own websites and apps.

 

Problem

  • According to Google analytics data, 78% of Sirv users searched through the companies Help Center for assistance regarding image uploading and processing. A Systems Usability Scale (SUS) based questionnaire was sent to all Sirv users. The findings identified that 61% felt the instructions were riddled with technical jargon, 45% believed there were too many categories to search through to find the answer to a problem, and 55% agreed there were not enough visual demonstrations of the app in use.

 

Goal

  • Redesign the knowledge base of the Sirv website so the target audience finds it easier to navigate and find the information they need.

 

 

My role

  • Find out the user requirements of your typical Sirv user from the product owner.

    • Write a report containing interview themes based on user requirements.

    • Create a user journey map for your typical Sirv user.

    • Analysis the information architecture and improve the categorisation of data.

    • Write a UX review containing copy changes in English, based on user research. 

  • Redesign and rewrite the knowledge base in accordance with the user requirements, ensure designs are fully responsive. Produce hi-fidelity mockups in Photoshop.

  • Test any redesigns of the website through usertesting.com.

 

sortio-mobile-desktop-bothlang.png

USER RESEARCH - JOURNEY MAP

Help Center example:  

  • Data collection was conducted by the product owner with 11 tech staff from various large companies.

  • User’s tended to be retailers (attracting many in clothing and fashion), looking to wow their audience with an innovative look and present a modern “with the times” image to their shoppers.

  • Individuals were mostly designers rather than strictly programmers.

  • Users wanted the image processing system to be as easy and as quick to use as possible

    • In particular, expected the knowledge base to be easy to understand for "non-programmers"

  • As designers they expected the Sirv app to run smoothly on tablets and smartphones.

    • They also use tablets to work on their own designs and search for information.

  • Users tend to use tablet devices for basic design tasks and work on the move.

Sirv user journey map for knowledge base

USER RESEARCH - OBSERVATION

Old site - Help Center image spin example:

 

This example was chosen as it involves a tricky task for conveying lots of information from the  Help Center to be displayed on desktop and mobile.

 

User testing was carried remotely via Testbirds, acquiring 11 responses, which involved observations of page usage via fictional case study tasks. Users were asked to find out how to create an image spin effect, and implement the solution on a one-page fictional e-commerce site. The data was transcribed and themed using content analysis to identify specific user issues with the interface and perform any iterations on the designs. 

 

  • All users found out how to create and implement the image spin effect,  completion of the task varied from times in 5-12 mins.

  • The desktop version of the documentation page brought about several concerns from readers when viewed on tablets. The first being there was too much text to read, the font was too small. In general, tables did not scale and the design was generally non-responsive. 

  • 9 users felt there were too many categories to choose from in the contents section, they also expected categories to appear on the left.

  • 6 users wanted to see a search box and believed it would be quicker than category browsing.

  • 8 users couldn’t see the reason behind a choice of images and (unsurprisingly given the audience expected pictures of clothing on as demonstrations). 

  • As the page required a lot of scrolling 5 users voiced their concern about to scroll back to access the list of knowledge base topics.

  • 5 users also felt there could be more product demonstrations, rather walls of text.

  • 6 users felt the title of the document could be less “clinical” sounding and more informative.

 

Sortio - User Journey Map - Page 1.png

USER RESEARCH - OBSERVATION

Information Architecture - Help Center categories

  • In the same user test , mouse clicks were monitored to identify which categories were selected the most. This was also combined with Google analytics data. It was found users only clicked 43% of the categorised.  After the user test, the number of categories was narrowed down by removing the ones user's never clicked.

  • 8 of the 11 participants commented that they preferred the reduced number of categories (shown in the wireframe created for the later user test - discussed next). 

sort-desktop-slovak.png

USER TESTING - OBSERVATION

Wireframe testing (revised design and architecture)

 

Wireframes were created based on the user research data (in Balsamiq Mockups) and presented to the same users remotely via Testbirds. Users were once again given the task of finding out how to apply the image spin effect to their product photos. From the results, interactive Axure mockups were then created (shown the results). 

  • The new version of the Help Center was made responsive for tablets as 38% of users utilized tablets to find information on the site (only 5% used mobile). 5 of the 11 users commented that they were happy the Help Center could be viewed on their tablets without zooming in and out and scrolling so often.

  • Help Center categories were reduced to the most clicked ones in order to avoid information overload reducing the number of categories from 28 to 12. During testing, 9 participants felt this looked “cleaner” and made it easier to find information.

  • The more casual “How to” style was applied to the copy for each knowledge base article. 8 user’s felt this was more welcoming and informative than before.

  • 6 of 11 users appreciated that product demonstration was an item of clothing as this applied to their needs in fashion retail.

  • The Log In/Register were removed from the tablet design as no users clicked on them during testing, however, they were later added back into Axure mockup, as 3 users commented that the buttons were missing. 

  • It was decided to implement a search box where users can type in what they need, rather than just click and browsers. All users felt this searching for information easier.

sort-landing-1st-draft-word.png

RESULTS

Since the new Help Center implementation and general redesign of the site in November 2017, Sirv has attracted and retained 6 big name clients in the clothing sector through the site such as Schuh, Timberland and Mizuno who (according to the product owner) commented that the new design was the dominant factor in helping them carry out the task of creating and sharing images.

sort-landing-2nd-version-word.png