Cosmos Build
DESIGN SYSTEM
DESIGN OPS
OVERVIEW
Pega Launchpad is a new B2B SaaS application development platform primarily targeted for Independent Software Vendors (ISVs) who can create applications for their subscribers with ease. Launchpad is the next generation Pega product that redefined and changed the company future and its place in the market.
MY ROLE
Design lead - Research, analysis, product design, design system management and adoption strategy
THE TEAM
1 Design Director, 1 Product Manager, 8 Frontend Engineers.
TIMELINE
June 2021 to Feb 2023
Worked on 100% of components, patterns and custom plugins increasing the efficiency by 95% of 18 product designers, millions of Pega Developers and reducing time-to-value significantly to just a quarter.
PROBLEM STATEMENT
Pega Platform is a low code authoring platform originally built for organisations that need enterprise workflow applications. Banking industry is one example. With the advent of Independent Software Vendors, the need to build these applications faster and easier for such organisations has become a prerequisite. How might we build a design system with efficient, accessible components, patterns and guidance to ensure designers and engineers create valuable experiences for millions of business analysts and Pega developers?
BREAKDOWN OF THE PROBLEM
Faster and easier to build apps
Most experiences over time became too complex for a business analyst to build apps quickly in Pega Platform
Efficient and accessible
Ensure to follow all accessibility guidelines and leverage parent design system, Constellation.
Designers, Engineers, and End users
A design system that should consider varied use cases and multiple collaborators in the ecosystem
Dated User Interface
Pega Platform followed legacy design patterns with critical usability issues
LEGACY PLATFORM UI OVERVIEW
Application page with poor Information Architecture
Complex depiction of case life cycle which gets claustrophobic with advanced apps
Dashboards with many features and no visual hierarchy
Disjointed/broken data tables
ECOSYSTEM
Pega Launchpad's primary purpose was clear - It will be majorly used by business analysts and there is a 'dev mode' which will be used by advanced developers. So for primary users, the job is to make complex concepts like rules and objects easier to interact with.
But for the design system, the direct users are product designers and frontend engineers. It's impossible for me to collect all the end users' use cases and design components/patterns, I directly collaborated with designers to understand their use cases as part of the research. A detailed illustration of the process of component development is explained below. All in all, the ecosystem involved designers, product managers, engineers and end users
CHALLENGES
No new design tokens to be created
Since Pega already has an enterprise design system, Constellation; there is a constraint to use those established design tokens to reduce time-to-value.
Time to ship MVP
The deadline for MVP is set. May 2023 Pega World was the time to showcase the new Launchpad. And the demos were needed to be ready.
Use case explosion
It's a complete re-imagination of existing App Studio & Dev Studio. So many use cases to consider. Effective collaboration was key!
Parallel work
Product designers were working in parallel as I design components. It was needed for me to prioritise effectively more than ever.
And oh yeah, I had never worked on design system before this project. Never mind, this scale and impact!
PROCESS
Design
User story format with defined acceptance criteria
DESIGN NEED
PRIORITY RANK
After the first couple of months of chaos with unstructured working process and increasing UX Debt, I restarted from scratch and based on the learnings divided the whole design system development process to 6 stages - Intake, Discovery, Design, Test, Build, Continuous Feedback
​
​
ADD TO BACKLOG
With UX designers, and frontend engineers
PROCESS MAP - COMPONENT/PATTERN/TEMPLATE
I developed a framework forking 'Double Diamond' to prioritise and meet the impending product needs to deliver PI goals
Intake
ANALYSING USE CASES
USER STORIES
Based on 'RICE' formula and the designer has made any explorations already
RELEASE PLAN
Work item will be added to following PIs and Sprints depending on features/user stories and sometimes just as spike stories
IDENTIFYING CROSS FUNCTIONAL USECASES
Discovery
Added to Figma/Sketch Libraries
Product, design, frontend and accessibility teams
REVIEW
HANDOFF DOCUMENTATION
PROTOTYPE
DESIGN EXPLORATIONS
User story format with defined acceptance criteria
Test, Build, Feedback
Sprint reviews
FRONTEND DEV
CONTINUOUS FEEDBACK
STORYBOOK
TEST WITH END USERS
Feedback from live product
INTAKE
EXAMPLE DESIGN PATTERN : BRANCHING
An easy way for teams to develop rules in parallel in a distributed environment.
Branches are containers for rulesets that contain records that are changing and being developed quickly. Branching is an important concept in Pega app authoring workflow where a user can make changes to an application privately, resolve conflicts and merge the changes to parent
DESIGN VARIANTS
EXAMPLE DESIGN COMPONENT: OBJECT SELECTOR
An efficient way access and edit an object (rule/case) without losing context
Designers of multiple workflows had a common pain point - they cannot let end user access or edit a rule on the fly. The end users had to go to Dev mode to make changes to the rule manually. So a component and interaction pattern is needed to address this pain point.
OUTCOME
Over the span of two years, I have designed and collaborated with engineers to build hundreds of components, templates, defined many crucial design patterns like error handling, destructive actions, creation of an object, developed one Figma plugin for data tables, created thousands of documentations.
IMPACT
5 clients signed up right after beta soft launch in 2022 and many more after the full launch in 2023. Time-to-value achieved in just 3 months. In 2023, 18 product designers, 6 product managers, 10+ frontend engineers were using the storybook components I have designed and help developed on a daily basis.
For client stories and how ISVs across the world are using Pega Launchpad, visit the website