The Emerson Suite Help Center is a knowledge library that provides helps for the Emerson Suite users. It reduced the time and stress for the user to find the answers they need with well organized information structure and easy to use user interface. My role was to research, design and test all UIs related to the project. I collaborated with design, product development and engineering to launch this project.
Background
Project Duration: 2 x 2 week sprints
My Role: UX/UI Designer,
- Lead the UX/UI design and deliver design documents
- Cooperate with Product Manager and Developer team to implement products
Team: Product Consultant, Product Manager, Customer Success Manager, Front End Developer.
Problems
The Help Center is a piece of the app that stands outside on Zendesk. It is supposed to be the hub to help users find their answers. But as we kept evolving our product, the Help Center was being forgotten about for a long time, making it less relevant and useful. I identified a few problems through analytics data, user feedback, and user testings:
- Analytics data showed the usage of the search function was very low, at the same time, lots of tickets were created for existing questions.
- User testing showed more than 80% of users failed to find the article they needed.
- There was nearly no navigation within the Help Center.
Goals
The overall goal for redesigning the Help Center was to assist users to find the answers they needed easier and faster. To do that, I set a few key metrics to measure that:
- Increase the usage of the search function.
- Decrease the percentage of user fails to find the article.
- Build a navigation system so the user always knows where to go.
Challenges
There were two big challenges when I was working on the redesign:
- Design within the ability of Zendesk.
- Content in Help Center was being updated as we shifted the direction of the product.
Process
Research
Since our Help Center is living on Zendesk, it meant I needed to design it within Zendesk’s ability. So the first thing I did was read their support documents, as well as explore other Help Centers built on Zendesk, to understand what I could and couldn’t do. Also, I had a sneak peek at a few competitors’ Help Center designs, and created an inspiration board on InVison to share my findings with the team.
Wireframe
After understanding what the feasibility of Zendesk was, I quickly sketched a few wireframes that would work for us.
After discussions with the team, I built the wireframe based on the problems we needed to solve, and from feedback from the team.
Card Sorting
One common issue when building a content heavy product is how to categorize the content. The customer success team was working on rewriting the content as we shifted the market focus. So we did a card sorting exercise to categorize the content.
In our card sorting exercise, the customer success team did it internally first, to come up with category names that made sense to the team. Then we sent out the online cart sorting exercise to select groups of users. They were asked to put the articles into the categories that made sense to them, but they also had the option of adding new categories by themselves.
Design
In the redesign, I followed these three rules:
- Make it easier for users to find what they are looking for through categorized content and build better information structures.
- Make it easier for the user to search for content by providing popular search topics and tag contents with users’ words.
- Prioritize frequently asked questions, as research shows 80% of user questions can be answered by 20% of documented answers.
Search Bar
A big problem we had before was users were not using the search function. That was actually a little bit odd to me until I did the user testing sessions. In the home page, primarily because of the background image, the typography size and colour, most users just scrolled down immediately without noticing the search bar at all. In the article pages, the search bar was positioned on the right side of the bread crumb navigation, and because of the typography and weak colour contrast, most users still didn’t notice it at all.
So, in the home page redesign, I did three things to improve the search bar design. Firstly, I made the search bar stand out from the background; secondly, I used big headings and instructional texts to draw users attention; lastly, I used popular search topics to provide popular search results to the most searched keywords and reduced the amount of work to just one click to search. In the article pages, I put the search bar on the sticky top navigation bar, and utilized high contrast between the background and the search bar, which made it visible all the times. After the redesign, the usage of search function increased 4x over the previous design.
Home Page
Another big part of the redesign was the home page. It’s the entrance for all the help content. The old design was just simply a search bar and followed by a huge list of article titles. It was hard to scan and to find a specific topic.
In the redesign, the home page was divided into four sections that are most needed by the user: search function, content category, FAQ, and product updates. A scroll to FAQ section button on the page header was added after because user testing showed the users don’t know there were FAQs on the bottom half of the page.
Other Pages
The other major pages are for specific roles, topic page, and article page.
In the specific role page, the categories have come from the card sorting exercise to make sure users can find what they are looking for easily.
The topics page has a bread crumb navigation to help the users oversee where they are, and a side navigation was added to help users navigate within the section without going back to the specific roles page.
The article page has a bread crumb navigation and side navigation as well. Also on the bottom of the article we suggest related article to users to help users find related content as they needed.
In all these pages, one or more short cuts were provided to help users submit a question, if they couldn’t find what they were looking for initially.
Results
The results after the redesign were great:
- The usage of the search function increased 4 times.
- The views of articles increased 8 times.
- User testing showed 80% of users could find the article they were looking for.
What I learnt
When I first had the card sorting exercise with the customer success team, I was having trouble with understanding the article titles. Card sorting is a great exercise to understand how to categorize content, but when you send out your exercise to your select users, please have team members go through the exercise first to see if the topics are clearly written so that you won’t get useless results from your users.
👏🏻Thanks for reading! Please feel free to leave your thoughts and comments below! If you want to know more about me, 🔗 click here!
