We are designers & dreamers. What can we do for you?

Euclid Analytics

UX | Information architecture | data visualizations

_____________
Role

UX Lead

_____________
Date

2017

_____________
Client

Euclid Analytics

_____________
Problem Statement

Euclid Analytics wanted to enhance their dataset by including identified visitors to enable people-based marketing. The profile of a customer would also link to look-alike models to help marketers build larger audiences. My task was to ideate and create new designs and flows for the People and Profile page. I was allowed to explore new design patterns since no set style-guide was in place. In addition to the People and Profile page, I provided new information architecture for their navigation bar and created a design system for KPI’s. I worked alongside the VP of Product for product requirements and the Engineering team to deliver pixel-perfect designs via Zeplin.

Tools: Whiteboard, Paper & Pencil, Sketch, Zeplin, Adobe Illustrator

Dashboard Flow Wireframes

We wanted to show the power of the Euclid dataset when married with the clients’ data. We decided to validate the value of the identified profile by having the sales team demo the feature to prospective clients. The talk track illustrated how easy it would be to connect internal and external data sources such as a CRM, Social channels, loyalty programs, and more.

People Page Wireframes
I spent a significant time in Trello understanding pain points and requirements. I then started brainstorming/wire-framing ideas. I used card sorting to refine the information architecture and create a hierarchy of KPI’s to display. To get into the mindset of the Marketer, I drafted common goals & needs and looked at tools they spend time in, i.e MailChimp.
High Fidelity Wireframes

My goal was to explore designs that tell a story about our customer (Rachel Alexandria) that builds as you add additional data sets. First draft designs highlighted her locations via the maps view with the top three most important metrics followed by a timeline view of her visits, profile data, labels, and secondary KPI’s.  The designs quickly evolved with each revision.

Testing & Design Explorations

While designing the screens, I started creating a library of components that included buttons, KPI’s, list views and general interface functions. This library served as a central hub to facilitate a consistent experience instead of introducing new design patterns.

I tested designs with internal stakeholders and iterated based on feedback. I did some design cycles on the timeline view but we decided to push to the next design sprint.

Although not in the original requirements, I created a customer engagement activity feed view. I wanted to visually show the influence of marketing efforts led by the retailer on the customer in a style of a conversation. The design pattern also made it easy to layer additional events that may drive behavior on both ends. I also did a design rev on KPI’s and spent some time fine-tuning pixels to make the interface more balanced whilst aligning with brand colors and fonts. In addition to fine-tuning the design, I thought about empty and loading states for KPI’s.

Clickable Prototype

A significant time was spent providing guidance on various UI/UX related issues such as KPI’s, Navigation, logo assets, bugs, inconsistencies in information architecture, and others. I also created a clickable prototype for the Audience Builder, Location, and Date Range picker. The flow below shows the create, edit, and export an audience/segment flow.

00
Hand-Off & Final Designs

I was able to push through many updates while working with the team one-on-one. My goal was to build trust and a smooth working relationship where they start to appreciate the tiny details in UX that contribute to a delightful experience.

To help speed through the development and minimize UX/UI issues, I signed up with Zeplin to make it easier for the front end team to implement my designs down to the pixel. The tool allows them to grab all CSS attributes on the fly for any page and/or element. I also suggested a UX Sign-Off column in Trello to serve as a usability pit stop.

Lastly, I created a UX resource folder on GDrive to not only serve as a repository for all things UX but to also facilitate a smooth transition over to the new in-house designer. The folder included important links, fonts, assets, mockups/wireframes, Sketch source files and more.