Creating Tools for a Shared Vision
Project Team: Maria Situ
Project Summary:
The goal of this project was to create a set of design principles that would help a small startup deliver a consistent user experience for a platform used by a varied audience. The platforms UI and interaction patterns suffered from inconsistencies, causing usability issues and confusion for both users and the team. Through a collaborative two-day workshop, Maria and I developed a set of core design principles that served as a foundation for aligning the design, product, and engineering teams. These principles encouraged a shift toward a more consistent and accessible design approach, improved team communication, and provided a framework for future growth and feature expansion.
Key Outcomes:
Increased effort to push for accessibility
More consistent UI/Components deployed and designed
Improved usability across the application
Overview:
Identifying the Problem:
SkillsEngine is a small scrappy start up. Which meant that often, making progress on a feature was more important than achieving perfection. The teams ability to move quickly allowed them to build out core features which unlocked new users and for a growing company, that’s important. This mindset however meant that design debt was common. Inconsistent design patterns could be found around the application and often made components confusing or unintuitive. These inconsistencies also slowed down the design team. When developing new work, often designers spent time going back and forth on the merits of the differing patterns found through the application slowing down progress.
Goals:
We knew our users, their problems, and how to help them. But, solutions often looked and felt disconnected. I wanted to work with the team to create a set of guiding principles so that we could improve the consistency and usability of the platform as well as increase the efficiency of the design team.
Execution:
To accomplish our goal, Maria and I knew wanted to gather input from the team. We knew that adoption of the principles would improve if the whole organization was involved in creating them and felt some kind of ownership of the output. So, we organized a two-day on-site workshop with key members of the team to gather input on the what they considered the ideal look, feel, and tone of the application. The workshop included activities such as mood board creation, voice and tone prompts, and collaborative feedback sessions, which were aimed at aligning the team around a shared design vision. Examples of these activities can be seen at the bottom of this case study.
“We knew our users, their problems, and how to help them. But, solutions often looked and felt disconnected. I wanted to work with the team to create a set of guiding principles...”
Synthesis and Outcomes:
After the workshop, the project team synthesized the participants feedback and developed three core design principles (as seen at the top of this case study). The principles were created within Figma for easy management and distribution to the team. The principles were well-received and were often used during design discussions. A notable example of their application was the redesign of a data-dense table using the "Edit Ruthlessly" principle to reduce visual noise and improve user interaction through progressive disclosure of several row controls. The "Enable Accessibility" principle also drove improvements like adding ARIA labels and tab controls to enhance usability for screen readers and keyboard navigation in our validation survey tool.
Key Outcomes:
Increased effort to push for accessibility
More consistent UI/Components deployed and designed
Improved usability across the application
Supporting Documents:
Below are some examples of the activities used by the team to gather input during the onsite.
