Introduction to Cake Use Case 1: Power Settings Use Case 2: Hardware Scan Red Velvet! Use Case 3: LDM Use Case 4: Classroom Companion

Architecting Cake: “Baking” a design system from scratch

Most people are familiar with Lenovo as a hardware company. But, as Lenovo moves deeper into the device ecosystem space — producing tablets & Motorola phones on top of its famous “Think” PC line — its enterprise software apps (Lenovo Vantage, Lenovo Freestyle, Legion Gaming, Motorola Ready-For) are more and more what customers “feel” when they think about Lenovo.

It makes sense, then, that as part of the newest "One Lenovo" push, one of Lenovo leadership’s major priorities is unifying Lenovo’s software design systems.

I was lucky enough to get the chance to push that project forward when I rotated onto Diana Gerli’s Software UX team in Lenovo’s Intelligent Devices Group (IDG) in February of 2023. Her team has done amazing work, like transforming old-style Vantage into “new” Vantage, using their new design system, Cake, on Figma.

Image could not be loaded. Image could not be loaded.
“Old” Vantage on the left, “new” Vantage on the right. You can see that Cake applies modern, dynamic, modular design to a somewhat outdated dashboard.

Vantage is an onboarding app that comes with all Lenovo devices. It has over 3.3 million usership per day, largely in the China geo. It helps monitor device health and has immediate support for Lenovo-related services, like warranties and parts purchases. It has badly needed a design overhaul to match Lenovo’s vision for innovation.

I arrived onto this project when the dashboard above had just been released for production by Software UX. Much of my work on the team focused on redesigning Vantage settings, which makes up the largest portion of Vantage functionality – not only “reskinning” it, so to speak, but really investigating current consumer pain points and inefficiencies with the app.

In doing so, I quickly realized that we needed to progress Cake – as of then only a partially fleshed-out design system – to keep up with the speed at which we were remaking Vantage. Not only that, some major systemic infrastructure work had to take place.

Along with my co-architects Mike DeMar and Mallory Schultz, we formed a 3-person hyper task squad establishing foundations and components of Cake, working in parallel as we tackled major Vantage tasks.

Image could not be loaded.
We started with building what we saw as “foundations,” like these typography tokens.

Image could not be loaded. Image could not be loaded.
Color was another major focus. We delved deeply into the world of dark mode theming and high-contrast theming. Luckily for us, Figma rolled out their 2023 update, which included extremely critical color variable & layer theming functionalities.

Image could not be loaded. Image could not be loaded. Image could not be loaded. Image could not be loaded.
Then, we used Brad Frost’s “Atomic Theory” of design to start making “atoms” – such as checkboxes and buttons – as well as “molecules” – e.g. inputs and modals.

Being a UX architect involves a somewhat different skillset than a visual designer, interaction designer, UX researcher, or UX writer. I called upon my front-end engineering skills to coordinate closely with our development team, creating pipelines from Figma to GitHub and GitHub to documentation. We experimented with platforms like Storybook, ZeroHeight, and Docusaurus. Each token we created was not just a design choice but a design product – optimization & longevity were always at the forefront of our minds as we developed this design system from the ground up. In many ways, we were product owners as well as designers.

Use Case 1: Vantage Power Settings redesign

Power is one of the most complex settings pages on Vantage. With huge variety between PC verticals on what “smart power” settings are offered, what types of battery warranties are possible, what kind of battery metrics are measured, etc, the Power page required a lot of consideration for modularity, customizability, and clarity.

Image could not be loaded. Image could not be loaded.
Power page grooming/3-amigos meetings often resulted in spreads like this. Definitely a strong candidate for Charlie Day meme usage.


Image could not be loaded.

Our drafts & iteration process looked something like this:


Image could not be loaded. Image could not be loaded. Image could not be loaded.


And here’s what we finally came up with.



Image could not be loaded.


Use Case 2: Vantage Hardware Scan

Another major Vantage functionality is Hardware Scan, which is tricky from a design perspective because of how much data has to be crammed into one view. We had to be creative with patterns like accordions & modals in order to extract content into readable & logical information hierarchies.

Image could not be loaded. Image could not be loaded. Image could not be loaded. Image could not be loaded.
Here is another example of the “Cake-ification” of old Vantage design.


And here is what we landed on.


Image could not be loaded. Image could not be loaded. Image could not be loaded.
Some examples of our modal & pull-out accordion behavior.


And within Hardware Scan were other tools such as Snapshot, which allows users to compare before and after scans of their hardware & software. This was particularly data heavy.


Image could not be loaded. Image could not be loaded.
More Cake-ification.


The final product:


