tile.png

Creative Personalization

Creative personalization

tile.png

Study after study has shown that personalizing messages can make your marketing far more effective. Creative personalization enables non-technical users to create more personalized messages to target end-users in Workflows through the use of the Liquid templating language.

Our aim was to provide marketing practitioners a better way to personalize messages with the use of dynamic messaging, improve understanding of their audience, and introduce best practices and suggestions for better personalization.
Adding dynamic messaging to Workflows is crucial for Workflows adoption and driving personalization capabilities.

The team

team2.png

The working team for this project was a collaboration between design and engineering, as well as regular check-ins with our data analyst and customer success managers. The lack of product management required a tight teamwork approach within the functional groups.

On the design front, my role as leading product designer was to help define the direction with gathering the user feedback and usage data, write user stories, and collaborate to define scope for MVP. We conducted competitor analysis simultaneously. Interaction design begun with diagraming the object model and defining user flows, through wire-framing and ending up with a hand-off clickable prototype.

 

User data analysis

areas.png
 

Analyzing user data and gathering user feedback with conducting user interviews we uncovered two main focus areas that would cover more than 95% use cases.
The areas were personalizing using languages and using profile attributes for specific end-user preferences. That information was crucial in decision making around scope and complexity of the project.

 
data.png
 
 

User stories

 
Screen Shot 2019-03-14 at 7.30.35 AM.png
 

Gathering data and conducting user interviews were a starting point to defining user stories related to this work.
Together 6 user stories broken apart to smaller tasks were helpful for and easier functionality scoping on the backend engineering side.
An example of a story is below.

 
Screen Shot 2019-03-14 at 7.08.54 AM.png
 
 

High level overview

 

Too often the product, engineering and design teams step into the weeds of a project very early in the process, which can result in losing the full view of objectives. Clearly defining the different areas of the product / documentation / branding website that the upcoming project will impact is crucial for early communication and collaboration across different teams.
A high level overview was an aspect I was personally introducing and driving in the Localytics product organization.

 
Liquid in workflows- scope.png
 

With the creative personalization project, our main areas of focus were Learn, Build, Confirm and Understand. For the non-technical persona, we realized it was important to provide learning opportunities such as: guides, best practices and a library of supported values.
The heart of the project was the personalization builder that supported dynamic text content with adding multiple languages and profile attributes. To address the practitioner’s fear of sending messages with errors, live preview, preview on device and testing were crucial.
We took a step in the future to begin planning for feeding intelligence to the products. Understanding the performance with in depth analysis, and even better, our intelligence auto-suggesting next steps based on the end users behaviors is the direction we are heading in the future.

 

Wireframes and interaction details

 
wires.png
 

While exploring multiple interaction possibilities, the team was not in full agreement on the direction to move forward. In an ideal world we would have conducted a short user test.
We were met with a time restriction and decided to gather pros and cons of using different approaches. The decision making was easier with a clear diagram of pros and cons based on user feedback.
Whimsical was a favorite tool for quick diagraming and wireframing, which allowed multiple members of the team to weigh in with edits and commenting.

 
Languages@2x (1).png
 

protoype

The last design deliverable were high fidelity mockups created in Sketch. Building an InVision clickable prototype was the best practice handoff to the frontend engineering team.

 
mock.png
 

The collaboration between teams was far from finished, and it continued with breaking the designs to Jira tickets as engineering tasks.

 
Screen+Shot+2019-03-13+at+7.29.37+AM.jpg