← Bang The Table

Engaging the community.

I joined Bang The Table late September 2019. I joined when the organisation had decided to expediate the revamp of Engagement HQ (eHQ), their B2B web platform. This is the story of how I helped them revamp and launch eHQ, while integrating it with a design system./p>

2 member design team | B2B Web platform | 8 weeks (Nov 2019 - Jan 2020) design + launch

My Role

My role was to overhaul the eHQ platform UI, integrating the new design system and enhance the UX of frequently used features based on feedback we received. I was also to co-ordinate with marketing and customer support to keep them informed and get their feedback on new and existing features we were building. I also supported the customer support team by writing help articles for new features.

The Challenge

With eHQ's legacy platform:

  1. There was very little documentation. Over the years functionality had been modified but hadn't been documented.
  2. High level userflows were missing
  3. Having no design system, parts of the platform looked different.
  4. For public-facing pages, the UI was to be modified only by styling and the structure was not to be touched. This was because the backend for these pages was older and was going to be taken up later.
  5. The experience across the application hadn't changed in 6-7 years.

The Approach: Planning

There were three areas of the application we wanted to improve as a priority:
A. Frequently used features
B. Allow admins more control over platform
C. Update public facing pages

What we did know: Understanding the user

There had been done some amount of research over the years prior to starting on the project, that included personas, journey mapping and IA.
Two primary users - Admins or Community Managers who set up projects and Community users or participants who give feedback and vote on published projects.

Old platform sample screens.

Existing work done in understanding the user.


The first step was to start with existing commonly used IA and user flows. For userflows We identified areas where they could be improved. For features that didn't have documentation of IA, we mapped it out. Feature that were prioritised:

  1. Platform Settings: This was crutial in setting up the platform.
  2. Project management and creation page: crutial for Community managers in publishing features.
  3. Newsletter creation flow: Creating a linear process so that newsletters that were being sent to users were easier to create and send.
  4. Homepage Editor: Giving admins more control over how their community homepages looked.
  5. Building on the Ant Design system: Customising the Ant Design System to suit our needs.

Mapping out IA and evaluating userflows

Settings Page

Global settings for a project dictate how all consultancies receive feedback, how paticipants can share, notifications to participants and who is allowed to moderate discussions. The issue with the existing design was that information wasn't organised logically, a lot of microcopy was written by engineering and was confusing, and some fields were redundant or no longer had a purpose.

The legacy platform v/s the renewed platform

Renewed settings screens

Project Management Page (PMP)

If a local government wants to create awareness of a project they start by creating a project page. The current PMP didn't take advantage of modern CMS applications. It was difficult to visualise what the page looked like unless previewed. To overcome this challange, the revised PMP was structured so it reflected, like modern WYSIWYG editors, what the published page would look like.

The listening tools and widgets that were participant facing were also relooked at. Some needed only a UI facelift, while others needed a rework on how they were set up. Tools and widgets now could be edited via a drawer that was an overlay on the project page, giving context to the Admin.

PMP page - legacy v/s renewed

PMP page - creating a project in 3 easy steps

Widgets - Using widgets via drawer to give context

Tools - Using tools via drawer to give context


A newsletter goes out to participants on the progress of various consultancies as well as related consultancies. The legacy platform had this embedded deep in settings and was difficult to edit.

The newsletter creation showing the steps in creation.

Home Page Editor

The Home Page Editor was a new feature to give more control to admins to design their home pages that contain all their consultancies. This used a drag and drop functionality with templates and themes.

The home page editor with themes and functionality.

Design System

In helping speed up development time, the Ant Design System was used as the base system upon which customisations were made. This was then used as a common library used across the platform.

The BTT design system