If you’re seeking more context about Surely Work, please read the story of Surely Work 0-1.
From Idea to MVP to Beta
At the beginning of Surely Work, I designed a wireframe for the homepage, listings, applications, and user accounts. With our scope locked in, I began to design the brand and develop the design language. I saw a connection between our product and newspaper classifieds ads, so I built our initial color system with this in mind. Ink, graphite, paper, charcoal and eraser marks made up our initial grayscale palette, and I assigned a color from a perceptually linear gradient to each of 9 roles on the initial platform. The static information was squared off like a newspaper clipping, while the digital/interactive elements were given a digital-feeling border round.
This simple system worked for the time. After all, it was a proof of concept and I was both designing and building the product. But when we released our beta to the public, we were testing it with users and, behind the scenes, we began to build the platform in earnest. The expansion of our features meant the design system started to creak a bit.
Pain Points
On the aesthetics and hierarchy side of the platform, the current design system was holding me back. We needed more nuance in color to allow for more clear hierarchies which would unlock better interactions and clearer happy paths for our users. On top of this, I would soon have to hand fully-spec’d designs off to our team of engineers and the current designs were not consistent enough to be legible.
I went back to the drawing board to work through designs with assistance in inspiration for the redesign from one of my co-Founders, Jon. We went back on forth on more modern styling, iterating on designs with newly minted components for upcoming features.
Surely 1.0
With the profile and the rest of our designs finished, it was time for me to renovate our design system to support these changes before putting the final polish on all of our screens for a cohesive platform we could hand off to our engineers.
I started the design system buildout with our colors—expanding our neutrals palette to get more out of our text hierarchy. I created context-specific variables for all of the base colors, then reference variables on top of those so colors are related and cohesive, and so I can quickly swap in new colors that propagate throughout the design.
This is where things really became fun…
The color variables and updated font styles were applied to an entirely new suite of inputs I designed—from radios and checkboxes, to text inputs, drop downs, drop zones, and more. Everything has Figma’s variables and properties that allow it to be fully defined for our engineers, and used in all design applications without needing multiple iterations of the same component.
Impact
While we don’t have the organizational history to gather quantitative data on the design system’s impact, we can look back at old versions of the platform and imagine what life would be like without the system.
From a visual perspective, we can clearly see improvements to page hierarchies and see how components are able to be reused through onboarding, the homepage, profiles, and more.
From a market competition perspective, we can look outside of our platform to the many competitors in the job marketplace industry and see that good design is one of our differentiators.
And for my design process, this system immensely sped up my ability to prototype and push changes. I can co-design solutions and new features during meetings to validate ideas with quick, realistic mockups. And outside of my own purposes, this system has enabled me to define components clearly for our engineers and point to this design file as the single source of truth for our platform.