Design system expansion and maintenance
I am currently working as a UX/UI designer helping expand and maintain SHURE’s PRISM design system. In my role I update existing components based on updated requirements from design and development teams. I play a role in evolving and improving the system’s visual sophistication and moving away from the older Material 1.0 visual language it had been built around.
I’ve added new colors that maintained WCAG AA text contrast when used as backgrounds and helped maintain the color database. I played a major role in building out designs for an entirely new set of segment meter components and containers based on the needs of SHURE’s flagship software while ensuring that it would meet the needs of other applications. I regularly meet with the Prism team front end developers to address implementation problems and ensure components made it to production as intended as well as working with them to resolve edge and corner cases that arise in building. We also update and maintain the system by designing and building resolutions to issues brought to our attention from consuming app developers.
Below I show a few select projects of many UI components I’ve worked on. These examples are designs I had a key hand in from start to finish but there are many others where I made small updates and worked through edge case resolutions as the dev team was building them.
Monitoring and control
One of SHURE’s most important pieces of software was on a now very dated visual language and has a major release coming up. I assisted with re-styling many bits of the UI to bring them into compliance with PRISM.
It was key to stakeholders on the project that we not disrupt the user experience for pro customers while updating the UI to feel more visually sophisticated and increase usability and approachability for new customers.
I updated the audio, quality and RF frequency meters, as well as creating a new channel strip header design that had a system cohesive default color but allowed for swapping out for colors based on user color tagging. I also helped design and worked closely with development to build a working and flexible container system.
Challenges
A challenge to the meter project was that some of the meters, particularly RF frequency, could have multiple channels and needed to have a flexible design that allowed the meters and the containing elements to grow and flow around.
There was also a need for both vertical and horizontal meters based on user preferences, as well as simple and complex meter configurations based on user preferences.
And lastly these monitoring widgets were user resizable and may be drag and droppable in a future release. All while maintaining as small a size as possible to allow users to fit as much in their viewport as possible.
Additional work
Alerts
For the next release of a major piece of SHURE software they were working on adding alert notifications so users would be notified of a variety of possible issues. The PRISM team felt that it was important to expand the notification system we had to create a system that not only fit the needs of this new release but could expand the library that could be drawn upon by other applications.
These alerts needed to fit in a variety of areas (alert feed pictured on right) and I decided after review that it made sense to draw on our existing “callout” visuals. Feedback from designers on the consuming apps felt that the use of warning colors was not strong enough for alerts so we changed out the neutral backgrounds to use a color wash that ensured there was sufficient text contrast.
While not a perfect system because it uses color heavily it does also have text and icons to help inform users with difficulty seeing color that an error state is present.
Gaffer tape colors
I created a set of color tokens based on popular gaffer tape colors to give users a default color set within the color picker that would reference a common way of labelling devices in the physical world.
We used a system where any time text might be overlaid there was a color wash so that we could maintain accessible text contrast ratios whether a user was in dark or light mode.
Tagging
I created both a text field, this hadn’t previously existed in the system, and that utilized our existing Chip component to act as user editable and assignable tags.
Users needed to be able to add and remove tags, as well as create a system that was flexible enough for future expansion.
File transfer UI family
There was a mix of styles being used when I started on this project. I created a unified family that designers could pick from for uploads or downloads that used existing progress components but tied them together with text slots so there would be a cohesive approach regardless of size.
How many is too many? An ongoing discussion within the team was how much variation should each component allow, how much was up to consuming app teams to take smaller pieces and build PRISM compliant layouts. Additionally we worked on finding what the happy balance was between future flexibility and trying too hard to guess what the future might hold vs designing off of a known current need-as time went on we began to realize we got better results when we focused on concrete use cases and accepting we might have to come back to make updates in the future when faced with new use cases.
Challenges
Working as part of a UI design system team has presented a lot of interesting challenges. Working with designers as my stakeholders and users while also designing for their users was interesting. There have been many conversations on the team about how proscriptive the design system should be and of course the importance of making everyone on the design team feel heard while trying to come up with a more unified language, while acknowledging that there are disagreements that sometimes PRISM had to take a stand on.
I’ve really enjoyed getting into the nitty gritty micro-decisions that UI and design platform work requires as well as working more closely with developers to build out UI components that will be plugged into a variety of applications.
