PROJECT
Data Visualization ToolMy team worked on a new feature, creating a data visualization tool as a part of the Event Lifecycle Manager platform.
|
MY ROLE
UX Designer | eshotsWorked with
Product Director & Engineering team |
|
Problem statementThere is not a suitable centralized repository for clients to have access to historical event information |
SolutionCreate a platform for clients to efficiently manage historical aspects of their event analysis. |
The ChallengesDifferent clients with different needsEarly 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 considerCollaborating with engineering team, eshots current tool had complicated database architecture to consider.
|
PersonaBelow are two main client user personas of eshots product.
|
Persona insights
Competitive analysisWe 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 goalWorking with the marketing team, we conducted user interviews and defined our brand characteristics below to guide our design direction.
|
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. |
Testing & feedbackUsability 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. |
What I learnedFEEDBACKS 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.
|