Issues

Wootric customer feedback

Documentation site was disorganized and lacked direction to the information they needed.

What I identified
  1. No indication of which documentation page they were on.
  2. No option for further assistance provided for customers.
  3. Excessive white space on the homepage — space can be better utilized.

Research

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
  1. Homepage with an overview of their documentation.
  2. Sign in/Sign up links to their platforms.
  3. Support link for additional assistance.
  4. 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.

Goals

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:

  1. Easy access to information
    Allow customers to easily access the documentation they need with clear direction.
  2. Design consistency
    Ensure design consistency with other Wootric platforms such as the marketing site and web application.
  3. Low impact changes
    Avoid making changes that would interfere with existing documentation content.
  4. Efficiently release changes
    Project was time constrained to a week as I had other project commitments that sprint.

Process

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.

Solution

Design

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.

Development

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.

Consistency

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.

Details

  1. 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.

  2. Dropdown Navigation

    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.

Survey

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.

Result

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.

Considerations

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.

More Projects
Designed + built by Victoria Koh © 2020. Updated September 2020.