📍 New York City
ii-resize-1.gif

Grammar Editor

 

Premise

This project is on internal tools. The product objective is to improve the user experience for our campaign managers to maximize efficiency. There has traditionally not been a lot of time and effort put into the maintenance of this database (that we have dubbed “Genopedia”) but now that engineering efforts have been allocated to migrate from Backbone/Marionette to React/Redux, it was an opportunity to design for product and ux improvements as well.

 

Design Objectives

1. UI/Visual Design: to create a component library / design system for this product
2. UX/Information architecture: to gather information in determining what problems currently exist and prioritizing which ones to resolve
3. Product/Interaction Design: designing for all states of the new solution / feature

 
 
Current Flow.png

UX/Information Architecture:

existing state: overall flow

 

Product/Interaction Design:

Grammar Editor Flow

screen_shot_2018-04-02_at_9.48.00_am__3_.png
Screen Shot 2019-02-12 at 3.19.27 PM.png
 

UX/Information Architecture:

 
Screen Shot 2019-05-29 at 1.30.18 PM.png
 

User Research

In starting this redesign initiative, I sat in on campaign manager meetings & interviewed CMs (campaign managers) 1:1 to better understand their workflow. From these chats, I made the following observation:

  • Each CM uses the product differently. These differences can be traced up to the various brands and industries they work with. Even within the same industry, every brands marketing strategy and workflow vary from one another. It was important to understand the source of these nuances because when it came to making product decisions, the question had to be framed into “How can we fit all these varying needs” rather than a question of prioritization. (Ex: When Clarke works with financial services, retail, and travel clients… he has to work through different sets of considerations between these accounts).

Thus, parameter 1 was found and established

Synthesis

From this meeting, I discovered that the right half part of the experiment details page was largely untouched. I brought this finding up to the product team to also “reconsider workspace fields in experiment details page” as a priority item.

 
 
Experiment Details Page

Experiment Details Page

 
 

Experiment Details Page

 

Following up the “reconsider workspace fields” agenda I discovered, I polled the CMs to come up with a list of frequently / less frequent / unused fields.

Screen Shot 2019-05-29 at 1.08.24 PM.png

We split the attributes into two categories: Primary & Secondary

Primary attributes were ones that were found to be used in almost every account they encountered. Secondary attributes were used much much less often if at all. 

 
Prim/Secon.png
Secon UI.png
 
 

Genopedia Flow

How did the CMs want and prefer to access this information?

 
 

User Research

Clarke.png
 
 
 

User Research Synthesis

Through the user interviews, I noted a few details from the CMs.
1. Some fields were repeated in different pages. We needed to find out why and whether there was a way to unify them.
2. A desire to edit fields no matter the phase of the product they’re in. They were tired of having to move back and forth between pages to make small changes.
3. The UI could use some work. Even though they were familiar with the product, it was hard to navigate because the UI was unclear. (Ex: It was hard to discern where one workspace started and ended. There is no title / identifiable UI elements).

 
 

To address user flow, we came up with two options for the CMs to consider.
In both versions, the campaign and experiment page were combined.

 
 

Option A

II.gif
 

In option A, a new way of surfacing information is introduced. I created a table that allows for CMs to see high level information regarding all workspaces made for a particular campaign.

They can then click into the “View Workspace” button, where it will take them to the “Grammar” page.

The Grammar portion of the page cannot be accessed until the form fields up top are filled out.

A 4 page process gets consolidated into 2.
Campaign ➡️Experiments ➡️Workspace ➡️Grammar
Workspace Overview ➡️ Grammar

I.png
II.png
III.png
 

Option B

 
 

Option B was more similar to the existing flow.

Akin to Option A, a 4 page process gets consolidated into 2.
Campaign ➡️Experiments ➡️Workspace ➡️Grammar
Workspace Overview ➡️ Grammar

The differences lie in
1. Where Experiment detail fields get filled
2. Workspace views

In Option B, workspace fields get filled out before entering the Grammar Editor & all workspaces can be accessed and edited in one place.

Option B II.gif
 
hack 1.png
hack 2.png
 
 

Product & User Feedback

Workspace Overview

Workspace Overview

 

The idea of having a "workspace overview” came from the VP of product. He thought it could be useful for the CMs to get an overall view of their campaign statuses before getting on with their day. While it was a thoughtful consideration, feedback from the CMs shed light on their real (vs. hypothesized) concerns and the priorities we should be fixating on.

 
 
workspace comments.png
 
 
 

In reality… a lot of questions came up when we presented them the “new and improved version” (Option A).

From the feedback session, it became evident that while Option A was more optimized in terms of information organization and the flow from one screen to another, it was ultimately not worth the tradeoff of being able to see and edit workspaces workspaces all in one place that Option B allows.

Verdict: Option B

Option C

Option C.png
 

Part II: Grammar Editor

 

Grammar elements

Grammar Editor - a tool that enables CMs to build sentences from suggested phrases (aka, alternatives)

Grammar Editor - a tool that enables CMs to build sentences from suggested phrases (aka, alternatives)

Knowledge Base - referential information that aids the CM in building grammars

Knowledge Base - referential information that aids the CM in building grammars

Primary Values: most (algorithmically speaking) relevant options available

Primary Values: most (algorithmically speaking) relevant options available

Alternatives: choices that CMs can refer to in case primary values are incompatible (does not match brand voice of client).

Alternatives: choices that CMs can refer to in case primary values are incompatible (does not match brand voice of client).

 

Wireframing Process

Product/Interaction Design:

Wireframing

Wireframing, individual

Wireframing, individual

Wireframing with CMs

Wireframing with CMs

 
Wireframing with Product

Wireframing with Product

wireframing with Devs

wireframing with Devs

 

Interaction Design

 
Try.gif
 

User Interface

Low/Mid Fidelity Mocks

Static Low:Med Fidel Mocks.003.jpeg
Static Low:Med Fidel Mocks.002.jpeg

Interaction Prototype

 
Manual Add.gif
 
 

Satisfaction Survey

Screen Shot 2019-06-04 at 12.55.51 PM.png