Creating and leveraging a design system for the build of GM Envolve's B2B site experience
Project Overview
GM Envolve is a new brand under General Motors that focuses on leveraging the brand's many products, tools, vehicles, and software solutions to solve business needs. Our team's task was to launch a site three months after the initial kick-off, encompassing strategy design and development, to have the site ready during the brand reveal at GM's enterprise conference.
My Role
During this project, my role focused on the UI aspects of the site design, including creating the design system, creating page mockups, and delivering assets for development. I worked alongside CX designers, UX designers, and content strategists.
Process
Design System Creation
At its core, the design system is based on GM.com's look and feel. When our team began creating the design system elements, we needed more direction on GM Envolve's final brand guidelines. In light of this, leveraging GM.com as the parent company and site was the best solution to create a library I and future designers would leverage for GM Envolve's site. Once the Envolve brand guidelines were available, implementation was easy due to the flexibility of creating design systems within Figma and the flexibility of the CMS itself.
Regarding the CMS, the elements of the Figma design system had constraints around GM's in-house CMS quantum. The elements in Figma reference these CMS elements but were built to leverage variables and interchangeable elements to create the best experience and cross-team usage of the design system elements.
Design and Delivery
For this project, my role focused on the UI design aspects of the site. I worked closely alongside our brand strategist and customer experience team members. Our sister agency led the UX efforts for the site build, translating the customer experience research and content strategy briefings into wireframes. During this, I provided detailed input and feedback on wireframes to ensure flow and point out areas that could enhance visual improvement through our assets and design capabilities.
I collaborated with several teams and vendors that delivered specific assets for the site, including photo shoots, videos, and animated graphics. For other assets, we used GM's asset pool to find the product's correct photography for the content of a given section. I also worked alongside a copywriter who directly inputs copy within Figma, which was beneficial and boosted the speed of collaboration.
For delivery, the UX team also functioned as developers, as their team was responsible for implementing designs within the CMS. Assets were cut and exported based on guidelines provided by our team members who worked within the CMS. I delivered assets in batches based on the sprints and page approvals.
Conclusion
Our team met deadlines for site delivery, with a launch during GM's enterprise conference for its 850 business customers. The site helped achieve a significant goal of their conference by cleanly and effectively outlining the key objectives and solutions GM Envolve could deliver. Through collaboration with strategy and UX teams, I delivered an effective design of the GM Envolve site that maintained delivery throughout the planned site updates and expansions within their roadmap.
Reflection
While most of the project was smooth sailing, our team encountered some minor challenges. With a short deadline, design teams worked parallel paths toward asset delivery. Sometimes, this led to our team flying blind on whether the layout of our page design would fit with the provided assets. While our team provided direction for assets needed for the site build, sometimes translation could be more precise due to layers of teams and communication. Likewise, many of these assets had their rounds of approvals and legal reviews, which required updating and re-evaluating elements when necessary.