Wootric customer feedback
Documentation site was disorganized and lacked direction to the information they needed.
What I identified
- No indication of which documentation page they were on.
- No option for further assistance provided for customers.
- Excessive white space on the homepage — space can be better utilized.
Before I began the redesign, I did some research by going through documentation sites of other companies. I identified common elements of these sites and noted down features I thought would be great to add to Wootric's documentation site.
Common elements I identified
- Homepage with an overview of their documentation.
- Sign in/Sign up links to their platforms.
- Support link for additional assistance.
- Search bar on homepage.
Additionally, I did an assessment of Wootric's platforms such as the marketing site and web application to identify key and common features of both platforms for design consistency.
Working closely with the CTO and the Lead Product Designer, we assessed our customers' needs, my research and the team's priorities to determine our goals, which were:
Easy access to informationAllow customers to easily access the documentation they need with clear direction.
Design consistencyEnsure design consistency with other Wootric platforms such as the marketing site and web application.
Low impact changesAvoid making changes that would interfere with existing documentation content.
Efficiently release changesProject was time constrained to a week as I had other project commitments that sprint.
Due to the limited time frame, I did a medium-fidelity prototype on Sketch to substantiate the flow and overall appearance of the UI and ran it through with the Lead Product Designer. Afterwards, I swiftly proceeded with the development of the documentation site.
To make sure the appearance across Wootric's platforms were consistent, I kept in mind the color scheme and key elements from the marketing site and web application settings page, such as the logo placement, sign-up button, font types and styles.
I did some structural changes with HTML across all the pages to include the navigation bar, but did the most change structurally to the homepage in order to make better use of the excessive white space and create the documentation "cards". Besides the homepage, I ensured alignment to the existing Slate framework by implementing most changes through CSS for the other pages.
I ensured design consistency throughout the documentation site, marketing site and web application especially with the navigation bar and side navigation menu design, and details like the link hover effect color.
Side Navigation Menu Header
Other than being a parent category of the menu items, the side navigation menu header is also a page title; intended to discreetly indicate to users which documentation they're viewing. I chose not to put a large title above the content on the right to leave room for the actual documentation content.
Having a navigation on each documentation page allows the user to navigate to another documentation easily. I chose a dropdown navigation as it conserves space and it is flexible enough to cater to the growing documentation list.
To get feedback about the new Wootric documentation site, we installed a pop-up survey that would appear within each documentation page after being on the page for some time.
We received generally positive remarks from customers over the new look of the Wootric documentation site and feedback that they were able to find what they needed and that the documentations were helpful for them.
If this project had a longer time frame, I would implement a search bar on the homepage too. Customers will be able to search for a specific subcategory of a documentation straight from the homepage instead of going into the documentation page itself to look through all the categories.