Re-designed documentation web for Tyk
Introduction
In collaboration with Product, UX and CX and the design team.
Tyk went through a revamp in 2018. The company’s brand had a major update and this was to be applied across all products, platforms and collateral. The last to get a facelift was its documentation.
With new updates, features and products offerings, Tyk decided to re-work on how we can better improve the experience of Tyk docs users.
This was done through an intensive research and huge collaboration with the various Tyklings of different expertise.
Brainstorm
We first got together and began laying down the fundamentals of the docs project by identifying problems, discovering opportunities and did a competitor research to evaluate their strengths and weaknesses that we could possibly take and learn from.
Ideas Board
From the problems and opportunities we have identified, we then went into a brainstorming session for ideas to improve the docs. We took a moment to discuss and voted on some of highly valuable ones.
Priority Matrix
We then group the docs into 4 categories,
- high value, high complexity
- high value, low complexity
- low value, high complexity
- low value, low complexity
By doing so it allows for people from various teams and backgrounds to collaborate and define issues and opportunities from a holistic view.
Below are some examples of the voted ideas,
- Content writing process/capability
- Content analytics
- Improve search
- Look and Feel
- Community
Content Sorting
As the main goal of the docs is to improve Tyk’s user journey, which is to find their respective content or needs, the team carefully identify the list of content/features that could help reach the main goal.
Design
At this stage, the design team was heavily involved ensuring that we understand the requirements, and the goals of the project.
Inspiration
After understand the goals and design brief of the Documentation, we went on to look for inspiration from the competitor analysis that the team did earlier.
Some of the UI elements that we identified that could be adopted as well for the docs are,
- Illustrative icons
- Card components
- Clean layout
Low-fidelity wireframes
The design team then get to work by creating the low fidelity wireframe with the reference of the ‘content’ sorting exercise we did. One unique feature we added was to add the ‘time to install’ above the feature cards to indicate how fast and efficient to install our products here at Tyk.
High-fidelity wireframes
After confirming the skeleton, we then designed high-fidelity wireframes for individual core pages by using some of the components already created for the main Tyk website to ensure consistency.
End product
Lastly, we applied the content and UI assets and iterate the designs where we see in need of tweaks.
As a designer, I learned that understanding the end-goal(s) of a product is important to ensure you are on the same path and that will contribute to you designing better. We also need to always remember that we design for our users and not for ourselves. Empathy is key is every design step we tak.
Thank you for your time reading through this article. I hope you find this interesting and enjoyed yourself.
