UX Designer at Commonwealth, 2018 - 2022. I owned design projects that assisted the Marketing team in designing websites for small businesses, including front-end development, design system creation and management, and strategy.
Background
Commonwealth is an RIA-Broker/Dealer helping financial advisors build their business by offering a wide array of solutions. One solution is a tiered website design service where advisors can pay for a custom-built website.
Project goal
Create a scalable process for designers and developers to quickly create websites that don't disrupt workflows.
Problems
How might we create a profitable, streamlined process that empowers designers and developers to create websites?
Commonwealth worked with a vendor to design a website template that would be used for their custom website offerings. I coded the template, but, unfortunately, the template didn't meet our client needs and required designers and developers to create new page components from scratch.
Additionally, creating custom websites in Commonwealth's in-house CMS was not efficient enough for the website services to remain profitable. Nuanced CMS capabilities are difficult for designers to workaround, and one-off development requests delayed website builds.
Research
Because I coded the initial template for our custom websites, I took ownership over investigating how we could improve the template and improve our web design process.
After getting informal feedback on the template pain points, I held a group meeting with all team members who are apart of the process. This was when we formally identified the problem.
Findings
Designers felt like they didn't have creative freedom while using the website template.
The additional coding asks were disrupting the development workflow.
Designers didn't know what was or wasn't possible to create in the CMS.
Ideation
Transferring to Figma
The initial design system was scrappy and lived in Commonwealth's CMS as its own "website" (screenshot above) It got the job done and was a growing system.
Down the road, a new problem arose. Our website service offerings were in high-demand, and the team could not keep up. We hired a vendor to help with the design work, but they could not access the design system hosted in the in-house CMS due to technical restrictions.
We decided to move everything into Figma, so everyone would have access to the design system. In fact, moving the system into Figma made mocking up websites even faster.
Designing for vendors
It was not enough to handoff the design system and say, "Here ya go!" We actually tried the "through it over the fence" move. It obviously didn't work, but we learned a lot.
Documentation was needed to show the vendor how to use global brand styling in the system. This is the main feature. It allows us to quickly add colors and typography that affects every component in the system, making designing super quick.
I created documentation on using the system, design patterns, and applying design heuristics when customizing.