Comprehensive redesign of the Ecomz help center to enhance support efficiency and user self-sufficiency

Executive Summary

Outcomes

20%

Reduction in support tickets

70%

Faster information retrieval

AA

WCAG compliance

Role and Responsibility

  • Project lead
  • UX/UI design
  • Front-end development
  • Design system implementation
  • User experience testing

Project Scope

  • Design and development of the Help Center
  • Integration with Zendesk
  • Improved accessibility
  • Smart search functionality
  • Consistent brand alignment with the main website

Business problem

The existing Help Center was outdated and failed to provide users with the necessary support, leading to a high volume of customer queries and support tickets. It was also misaligned with Ecomz's new brand identity, creating a disjointed user experience that did not reflect the company's values or visual aesthetics.

User problem

Users found it difficult to navigate the Help Center, with poor search functionality and a lack of clear, structured information. This resulted in frustration, extended support times, and decreased satisfaction with the platform. Additionally, the absence of a cohesive design led to a lack of trust and engagement.

Resource Coordination

Leveraged the existing design system from the Ecomz Marketing Website project to streamline the design and development of the Help Center. This reuse of resources allowed for rapid iteration of wireframes and a cohesive design that aligned with the Ecomz brand identity.

Design System Implementation

I used design patterns and material library that came from the design system I previously created to ensure consistency across the Help Center, reducing development time and maintaining brand integrity.

Infrastructure Setup

Coordinated with customer support to establish a user-centric infrastructure. I also conducted a sorting tree exercise to ensure the categorization of content matched user expectations. This also involved implementing multilingual support to cater to the diverse MENA audience.

I personally handled both the design and coding of the Help Center, ensuring the help centre was integrated with the marketing website, the SAAS platform, and customer support systems.

Promoting Self-Service

I created a system to push self-service options, significantly reducing the reliance on customer support for routine inquiries. Previously, customer support was overwhelmed with calls that could have been resolved via self-service, leading to inefficiencies. The new system allowed customer support to focus on critical cases, improving overall service quality and response times.

While not directly measured during my tenure at the company, it's estimated that this initiative resulted in a 40% reduction in routine support calls.

I also developed a script to generate an FAQ section based on the Pareto Principle, where 20% of the answers addressed 80% of the most common user queries. The FAQ section was created to enhance user self-sufficiency and reduce the load on customer support. Since Zendesk does not come with an FAQ page by default (at least not in our subscription tier), I created a custom script to generate an FAQ list. This custom solution allowed us to better meet user needs while optimizing the support team's efficiency.

User Research

I conducted qualitative research to identify key pain points in the existing Help Center. This research informed the criteria for the redesign, including the need for improved search functionality, better content structure, and multilingual support

Research revealed that our core target audience in the MENA region favored personalized in-person service, but this approach wasn't sustainable long-term. Further investigation on how to overcome this hurdle highlighted the need for a prominent search feature, clear categorization, and simple language.

Stakeholder Identification

We defined personas focusing on small to medium-sized business owners in the MENA region, who are the primary users of the Help Center. I identified key stakeholders, including potential and existing customers, as well as internal teams like marketing, sales, and customer support.

The core target audience in the MENA region preferred a managed service approach due to the complexity of the platform. This perceived complexity was not due to the platform itself being inherently complicated, but rather due to lack of structured support articles that were easy to find and reference.

Information Architecture

I structured the Help Center with simplicity in mind, ensuring users could quickly locate relevant information. I kept the site map shallow, with a focus on surface-level navigation to reduce the complexity of finding answers.

Image showcasing the sitemap of the Help centre which contains the following 8 page types: Server status, search page, category page, section page, article page, community, discussion board, and post pages Image showcasing the sitemap of the Help centre which contains the following 8 page types: Server status, search page, category page, section page, article page, community, discussion board, and post pages

Component Design

I leveraged the design system previously established from the marketing website to create a consistent experience across the Help Center. This included the navigation bar, footer, and button designs, all of which were adapted to fit the context of support content while maintaining brand consistency.

Wireframing and Prototyping

I created wireframes based on the established design system, allowing for rapid iterations. The focus was on enhancing the search functionality and ensuring intuitive navigation. The prototypes were tested and refined based on user feedback to ensure they met user expectations and business goals.

