Problem: The white label IMC 2.0 platform comes with a default configuration and style. To get started on this default design, I needed a way to communicate the initial CSS settings and which of those should be editable by the Admin in the Admin Tool.
Solution: Build an InDesign document to catalog styles for every aspect of the UI to be constantly maintained by me and our visual design resource.
Impact: I contained source of record that helps in addressing JIRA tickets and communicating UI expectations with dev. Click to view snippets of this style guide.
I will focus on the evolution of a main UI component: the documentation for Notifications. Previously, the user was presented with separate sections for Alerts and Reports. These pages in the Style Guide note how these two separate containers should be styled. The effort was the differentiate the containers to denote that Reports were UI components with static information, while Alerts contained ongoing, dynamic information.
Following a series of usability tests
my suspicions were confirmed: users had little understanding of the difference between an Alert and Report. This incremental update to the Style Guide introduces styling for a collapsed container that would encompass all Notifications. Both Alerts and sections of a Report are to be treated as Notifications. The user has the ability to Archive or delete a Notification.
The current state of the Notifications documentation (see snippet of Style Guide
). Several iterations have transpired to yield an expanded Notification that prominently features a Notification summary, contextual information, and recommendations for actions the user can take. All of these elements can be styled and content edited by the Admin via the Admin Tool