UX Assistant
Working alongside the UX department faculty at UCSC to better improve student digital experiences. My work is mainly centered around building student engagement with research pools as well as expanding the UX community on campus, creating the connection between faculty to students.
project details
Design System
Heuristic Review
Accessibility Testing
team
Mary Watkins, UX Manager
tools
Figma
year
2022
Expanding UCSC's Website Design System
Problem
One of the main pain points in the UCSC website design system was that there was a lack of a button library in terms of colors and animations. I implemented colors and various button states for the design system library for future site-wide usage.
01
02
03
Creating a color library for CTA buttons
Implementing various button states
Ensuring accessibility & proper animations in prototyping
UCSC's Current Design System
Roboto
Aa Bb Cc
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
Heading H1 Lorum Ipsum
Heading H2 Lorum Ipusum
Heading H3 Lorum Ipusum
The design system is comprised of a library of colors for texts, icons, and font. My role in this project was to create a library of CTA button colors & states in Figma as well as check the accessibility of these buttons.
Why do we need buttons?
What makes buttons accessible?
How do we convey the state of a button as clearly as possible?
All of these questions arose as this project started unfolding. It was vital there was accessibility research and consistent checks of ensuring effective button states that convey to the user the current function state of the button.
I was given the library of colored buttons above and my role in this project was to create an effective animation for the buttons to have an appropriate default, hover, pressed & disabled state.
Default
When the button is not interacting with the user's cursor
Button functionality: active
Hover
When the button is hovered by the user's cursor
Button functionality: active
Pressed/Selected
When the button is clicked by the user's cursor
Button functionality: active
Disabled
When the button is not functioning/the link attached to the button is unavailable
Button functionality: inactive
Physical Buttons
vs.
Digital Buttons
While creating the animation for the buttons and its interactions, a large aspect of the design branding was to make the digital button mimic the qualities of a physical button. I implemented drop shadows, mimicked a 'shadow' on top of the button itself once hovered over, & resized the buttons to be smaller when clicked.
This is an ever-growing project as the UX team is always in pursuit of improving the digital experiences of campus. The buttons were prototyped through WordPress.
Conclusion
Unfortunately, this project was ultimately not immediately implemented and the team decided to put this project on hold and explore different methods of growing the design system. This was still a very educational experience and project as I practiced methods of incorporating forming digital accessibility, an aspect of design that I have never worked on before.
Takeaways
Working on Digital Accessibility
This was my first project creating and designing for an interface to be used by a wide audience, so learning and implementing features such as accessibility was very eye-opening as a designer.
Growing as a Designer & User!
Taking into account features such as font, colors, shadows, and creating different button states allowed me to appreciate digital interfaces in that small things add to the larger experience.
other projects
Evergreen
UX/UI Design
Prototyping
Figma
