Chegg Design System
As a part of the Chegg rebrand, I redesigned our corporate facing landing pages. Looking at the overall needs of the business, I created a design system that can be easily transferred across the different landing pages.
Role: Lead Designer
Hero Components
Offering tall and short options for the hero of the landing page for flexibility.
Image & Copy Components
As the pages will adjust over time, it was important to think about how it could be adjusted depending on the visuals and copy. For example, you can highlight 4 pieces of content side-by-side or just showcase one.
Title & Social Blocks
As an alternative to imager and copy, I designed blocks of color that showcase titles or copy. Let’s say you want to show social proof or have a section that leads to an auxiliary page, these components are a great way to do that.
Highlight & Menu Components
There were a few special asks from the stakeholders to design components that show a bio, rotating image & content, and a timeline. Keeping in mind how they would interact with the rest of the system I built them out to complement and work seamlessly on any page.
Landing pages
With the components, we built various landing pages.
Designing for Breakpoints
Once I designed the overall components, I thought about how it would be transferred across the different screen sizes. Of course these pages are going to be viewed on multiple devices, so I was very methodical when collapsing and expanding the components across different breakpoints. You can see below how I designed it for mobile.
