Defining a graphics style for web and social media
LivePerson
4 weeks
UI Design, Graphic Design
When LivePerson launched a new website as part of their rebrand, I was given the role of designing graphic illustrations to represent our AI software dashboards and accompany text content. These would also be used in presentations and social media.
Define a unique graphic illustration style for
LivePerson’s rebrand
Create schematic representations of LivePerson’s AI software
Unify the old dashboard designs with our new brand
Our software's interface is delicate and pastel, while our new brand’s illustrations are bold and colorful. I aimed to create abstracted schematics of our dashboards that would align both styles together.
The final abstracted design for our Intent Manager dashboard
Illustration by teammate Sol Morales
The following is a brief overview of my process for converting our software dashboards into a schematicized style.
This is the original dashboard for our software.
I simplified the dashboard into abstract geometric shapes, with more padding and rounded edges for an approachable feeling.
To match with the bold lined style of the illustrations, I added strokes to the main sections.
Finally, I added a solid black shadow for more visual weight.
For our webpage introducing available products, I created a looping animation that cycled through the different dashboards.
To differentiate the graphics illustrations from the schematized dashboards, I introduced turquoise as the primary color instead of pale blue. The black strokes and solid shadows remained as the unifying element.
The following image shows some of the final graphics implemented on our webpages. The "AI Native Certified" badge at the top that I designed is awarded to those who complete LivePerson's AI certification course.
To ensure that all future graphics would align to the same style, I created a UI kit and set of guidelines. These defined the methodology for converting dashboards into their schematic variants, and identified key areas to be kept consistent.
I started out focused solely on designing the graphics, and left creating the components and styles for later. However, as I started expanding on the quantity of graphics and their finer details, I found the process became cumbersome without an underlying design system. I’ve learned that switching between the two allows me to build up a scalable system of components, while seeing how they behave in the context of the overall design.