Challenges

1. Since the data was imported from various sources, the process to make it more useable was very tedious. For example, it required a reformatting process that required a staff member to do, rather than the same user. We wanted it to be more self-serve so users could get what they needed, more efficiently.

2. We wanted users to go beyond just bringing data together but, being able to notate insights as well as take action back on their campaigns.

‍

‍

Features I worked on

• Data table configuration (filters & presets)
• Insights
• Adding new data sets
• Daily digest feature
• New home screen + navigation  
• Drag and drop component functionality

and additionally:

• Design system

‍

Feature highlight 1: Filters on data tables

The filter functionality was bulky and confusing for users. Here is what the filters looked like originally.

‍

‍

Design Process:

‍

Early iterations on how adding a filter would appear

‍

In addition to having filters applied on the column, we wanted the filters to be visible and actionable from the top of the data table since it was an important feature.

‍

‍

While working through iterations, we came across various use cases that needed to be considered.

Such as:

• How should dates be formatted?
• Should the time zone be relative to the user or the team's location?
• Displaying text versus operations
• Multiple date selection - how would it look?
• What order should the filters be in?
• What happens when the filters go beyond one line?
• Can the filters be saved as a preset and reused?
  • If so, would that be on a user level or a team level?

‍

‍

‍

Testing & Iteration

Using insights from stakeholders and task analysis, we iteratively improved the app.

‍

‍

Solution

The final result was a more intuitive interface that was much more robust. It also allowed users to filter and save data tables which not only was more self-serve but led to more engagement and sharing in the app.

‍

Use the expand icon to view and interact with the prototype.

‍

‍

Outcome

• Much more functional table, users could actually sort through the data leading to more insights, and reported less frustration
• Having the functionality to apply multiple filters, save those filters and share across teams enabled more collaboration and hence more use of the application

‍

‍

‍

‍

Feature highlight 2: Insights

‍

Background

Users expressed a need to be able to save and come back to valuable information they discovered in their data table, so we built out a new feature called insights.

‍

‍

Early mockups on how a user would add an insight

‍

‍

‍

Early designs of the page for managing and editing insights

‍

‍

Experimenting with different card styles and layouts

We used Ant Design as a basis for many of our components, but expanded on and customized them to fit with Alpha's functionality.

‍

‍

‍

Outcome:

Users were now able to save valuable insights, edit them and share them with team members. The creation of this feature also led to new features that would allow users to create workflows with their insights.

‍

‍

Final Designs

‍

‍

‍

‍

Design System:

‍

‍

Challenges

• Growing app functionality = too much visual inconsistency
• Communication gaps and inconsistent language
• Too much unnecessary time spent on building / designing

‍

Our Process

1. Defined the goals
2. Audit of existing atoms
   • Storybook
   • Miro to document patterns, redundancies
3. Established foundation of grid system, spacing, color palette, core components etc.
   • Discussed and documented in Confluence
4. Atoms - molecules - organisms
   1. Design, iterate / discuss, document
   2. Borrowed from Ant Design and other established design systems such as Shopify, Atlassian
5. Slowly integrated new components to the app and continuous improvement

‍

‍

‍

‍

‍

‍