Refreshing brand and enhancing the timekeeping experience for UCSD employees.
MY ROLE(S)
Product Designer, sole Visual Designer
TEAM
Ashley Arizabal, Sunay Bargotra, Aretha Li
TIMELINE
8 Weeks (January > March 2023)
TOOLS
Figma, Zoom
PROJECT OVERVIEW
As the campus’ main attendance and time- management system, Ecotime is used by hundreds of UC San Diego employees everyday to submit work hours in order to get paid.
Despite being widely used, Ecotime is notorious for its complicated user flows and archaic interface which confuse employees and hinder their daily tasks
THUS WE ASKED,
How might we streamline the process of submitting work hours and simplify navigation on Ecotime in order to benefit part-time and full-time UCSD employees?
SOLUTIONS
New layout
A calendar to visualize work hours in a more intuitive way. And a table layout to easily see history of past time-off requests.
Different journeys, same destination
Click ‘n drag or ‘+’ button to get to the same pop-up to add hours. Users can choose job position
Users can choose job position through external drop down menu OR pop-up
Tab system
Clear separation between a) dealing with past work hours (logging in, editing, and submitting work hours) and b) future work hours (time-off requests)
Mitigate mistakes
Added the ability to delete or edit work hours and time off requests. This feature did not exist initially and employees needed to manually notify managers to delete incorrect hours or requests
1/ UNDERSTANDING OUR EMPLOYEES
USER INTERVIEWS
We talked to 9 diverse UCSD employees aged 19-49 and observed how they navigated Ecotime in real time.
Using the interview guides and user tasks questions that I created, we interviewed 7 part-time employees and 2 full time employees. Here, we aim to gain a deeper understanding of user experiences and any shared frustrations. We also wanted to observe any slips or mistakes users might make while navigating the platform.
I synthesized our findings into top insights to better guide our next steps.
ARCHAIC INTERFACES
It’s hard to understand outdated icons, buttons, and confusing job labels. 9 out of 9 expressed disdain over Ecotime’s overall interface
MODERNIZE
Update and modernize visual design
Prioritize visibility in call-to-action buttons
“TOO MANY CLICKS”
It’s hard to understand outdated icons, buttons, and confusing job labels. 9 out of 9 expressed disdain over Ecotime’s overall interface
SIMPLIFY
Streamline the process of logging in hours
Give users more freedom with simplified user flows
UNCLEAR VISUAL HIERARCHY
Too-small body text, washed out colors and absence of clear information hierarchy caused struggles in navigating the platform
IMPROVE CLARITY
Improve typography style and size for readability
Adjust color palette by WCAG standards for better accessibility
USER PERSONAS
Meet Adelyn and Elias.
Based on our interview insights, we created Adelyn Adele and Elias Tadgan, personas who reflect the needs and frustrations of part-time and full-time UCSD employees.
USER FLOWS
2 different personas, 2 different user flows.
To meet the needs of both personas, we designed two different user flows. These flows have been updated after multiple rounds of user testing.
FLOW 1. SUBMITTING WORK HOURS
Flow 1 caters to all employees like Adelyn & Elias because submitting timesheets is a task done by every employee:
It streamlines user process of: logging, deleting, editing hours for a chosen job by having it all possible in one screen through the use of pop-ups.
Part-time employees who work more than one job (like Adelyn) can now choose their job from an external drop down menu listing clear job titles
FLOW 2. SUBMITTING TIME OFF REQUESTS
Flow 2 caters to employees like Elias, who is a full-time employee and has the opportunity to request time-off from work.
This flow aims to streamline the user process of submitting, deleting, and editing time off requests by having it all possible in one screen
2/ DESIGNS
FEATURES KEPT
Narrowing down main features
We created multiple prototypes in order to determine the best way to implement our flows. We consolidated the feedback into one high fidelity prototype and here’s what we kept:
CALENDAR LAYOUT
Competitors proved that a calendar/table layout is an effective and clear way to display work hours on specific days of the pay period.
POP UP
2 our of 4 participants prefer a compact layout so in order to simplify the home screen, we incorporated pop-ups which made sense with the calendar.
DROP DOWN TO TOGGLE JOBS
4 out of 4 participants liked the drop down menu to toggle between jobs.
TAB FEATURE
4 out of 4 participants liked the two tab feature separating ‘timesheet’ and ‘time off requests page.
BEFORE & AFTER STORIES
A new way to add and visualize shifts
In the initial design, we incorporated a ‘click and drag’ method to add new shifts, assuming it aligned with users’ familiarity and mental models when interacting with a calendar. However, usability tests told us this wasn’t the case. I added a ‘+’ button in the bottom right corner as a more obvious way users can add shifts.
BEFORE
click and drag to add shift on calendar and all shifts are highlighted
FINAL DESIGN
click and drag to add shift on calendar AND ‘+’ button. Shifts are highlighted based on the job position toggle only
Deleting
In the initial design, the delete shift button seemed intrusive and out of place with the overall interface. Moreover, the green color made it difficult to distinguish from the submit timesheet button at first glance. To address this issue, we got rid of the delete button and instead implemented a hover interaction for seamless deletion of shifts.
BEFORE
select shifts and press delete button
FINAL DESIGN
hover and delete shifts
Pop ups
Creating the pop up modules was the next step in simplifying user flows and utilizing the new calendar layout. During Hi-Fi usability tests, we found out that users also prefer having the job position toggle in the pop up as well as externally in the timesheet page.
BEFORE
FINAL DESIGNS
TIME ENTRY POP UP
Because the pop up for ‘Time Off Request’ involves more information, I decided to display the input sections in two columns.
BEFORE
FINAL DESIGN
TIME OFF REQUEST POP UP
Time-off requests
During usability tests, we found that participants couldn’t differentiate between active and previous time off requests so we utilized a yellow color as a signifier.
One participant suggested the ability to edit or delete a time-off request before submitting it to the employer in order to mitigate mistakes. We thought it was a great method to give users more freedom and a way out.
After a user submits a time off requests, they will lose the ability to edit or delete it and the request will have an updated status of ‘[PENDING]’
BEFORE
FINAL DESIGN
VISUAL DESIGN
Clean and professional. We’re standing on business.
I created all new visual assets from scratch.
OLD
NEW
LOGO REDESIGN
Because Ecotime is a professional management system, I wanted our redesign to evoke a clean, organized, and balanced tone. The deeper green and leaf symbolizes growth and balance which are important to maintain in a corporate setting. I used bold colors and weights to keep users alert and energized.
Typography
Tone Words
Icons
Logo
Color Palette
Heading 1
Heading 2
Lato, Extrabold, 32 Px
PRIMARY
BALANCED
CLEAN
ORGANIZED
GREY SHADES
SECONDARY
Lato, Bold, 24 Px
Heading 4
Lato, Bold, 20 Px
Heading 7
Rubik, Bold, 18 Px
Body 1
Lato, Regular, 12
Body 2
Rubik, Semibold, 12
Body 2
Rubik, Semibold, 12
Body 3
Rubik, Light, 12
Heading 8
Rubik, Regular, 18 Px
Heading 5
Rubik, Medium, 20 Px
Heading 6
Rubik, Regular, 20 Px
24A165
Heading 3
Rubik, Medium, 24 Px
2CCD80
2CCDC7
DC0000
FFFFFF
F1F5F5
C6D0D3
A3B0B3
869397
6C767B
545A5F
3B4145
262B2F
141618
STYLE GUIDE
In the original design, 3 out of 9 participants disapproved over the small body text and lack of readability. In response to user feedback, I prioritized information hierarchy and addressed legibility issues by using Lato and Rubik, two modern san-serif typefaces known for their clear and easy-to-read characteristics.
Buttons
Drop Down Menus
Input Boxes
Hover Interactions
CPMC
2pm-5pm
CPMC
2pm-5pm
TMC
4pm-7pm
TMC
4pm-7pm
Sign In
Sign In
adelyn@ucsd.edu
Submit Timesheet
Submit Request
Submit Request
Submit Timesheet
Drop down shadow (X: 0, Y:7, Blur: 11, Opacity: 20%)
Administrative Leave
Administrative Leave
Curtailment
Prof. Dev & Education
Leave Without Pay Monthly
Military Duty
Sick - Bereavement
Sick - Family
Sick
Union Business Leave
Vacation
Voting Leave
TMC (Graphic Design Intern)
CPMC (Stage Assistant)
TMC (Graphic Design Intern)
CPMC (Stage Assistant)
CPMC (Stage Assistant)
CPMC (Stage Assistant)
TMC (Graphic Design Intern)
TMC (Graphic Design Intern)
Administrative Leave
Password
COMPONENT SYSTEM - BUTTONS / HOVER / INPUT / MENUS
Pop Ups
Cancel
Save
End
Total
02/09/23
02/09/23
7:00pm
3.00 hrs
Start
4:00pm
Time Entry Details
Job Position
CPMC (Stage Assistant)
Time Off Request
Start
End
Total
9:00am
02/09/23
5:00pm
48.00 hrs
02/07/23
Type
Administrative Leave
Leave Balance
12.00 hrs
Save
Cancel
Log out of Ecotime?
You can log back in anytime.
Cancel
Log out
Submit request?
You will not be able to edit/delete request beyond this point.
Go Back
Submit
Delete request draft?
This action is permanent.
Cancel
Delete
Delete shift?
This action is permanent.
Cancel
Delete
Submit timesheet?
You will not be able to edit/delete timesheet beyond this point.
Go Back
Submit
Drop down shadow (X: 1, Y:4, Blur: 9, Opacity: 25%)
COMPONENT SYSTEM - POP UPS
Final Designs
ORIGINAL
REDESIGN
SIGN IN SCREEN
BEFORE
AFTER
LOGGING IN HOURS
BEFORE
AFTER
TIME OFF REQUEST
ORIGINAL
REDESIGN
SIGN IN SCREEN
BEFORE
AFTER
LOGGING IN HOURS
BEFORE
AFTER
TIME OFF REQUEST
ORIGINAL
REDESIGN
SIGN IN SCREEN
BEFORE
AFTER
LOGGING IN HOURS
BEFORE
AFTER
TIME OFF REQUEST
ORIGINAL
REDESIGN
SIGN IN SCREEN
BEFORE
AFTER
LOGGING IN HOURS
BEFORE
AFTER
TIME OFF REQUEST
3/ TAKEAWAYS
The team! (Clockwise: Ashley, Me!, Sunay, Aretha)
Keep testing!
New insights can arrive at any stage of the design process, so designing is never really done. Because of this, we must keep an open-mind and be flexible in our design process.
Always give users the freedom to choose
People are unique–they will find different ways of doing things. It’s important to design a way out, or another way in. Multiple user flows that lead to the same destination can make navigation easier.
It’s impractical to please every single user
Prioritizing major pain points and considering features that carry the most significance in fulfilling our problem statement allowed us to be more intentional with design decisions.
MORE WORKS
Refreshing brand & website for a local animal foster/adoption
Leading visuals & growing UCSD’s largest design community