A customized designed system site for PMs, developers, and designers ensures that teams are better aligned during the product development cycle.
2023, UX INTERNSHIP
7 Minute reading time
I contributed to the overall design process including user research, ideation, prototyping, and user testing. This design system site is an ongoing project that I helped jumpstart.
1 UX designer, 1 developer, 1 design director, and 1 manager
May 2022 - May 2023 (1 year)
Figma, Illustrator, Photoshop
By conducting user interviews with PMs, developers, and designers.
By user testing the previous design system site.
We began our research process by taking a step back and first collecting stories from PMs, developers, and designers about frustrating and successful experiences they have had during projects. We interviewed a total of XX people and .... We summarized our stakeholder's stories and mapped out their general experience during the product development cycle to vizualize where in the process people were experiencing the contention.
Users enjoyed receiving a physical token of their experience.
Users felt that the information they shared and received were an appropriate level of personal.
The line moved more slowly than expected; the more succinct the kiosk is, the more users it can reach.
The template tool was the most developed feature on the site designed to identify scope requirements and spit out existing templates. At the time, It used a wizard to gather those requirements and had a basic results page that provided links to existing examples within Commvault that users could click on and navigate to.
people generally know what workflows they're looking for and the wizard is more of a confusing hurdle in their way.
A little honesty and vulnerability goes a long way when creating a meaningful interaction with someone else.
A little honesty and vulnerability goes a long way when creating a meaningful interaction with someone else.
Based on our insights from our surveys, we hypothesized that music might be a good gateway to bond people who are unfamiliar with one another since music is such a universal media and gives the right level of personal exposure without invading privacy.
It's easier to strike up a conversation with someone when they share a common interest because it's an easy icebreaker.
A little honesty and vulnerability goes a long way when creating a meaningful interaction with someone else.
Since our goal was to create positive interactions between strangers on a commute, we asked people to tell us their stories about when they felt a positive interaction with a stranger.
A little honesty and vulnerability goes a long way when creating a meaningful interaction with someone else.
It's easier to strike up a conversation with someone when they share a common interest because it's an easy icebreaker.
During our interviews, we heard a large variety of needs and wants from people. Knowing that we couldn't satisfy everyone, based on our interviews and user tests, we sorted ideated features into a matrix of most desired and highest effort to help us narrow down the most necessary features.
By conducting user interviews with PMs, developers, and designers.
By user testing the previous design system site.
By user testing the previous design system site.
Since our user testing revealed that people gravitated towards example pages when using the design system site, we brought the intentions of the template tool to example pages. Since people generally came to the site with a general idea of what workflows they were looking for, we got rid of the requirements wizard and instead put all the example workflows we had in the side navigation so people could flip through them faster.
We then began ideating some potential ideas and brought to the table sketches and wireframes. We came up with both physical and digital solutions, and ultimately settled on two main possible directions that we could take.
We wanted to test people’s reactions to the interactions we were facilitating in our first idea. To do so, we used google slides to create deck of music profiles and google forms to moderate the likes, recommendations, and comments being sent.
Our card sorting activity taught us that PMs, developers, and designers all categorized our design guiedlines a little differently. We extracted the most common patterns in categorization and from there created our categories for the landing page. and as always, the full list is expandable under the side navigation.
This project was such a fun learning experience because
1. Test the more creative option first
2. tackle it from a business standpoint: spotify collaboration
2. furter prioritize efficiency: we identifies that the piec of the experience that people liked the most was the printing and receiving on a tracks card, if we can make the adding sog process even more efficient i would go back and do that (identifying the key feature of the product and maximizing it's reach)
Why does this modal use radio buttons while another uses checkboxes? Or why does the configuring workflow launch a wizard here, but a form elsewhere? There were inconsistencies across Commvault’s product from a component to a workflow level, and Commvault’s teams were looking for ways to ensure their projects were consistent.
Developers used storybook to reference for components, designers had figma files they could reference (but this was a very new thing for them), but there was no reference for workflows or patterns. No documentation that explained why certain workflows and patterns were the way they were, and, their product already had so many inconsistencies that no one knew what to reference when working on a new project.