I prototyped the designs and conducted usability and user testing concurrently with the development of the Help Center. This unorthodox method allowed for rapid iterations and on-the-spot testing, enabling immediate adjustments to user flows based on real-time feedback. While this approach deviated from traditional prototyping processes, it proved to be highly efficient, allowing for quick refinements that aligned with the overall design system. The prototyping sessions demonstrated a 70% faster information retrieval process compared to our previous self-help database.

Wireframes showing the development of the interface on desktop Wireframes showing the development of the interface on desktop
Wireframes showing the development of the interface on desktop and a much more refined drawing that clearly delineates the structure of how the homepage UX would develop Wireframes showing the development of the interface on desktop and a much more refined drawing that clearly delineates the structure of how the homepage UX would develop

Community and Content Expansion

We decided to introduce a community discussion board to encourage user engagement and content expansion. The board allowed users to help each other and contribute to the Help Center's knowledge base, which was continuously updated with new user-generated content.

Homepage and Navigation

Designed the help center homepage to immediately present the search bar as the primary navigation tool, minimizing the time users spend finding information. The page also includes a category selection and an FAQ section to assist users who need more guidance.

Image showcasing the homepage on mobile focusing on the first page fold on landing with the search bar greeting the user and prompting them to begin searching the help centre Image showcasing the homepage on mobile focusing on the first page fold on landing with the search bar greeting the user and prompting them to begin searching the help centre
Image showcasing the homepage on mobile focusing on the category selection section. Each category comes in a subtle button format with a drop-shadow. The text content describing the category has an icon above. Image showcasing the homepage on mobile focusing on the category selection section. Each category comes in a subtle button format with a drop-shadow. The text content describing the category has an icon above.
Image showcasing the homepage on mobile focusing on the FAQ section Image showcasing the homepage on mobile focusing on the FAQ section

Category and Article Pages

Structured category and article pages to ensure ease of navigation and quick access to relevant information. I also implemented dynamic content features to display related articles and excerpts, enhancing the user's ability to find the right information efficiently.

Image showcasing the Category page on desktop with a list of sections and some samples of articles listed under the sections. Each section leads to a section page with a complete list of articles that are associated with that section. At the top of the page there is the category title and a search bar. Image showcasing the Category page on desktop with a list of sections and some samples of articles listed under the sections. Each section leads to a section page with a complete list of articles that are associated with that section. At the top of the page there is the category title and a search bar.
Image showcasing more of the category section's body and list of articles to give a better idea of how the content sits together visually in the design, with a focus on the whitespace between elements Image showcasing more of the category section's body and list of articles to give a better idea of how the content sits together visually in the design, with a focus on the whitespace between elements
Prototype showcasing the article page and focusing on the article title, and list of related articles. The user experience allows users to easily navigate between related articles, and even follow specific authors Prototype showcasing the article page and focusing on the article title, and list of related articles. The user experience allows users to easily navigate between related articles, and even follow specific authors
Prototype showcasing how the Article content ends. At the end of each article is the opportunity for users to upvote or downvote articles, leave comments, and browse through related articles. Prototype showcasing how the Article content ends. At the end of each article is the opportunity for users to upvote or downvote articles, leave comments, and browse through related articles.

Community and Search Integration

Developed a system where new questions asked in the community forum were added to the Help Center as new articles, ensuring continuous content expansion. The search page was optimized to prioritize user-generated queries, making it easier for users to find relevant information.

Image showcasing the search page on desktop with focus on the results, search terms, and a filter by type function Image showcasing the search page on desktop with focus on the results, search terms, and a filter by type function
Prototype showcasing the UI/UX of the discussion board focusing on the board title, follow button, and site-wide search bar on top of the page Prototype showcasing the UI/UX of the discussion board focusing on the board title, follow button, and site-wide search bar on top of the page
Prototype showcasing the UI/UX of the mobile Post Page template focusing on the post title, and a button that allows users to receive updates about a specific post. Prototype showcasing the UI/UX of the mobile Post Page template focusing on the post title, and a button that allows users to receive updates about a specific post.
Prototype showcasing the UI/UX of the mobile Post Page template focusing on the comments sections, and the transition of the end of the post page to the footer Prototype showcasing the UI/UX of the mobile Post Page template focusing on the comments sections, and the transition of the end of the post page to the footer

Let's Collaborate to Shape Your Digital Journey

Looking to kickstart or improve an underperforming product? Taking a leap into the digital world? Whatever it is, I’m here to help — just reach out to me using this form.

Your information is confidential — I will never share it with anyone, for any reason.