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.