Case study – Guide to launch

On April 2017, the business objective was to launch a new product called Guide, an evolution from Help Center. Guide was a new knowledge management product that helped to create and manage content. Help Center became a part of Guide as a customer-facing destination.

Help Center up until that moment had 40 000 customers globally and was around for nearly 3 years. Meaning that customers had habits and defined ways of doing things.

Guide-to-launch-1Guide-to-launch-1

 

Time: August 2016 – February 2017

Project: Guide to launch

My role: Design lead

Responsibilities: User research, wireframing, customers validation, UI, follow up and iterations 

Problem: How to create and establish an effective workflow for existing and new customers using Guide for creating and sharing content.

User testing

Target group:
Help Center at that point had two defined target groups:

  • Content managers
  • Support agents

Objectives:
Both of these two groups had needs and established workflows. Every small change in the UI was a potential disruption. I have identified objectives for both of these target groups that helped me to understand their workflows.

Qualitative user research:
Using the qualitative user research methods we (meaning I and product manager) have managed to talk to 5 users per target group. Which ended up being quite a big task.

 

These conversations helped me to understand and identify why and how Help Center managers and agents did things that mattered to them.


Quantitative user research:
These findings let me explore UI concepts. We have decided to test these concepts reaching out to our internal content managers using Invision and validate our assumptions.

 

Using this prototype we have validated ideas fast and easy. During this research, we have gathered a lot of extremely valuable feedback which allowed me to move forward with my concepts and design thinking.


Invision is not designed running these kinds of validations, so it was not easy going through Invision prototype comments and trying to summarise everything. Invision did not have a global comment export functionality, so everything had to be done manually.


Icon testing:
Another interesting quantitative user testing happened around the icons. I have tried to understand which icon is better identified as “Help Center”.

 

Usabilityhub.com test resultsUsabilityhub.com test results

I have used usabilityhub.com for this to tap into the unbiased audience by hiring participants that matched my target group.

User interface design

Brainstorming

With every bigger project, we start our interface design journey by inviting everyone to the room for the design session. Here engineers, product managers, and designers can diverge and converge on ideas focused on the problem that we are trying to solve. These design sessions are usually 1-2 days long and allow us to lean in and hear out everyone. 

After these sessions, I usually gather ideas and try to scope them down to something that could be achieved for the MVP version.

 

Concept explorations

Detailed design work starts happening with the combination of user validations. Flows and ideas get more and more refined and I start exploring more detailed experiences. The scale of this project required some more effort for cross-team communications. So I decided to put together a concept pitch. 
Here is one of the concepts that I put together to showcase how users would move through the interface and experience the 30 day trial period. These concepts usually get showcased in meeting with engineers or product managers which allows me to communicate my ideas using visual language and sound.

 

I would put together these flows for concepts that I feel good about. Here’s another concept video with the Guide UI flow using interaction and sound:

I would put together a short animation and share them with my immediate team or other designers to gather quick feedback. I use Sketch and Principle to do these UI animations.

 

Screenshot 2017-04-16 12.39.26Screenshot 2017-04-16 12.39.26

Final designs

There have been many steps throughout many months to get to the final UI. We have executed 3 rounds of validations, reached out to 100 content managers and support advocates that allowed us to establish new workflows and finalize the designs for the Guide launch. But even at the stage of finalized designs, it is a very iterative process, involving engineers and product managers. 

 

UI components

With every project, I try to define and deliver a full package: UI flow, explanations, grid system and components when necessary. 

 

Outcomes and learnings

With the release of Guide we have reached all business growth targets and created minimal friction to our existing customers. 

I was very happy to work with this project that took nearly a year from the initial idea to user validations, beta program, release and follows up. I have gathered a ton of experience how to run a cross-team project that touched so many different departments.

 

Learnings

  • It takes a great deal of effort to get everyone on the same page 
  • Stakeholders want to feel heard and be involved in the project from the beginning
  • Smallest changes have the biggest impact to customer workflows and have to be communicated in advanced
  • It’s not easy to compromise on the functionality and user experience due to time constraints and technical limitations
  • It is necessary to follow up with customers and to see how things are going even after the extensive user research