Image could not be loaded.
It’s tricky to keep information aligned in a clean way when you have so many functionalities in one view.


Hardware Scan had so many micro-functionalities and requirements that our Figma spread looked something like this on our last iteration:


Image could not be loaded.
Caption: A lot of blood, sweat, and tears!

2024 update: Now baking... Red Velvet!

As of October 2023, I have been working on developing my very own sub-system of Cake, called Red Velvet.

Image could not be loaded.
Image could not be loaded.
A little taste of Red Velvet.



With all the knowledge I've gained from working on Cake with my design colleagues, I've been architecting Red Velvet from the ground up for a whole new user base.

Red Velvet uses the foundational tokens of Cake (hence why it's a "sub-system") — but owns a totally fresh set of components & variants, since it is geared toward B2B cloud-based apps, such as Lenovo Device Manager. These apps, while being more commercial-facing, could still use a consumer-friendly design rehaul.

One of the great things about designing a sub-system that relies on the Cake tokens I architected previously is that dark mode is essentially built into the components. This is super handy, as Microsoft is pushing for dark mode as an accessibility requirement for applications in 2025.

Image could not be loaded. Image could not be loaded.
Here's the date/time picker up close. The component may be original, but its dependency on Cake color & type tokens means that it inherits theming as well!
Image could not be loaded. Image could not be loaded.
Here's Red Velvet's complex modal template.

Red Velvet use case 1: Lenovo Device Manager

One of my first applications of Red Velvet was testing a redesign of Lenovo Device Manager, one of the most popular B2B cloud apps that Lenovo offers. LDM offers IT admin a "quick-glance" method of surveying fleet health, with options to telescope into details at any level.

Image could not be loaded.
Since Cake has only been used on select Lenovo apps so far, I had to create lots of design patterns & flows from scratch, such as this sign-in flow that is now the Cake standard.


Image could not be loaded. Image could not be loaded.
The main view of LDM is this device list. Since Cake has not yet met an application that requires lots of data visualization, I made these table templates from scratch for Red Velvet. Enhanced tags and chips provide information-at-a-glance, and opacity-based backgrounds help handle table row background variation. And, although Red Velvet uses squared buttons for a more tabular view, it retains the general modularity and card-based elevation schematic of Cake templates for "One Lenovo" consistency.


Image could not be loaded. Image could not be loaded.
LDM also has a profile section. The user information section needed to be made from scratch, but I was able to borrow some of my past work with the Vantage app to lay out the settings pages.


Image could not be loaded. Image could not be loaded.
And here are some associated modals.


You can really tell from this side-by-side comparison how badly the design refresh was needed. Plus, we were able to add a dark mode in a snap!

Image could not be loaded.


Red Velvet use case 2: Classroom Companion

A few weeks after my work with LDM, the Classroom Companion team at Lenovo reached out to me asking for some help with a rebrand as well. Their case was pretty unique, as their app is not only consumer-facing but student-facing, which has its own set of design challenges. They named a few PO requirements to me, such as promoting a chatbot view, which was intended to aid students as they listened to online course recordings. This chatbot was silo'ed into each course; the "Precalculus Companion" could not answer questions about Biology, for instance, and they wanted to make this clear visually.

As Red Velvet did not have an existing chatbot component (Lenovo has many AI apps in the works right now, but none based on the Red Velvet design system until this product), my first task at hand was to consolidate some past Lenovo chatbot views to create a "One Lenovo" standardized component.



Image could not be loaded.
I used the four references on the left to create the chatbot component on the right. The leftmost reference image was a mockup given to me by the Classroom Companion team.


Image could not be loaded.
You can see that my chatbot component integrates seamlessly into Red Velvet spreads, in both light and dark mode. I renamed the companion to "Precalculus Companion" to show even more clearly that the chatbot is silo'ed. Of course, that heading will be replaced for future applications of the chatbot component outside of Classroom Companion.


After creating the chatbot component, the rest of the redesign was fairly simple. Here is the final comparison, with mockups from the Classroom Companion team on the bottom row and my redesigns on the top row.

Image could not be loaded.
One of the important UX guidelines I enforced was minimizability of the chatbot component. Even though PO's wanted as much promotion of the chatbot as possible, I maintained that students must be able to minimize it to stay focused in certain scenarios. As a compromise, we settled on keeping the chatbot open on default and providing a minimize button that shrank it into an avatar. You can also see that I customized the color of the "Precalculus Companion" icon to further demonstrate its silo'ed nature. Finally, I changed the course dashboard to provide space for more class specs, and color-coded each class to provide a sense of encapsulation per course. I also added potential to access archived course content.