Tell customer stories to build brand awareness and differentiation

Role:

Lead UI design, Art direction, Wireframes, Design QA

Client:

Pegasystems

Year:

2019-2020

Background

During my time at Pega, one of the first projects I was part of was to improve the overall website experience. To do so, we wanted to bring more interactivity to the website, to build more brand awareness especially for the first-time visitors.

background-visual-diagram

Challanges

As I started to take over from wireframes to visual design stage, as well as gathering insights from our product, product marketing, and development team members. I started to put together a list of problems I tried to solve for this project:

  • “We have really good client stories, but sometimes they can be really complicated.”
    We need to simplify our story.
  • “Our product is quite powerful, they can do A, and B. We have recorded tons of product demos.”
    We should connect with our product team on how to use our existing demos.
  • “We want it catch your eyes, and also can we add some motions?”
    We need to make it an engaging experience, using interaction and motions, but not overwhelming.
  • “We need to make sure this piece is scalable and reusable.”
    We need to think about our design at a systematic level and a component level.

Design explorations

After several discussion across teams, we decided to use “billing inquiries” as our sample story for the initial design. Design wise, I started to explore in multiple visual direction while still keeping the key elements from the original wireframes.

early-design-explorations

Design Design Finalized

The team agreed on moving forward based on #3. With multiple rounds of design update, the design was finally coming together.

  • Easy to extend if needed
  • More space allowed for the story content and animation
  • Easy to be break down into components
  • Flexible enough to conduct different user stories
final-design-mockup

Break down into elements

With stakeholders on board of the design, it’s finally time to audit the whole design under a microscope. I documented a detailed breakdown for our development and publishing team.

  • Identified elements while keeping the gate open for potential upcoming new elements
  • Established the logic how to construct a customer story
  • Documented the need of animation ( types, time, and order)
  • Prototyped animations in AE as reference for the Dev team
break downn into elements
break downn into elements

While I was standing by and waiting for QA during the 3 month development time...

An Easter egg project

During the early design review, stakeholders also loved the idea of a “toggle” that can be turned on/ off a Pega technology layer in the storytelling.

easter-egg-project-1
easter-egg-project-1 withwithout-1 withwithout-2

Some screenshots of final deliverables

withwithout-final-1 withwithout-final-2 withwithout-final-3

Results

Both projects are a very ambitious from design to development. It was great collaboration across teams. We eventually launched both interactive pieces in late 2020, both units became popular content on our site.

With/Without Pega is the most popular content on the page both by individually clicked element and overall section.

Till this day, we continue to craft new stories using these frameworks.

We built a great relationships with Product and Product marketing team through the process, and it led to us to collaborate a new interactive projects.

The violet color was added into the Pega brand style guide.

Let's build cool stuff together.