© 2019 Egi Shijaku

 

Support Channel for API Providers

Context

During my time as UX designer at Hitchhq, one of the most important and challenging features I designed was what we called the Support Channel. 

This feature had been in the backlog for a while, when a prospective client was very interested so us at the design team were handed the task under the wire. The main goal was to create a section of the website where the customer's users (mainly developers) could come ask technical questions and get support.

Type of Project
Team work 
(Me and a visual designer)

Stakeholder
Employer
Tools Used
Sketch, Invision
Skills Used 
Remote usability testing, visual design, interaction design

This was the initial idea, put together quickly by my colleague, who is a designer and front end developer

Research and the first design suggestion

I started the process with defining user requirements (from chatting with the product owner and customer success) and then quickly benchmarking with similar products. Design decisions at this early iteration included categories, question tags and how the user interacted with the existing questions.

This was the first instance in which I also contributed in the visual details of the feature. 

First design suggestion

User Testing and iterating the design

Since this feature was designed and delivered in a very short timeframe, there was almost no user input during the first design suggestion, so I initiated a user testing phase which consisted in 3 developers (recruited through Intercom messages) and 2 API managers (recruited through company channels). The sessions were recruited online on google hangouts and I both moderated and took notes of the user comments. This was a purely quantitative user study and the test subjects were asked to follow a simple flow and 'talk out loud' while they completed these tasks. I analysed the user comments and compiled some implications for design that were included in the next iteration. Most frequently, users identified a need for more clarity in the feature ("how does this work excatly?"), more navigation support and less colors. 

Second design suggestion

The new design and features

The need for more clarity was solved by the Explanation Box, a colored space where explanatory text and notifications were placed. The categories were expanded further and the redesigned. New functionality included: 

 -A chatbot was implemented to deal with first tear customer support. 

 -The ability to link an existing answer to a new question.

 -The ability to promote a support question asked by a user to the FAQ section. 

 -Empty states for every use case. 

Conclusions

Iteration makes everything (almost) perfect! Following a Scrum methodology, every feature was chopped into smaller, more manageable chunks, so at every delivery we pushed smaller parts of the feature, and then iterated for a couple of cycles. This offered a priceless opportunity to inspect and have suggestions ready for the next iteration.