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 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.
With eHQ's legacy platform:
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
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:
Mapping out IA and evaluating userflows
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
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.
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.
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