What I did
UX Designer, Developer
July 2017 - September 2017
Sketch, Framer.js, HTML/CSS
During my 3-month internship with INRIX, I was tasked to redesign an interactive
date/time picker that enables a user to compare traffic at different days and times. This
benefits a client in helping them to personalize traffic data to show only what they are
interested in. I used the human-centered design process throughout to make sure my designs
were meaningful for our target audience.
My process began by conducting 5 task-based usability studies to uncover current
issues. I then used that feedback to target the redesign of features and task flows, which
were then put to a second round of task-based user testing. The outcome resulted in more
intuitive features to help a user achieve their goals, as well as a completely new visual
I started this project by conducting the usability study included remotely interview and
observed the application walkthrough with 5 INRIX customers. Based on the usability study,
the current date picker components had serious usability issues and high drop-off rate. So, the
first thing I did was to understand Why the current date picker feature couldn’t
satisfy our users' expectations? What did the users actually need? and How could I
feature to improve users’
Help users personalize traffic data they want to visualize, analyze, and download.
Reduce time on task that user need to spend on choosing and filtering data on date
Reduce company’s cost on bandwidth
Usability Study & Database Query Log
Based on the insights from user testing and data from google analytics, users wanted to select,
visualize, and download the traffic data in the specific date and time. The most common use cases of
picker components were:
Users wanted to select the data from the same specific months in 3 or 4 consecutive years to
Users wanted to be able to select date range from predefined options e.g. 7 days, last week,
last months,last year.
Users mostly categorized the data between weekday or weekend.
Users wanted to be able to focus on specific time of day.
Users wanted to add the multiple date range for comparison.
Based on the data I gathered from the user research and the product road map, there were three main
components that can help users achieve their expectations including date selection, date comparison,
and time selection. Here are the design consideration that we need to consider for date
1. Date Range Feature
For calendar view, provide visual cues and feed forward to show month and year options.
When users click on the calendar view icon, start date, end date and date range needs to be
displayed in a clear manner.
The predefined value should be consistent with users’ expectation based on users data.
2. Comparison Date Feature
Provide users with predefined date range feature mentioned above.
Enable users to add, edit and delete multiple date ranges.
3. Data Filtering Feature
Allow users to filter weekends, weekdays or a specific day.
Allow users to add, edit and delete multiple time ranges.
I started the redesigning process with a meeting with design and engineer teams to discuss existing
issues and brainstorm potential features. We created the design specification for a new date/time
selection. We listed down all features that corresponded to our analytic features and matched
with the users' intent in order to help them achieve their goals of using this application. Here is
the information architecture based on the design requirement.
1st Design Iteration.
User Testing I.
I conducted user text with 6 employees from INRIX. 3 of them don’t have any experience with Roadway
Analytics. The other 3 interact with Roadway Analytics on daily basis. Here are the results of user
2nd Design Iteration.
Using Framer.js, HTML, and CSS (SASS), I tried different interaction methods for the element
pressing and adding transitions.
Simplification is not always the best way to go. Users might prefer more complex application or
feature that has a higher learning curve that can give them more flexibility and help them
achieve what they want. [ Tips: Dont forget to add default settings for users!].
Always opening yourself for a new opportunities outside your area of responsibility. I It can
lead to something meaningful and impactful.
The product for the end user experience you have to make it as intuitive as delightful as
possible but when it come to enterprise maybe there is big learning curve and big jump to know
the product but as long as it’s learnable and user achieve their goals they have.
What would I do differently?
Get More data from users. Conduct more user testing on the high-fidelity prototype to get more
feedback from users and do one more iteration [focus on layout organization and interaction].
Dive deeper into user needs to understand their motivations. Consider alternative approaches to
address the problems.
Try to look at the project as a combination of the small elements. When one part didn't workout
due to any kind of issues, the other parts should be able to work and the application should
still be ready to launch. [Always have a back up plan when work didn't go as we expect.]
Measure and analyze the time that users spend on date picker and the bandwidth usage that
company has to spend on data downloader for this application. (reduce the size of data that
users can download).