PROJECT

Data Visualization Tool

My team worked on a new feature, creating a data visualization tool as a part of the Event Lifecycle Manager platform. 
MY ROLE

UX Designer | eshots

Worked with
​Product Director & Engineering team

Problem statement

There is not a suitable centralized repository for clients to have access to historical event information

Solution

Create a platform for clients to efficiently manage historical aspects of their event analysis. 

The Challenges

Different clients with different needs

Early clients were Coca-Cola and USAF. They came with different needs, such as the level of security requirements for the legal matter.

Existing ecosystem to consider

Collaborating with engineering team, eshots current tool had complicated database architecture to consider.
FINAL DESIGN OVERVIEW

The Design Process

Getting acquainted

Persona

Below are two main client user personas of eshots product. 

Persona insights

Legibility is a significant consideration.
We needed to ensure enough contrast between text and its background. The products on iPads and iPhones are being used in the field under direct sunlight.
Use the short words.
The use of words and the written sentences determines personality of the brand. As a tech company, we need to communicate in a human way and use the people language.

Competitive analysis

We looked into other data management system companies to see their design. We analyzes their visual impression, usage of colors, typefaces and layouts. ​
Companies with professional impression used blue with limited number of colors.

The design on the typeface, sharpness of elements, icons were consistent. Most typefaces used on these companies were only san-serif. Companies with playful impression used high contrast with many hue tones.

Design goal

Working with the marketing team, we conducted user interviews and defined our brand characteristics below to guide our design direction.
PRINCIPLES
Consistent    |    Intuitive    |    Delightful
PERSONALITY
​Professional    |    Trustworthy    |    Reliable

​Empathize and define

Style directions
​Below are three different style tiles that I presented in order to start the discussion, and to get feedbacks on different directions on design elements.
STYLETILE 1
I used blue as primary color and had minimal visual design approach to create the professional feeling. The team were concerned with the drop shadow due to accessibility issue with the products being used under the sunlight at the field.
STYLETILE 2
Using the red as the primary color, I balanced with light blue. The blue I used has playful tone. To include an approachable impression, I sharpened the corner of the buttons to balance out the professional feeling. I used Avenir because it is trusted fonts and has the voice of eshots and stylistically consistent with the logo typeface, Gill Sans. Internal steak holders highly preferred this typeface.
STYLETILE 3
Futura has modern and playful impression and pink and purple shows the adventurous look. I used rounded corners to balance down the strong and sharp feelings. Based on the feedback, we decided this is not the visual direction we want to move towards to, because the color did not have the corporate feeling that was important for eshots brand. Our team decided that having red as the primary color, instead of pink or other alternative colors.
FINAL STYLE GUIDE
Through the process of iterations, below is the finalized style tile our team agreed to move forward with. We used red as the primary button color. To balanced the alarming color, I chose toned down dark blue scheme as the secondary colors.

To maintain the sophisticated and professional feel, I sharpened the button corners. We added interesting element as the relative photographs on the background. 
AND MANY MORE :)

UI Design Updates

Image below - Log in page design refinement
Image below - Updated Log in page design
Image below - Old Calendar page design refinement
Image below - Updated Calendar page design
Image below - Old Event List page refinement
Image below - Updated Event List page
Image below - Old Recap page refinement
Image below - Updated Recap page refinement
Image below - Old Media page refinement
Image below - Updated Media page
Image below - Old Media modal page refinement
Image below - Updated Media modal page

iOS Updated with the new design

Testing & feedback


Usability testing was conducted during the early stage after the beta version was launched in May 2018 with clients, in order to identify their experience in the usage of the products.

​For new features, InVision prototype was shared with internal stakeholders and engineers to get early feedback.

Impact

What I learned

FEEDBACKS ARE ESSENTIAL
Getting feedbacks were crucial along the process. When the design was exposed to opinions, critiques, and experiences from other points of view, the more improvements were being made.
PRIORITIZATION IS THE KEY
When we were starting out, the roadmap on design has been foggy because we were creating a design system while updating the UI Design. Having clarifications on the prioritization with engineering team was useful to navigate through.

Since you're down here, check out my personal project