COMPANY

eshots

A tech company offers consumer data capturing platform at corporate events. They provide platform to plan, manage and analyze the events ROI.
CLIENTS
PRODUCT​

EventBoss

EventBoss is part of the Event Lifecycle Manager platform. It manages and organizes qualitative and quantitative data collected at corporate events.
MY ROLE
UI Designer | eshots
​
Worked with Product Director, 
Marketing team & Engineering team

Problem statement

There was an excessive internal hours logged in each month for the client support. eshots wanted to improve EventBoss to decrease the supporting cost. EventBoss had design issues to improve below.
1. The design looked outdated and not consistent.
​
2. Certain features were not intuitive.

Solution

Define a visual guideline

I spoke to the Product Director to start establishing the Design System. This ensures design consistency across the platform.​

Update the UI Design

To make features more intuitive, it was important to create a clear visual hierarchy and remove unnecessary elements.

The Challenges

Collaboration with internal stakeholder

We brought the marketing team and the engineering team together to come up with the consistent design direction for the first time.
​Prioritization
We toggled between working on our Design System and enhancing EventBoss. Planning and prioritizing the tasks with other teams were crucial through this process.​
Establishment of the visual identity as a brand
It was important to differentiate from our competitors, Limelight, Network Ninja and Mozeus.
FINAL DESIGN OVERVIEW

The design process

Getting acquainted
Persona
Below are two main client user personas of eshots product that was handed off from the previous UX researchers. 

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 objectives

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
​Clear

​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.

​While you're down here, check out my other project

Mode website case study

Analytics platform that brings data science and business intelligence together.

Illustration