First off, I wanted to get a sense of breadth. Which product and brands would our design system need to support? I conducted a series of interviews with reps from each Vettery team. The five user types I identified were the candidate, client, and admin products that support the marketplace, marketing pages, and a new internal product that our team was developing for our parent company.
Would we be designing from scratch? Were there existing patterns we could leverage? I combed through each of the current products to familiarize myself with current patterns and existing UI elements. In addition to a visual audit, I also took time to speak with the engineering leads to understand the technology that powered each experience.
The results of the visual audit were discouraging. There were dozens of variations for every UI element within each product and none of them aligned with the updated brand. I learned from the engineering lead that they were planning to rebuild the products from the ground up. We decided the product rebuild was an opportunity to leverage a new design system for a large-scale redesign.
A chat with the brand team about a recent rebrand was pivotal. The new branding emphasized boldness and confidence, with playful undertones, but these visual tones had not yet been translated into Vettery products.
I saw the rebrand as an opportunity for our design system.
I wanted to approach the design system holistically. How we speak to our users affects how they perceive us, and how they choose to interact with us. Understanding Vettery's voice principles would inform the creation of design system principles.
I took note of all the iconography used in the current products. Because they also lacked a consistent feel, I collected samples from different icon libraries to help us pick to purchase that also aligned with the updated brand.
One gap that I noticed in the brand guidelines was a lack of motion principles. Vettery's rebrand emphasized playful, celebratory undertones, qualities which seemed highly translatable to micro interactions. The existing micro interactions, while inconsistent, were largely...not celebratory.
To get the team on board, I explored different styles of a loading animation that captured the brand principles, and shared them out. Faster animations were said to induce stress, while animations with vertical bounce were thought to accurately capture the desired playful quality.
Crafting principles that adhered to the company mission was key ("help you find a job you love"). I led a series of card sorts with stakeholders during which I asked them to select cards that embodied aspects of what Vettery's design system should represent. I then bucketed those cards into larger themes, which turned into our principles. It was particularly interesting to see how Candidate Experience managers prioritized cards, as they have direct access to our users, and play a unique hands-on role coaching candidates.
Interviewing is effortful, and takes time. The interview set-up process should be efficient and fade into the background. This means having quick performance, avoiding redundant questions, and providing all the information they need to make a decision when they need to make it.
The job search is non-stop and demanding. Vettery should project a perception of availability to our users. How might we anticipate needs and meet candidates where they are, whether its before an interview, or after a phone screen?
It only takes one match to make it a successful job search. If sucess doesnt happen on the first try, Vettery should provide insights about how users can improve their chances.
I leveraged the rebrand's tone and visual styling to assemble a series of foundational guidelines for the design system. Color, typography, and layout would provide the foundation to support future component work.
The first mini project I took on was our type scale. Europa was our brand font, but from an initial pass with users we recognized that at smaller sizes, Europa was difficult to read. After some searching we decided to replace Europa for Lato for body copy.
The base color palette established in our brand guidelines required adjustments before it was ready to use in product. The first thing I did was test the color contrast to establish what combinations would be accessible. I also converted the color tints to a flat HEX codes to make them easier to layer.
While this turned out to be more complicated and less useful that I initially hoped, I proposed several different ways of structuring highly reusable spacing components. After several discussion this became less important because of the flex approach to the layout. We did keep the base 16 increments though to help us with consistency.
One unique aspect to the Vettery design system is it included the type decorations in this image. Because they are used extensively in marketing content, it felt important to have access to them for our component library exploration.
Defining the foundation of the component library was key, but those foundational elements could still vary widely in their actual implementation. I wanted to establish a point of view for how these components should coexist in the Vettery UI universe.
I organized a two day brainstorming meeting with the design team to explore how design system components could live together in a UI. Each designer took an existing interface and redesigned it using the new elements.
It was eye-opening to see how three designers could vastly diverge while using the same set of UI elements.
My explorations embodied the "playful" element of our brand, while another designer created a UI with more sincere, straightforward tones. But which tone fit the bill?
We invited stakeholders from brand, product, and engineering to provide feedback around the diverging explorations. The consensus was that the interface should strike a balance of playfulness and sincerity. Ultimately, users should feel that they can trust Vettery's product to help them get hired, and an abundance of playfulness in the UI could hinder that trust.
After aligning on a direction, we refined our work.
I explored what a personalized registration page could look like, adding subtle graphics customization based on the job location, and exploring a playful highlighting style that emphasized key search terms.
The page felt like it was beginning to strike the desired balance of playful and sincere.
By this time, a team of frontend engineers had formed to start building out the component library. I attended their daily stand-ups and established regular check-ins for VQA. This collaboration proved invaluable, as we developed a shared understanding of what constituted a component, symbol, component kinds, theme, and design tokens.
For the design system to be sustainable, collaboration and handoff needed to be efficient, well-documented, and effortless. The engineers and I established a process for collaborating on components that involved linking our DSM to the Storybook they had started, and maintaining that connection to make handoffs easy for the other teams.
For the design system rollout, because our team was moving to a new tech stack, we chose to implement the design system into Vettery products flow-by-flow, rather than component-by-component. The candidate registration flow was a high priority project that became our pilot for a rebuild using the new component library. The flow contained multiple actions and inputs, so the design team and I focused our efforts on action and input components first.
Along with the engineers, we created a prioritized backlog of components and interactions.
Design Ops
I'm currently looking into the best way to set up our design tools for consumption, collaboration, and maintenance. Seamless handoff is crucial given our ever-expanding team, and I'm exploring ways to link our design components with the live components in Storybook to facilitate handoff from design to engineering.
I'm also in the process of defining a channel for teams to provide feedback and input on the design system.
Initial Release
As we prepare our first release of the design system, I am working on the usage documentation for the initial set of basic components. Two teams are planning to rebuild the candidate application using these basic components, so we hope for immediate impact. We'd like to use their feedback to make refinements to the system.
