UX/UI INTERNSHIP

Sentry - UX/UI

Tools: Slack, Figma, Photoshop, Google Slides

Overview

Being an UX designer intern for RF Code, focusing on the software aspect of a real-time asset managed device. 

I had the opportunity to work with the product &marketing team, as well as the engineer team to enhance the following features for Sentry:

1. Thermal Imager 
   
2. Form Validation
3. Mobile App Icon

1. Thermal Imager

Goals

1. Users are able to identify the hotspots while tapping or clicking on the imager
2. Users are able to read the temperature on the imager
3. Users are able to go back and forth on a video to read the temperature

Problems

1. Graphs and imager are separated
2. Users did not know the graphs and imager are corelated

(BEFORE)

(CONCEPT)

- combine temperature, duration(time) and imager in a video-like setting
- user can easily access information(in a grasp)
- user will know where the hotspots take place at certain time frame of the video

Outcome

1. Incoporated policy temperature(dotted line) to compare and contrast the hotspots, so users can evaluate and assess what part can improve
2. The primary/key components in this page are the scrub bar, the video, play & pause, and the ability for user to hover/tap to get data
3. Adding the full screen option, since we can’t predict which device user use, making it full screen can avoid issues of tapping/hovering the wrong place they intended to
4. White background color verses black speaks the brand and is  consistent with the other pages on the app

2. Form Validation

Goals

1. Make our input requirements abundantly clear to the user, ideally before they make a mistake
2. Help users correct bad input without making them think
3. Prevent improperly formed data
4. Satisfy both client-side and server-side validation

Problems

1. There are several forms throughout the platform that lacks validation
2. Users did not know if they’re submitting correct data

Strategy

1. Adopted inline validation to make sure user are entering the correct data beofre moving on to the next input field
2. Meet up with software engineer and product manager to walk through the solutions and feasibility to get ideas aligned collectively 

Outcome

1. Create positive experience when filling the forms
2. Increase efficiency, users do not have to spend extra time figuring why the form submitted unsuccessfully
3. Clear instructions to follow

Name Collision

When there's a dulplicate of names, the app will alert the user soon as they leave the field.

Positive Inline Validation

When the inputs are valid, the app will show a validated green checkmarks.

Max. characters

Alert users when the field exceeds the set number of characters.

 ©Tiffany Cheng.  All Rights Reserved.