an image showing the mobile and web versions of Panda

A case study on improving asset creation efficiency and maintaining brand consistency with Panda, an internal design automation tool for a payment service provider.

ROLE

User research, UI design

TIMELINE

6 weeks (April 2023)

TOOLS

Figma, Miro, Figjam

OVERVIEW

In a 6 week project, I collaborated with another designer and a team of engineers to create Panda, an asset generator designed to streamline processes, improve efficiency, and reduce turnaround times for internal teams within Paystack. This project involved conducting research, defining user flows and process maps, and designing the wireframes and high fidelity prototypes.

At the end of this project, we built a tool that cut down the asset creation time from over a day to 5 minutes.

CONTEXT

At Paystack (a payment service provider), the design studio team was responsible for creating a variety of graphic assets for internal use—social media posts, product launch announcements, certificates, Zoom backgrounds, and more.

With time the volume of asset requests increased, causing the following challenges.

an image showing the challenges that led to Panda

UNDERSTANDING THE PROBLEM THROUGH RESEARCH

To begin, we spoke with the design studio team, and with representatives of the different internal teams that typically requested assets.

The aim of the research was to properly understand the challenges the design studio team had been facing, and to have a better understanding of what the current asset request process looked like.

an image showing the research methods and questions

From our stakeholder interviews we were able to map out the current asset request process;

image showing one of the scenarios while requesting for an asset

image showing the scenario when detials changed after the asset had been created by the design studio team

And define the ideal process;

ew workflow with Panda the design studio team is removed from the flow, and stacks have direct access to create new assets whenever they need to

In addition to the interviews, we also did some secondary research into some sites like Canva, Pixelied, and Stencil, which were providing similar services.

GOALS

Based on the insights from the interviews and secondary research, we defined the goals for Panda;

Goals for Panda

BRAINSTORMING & USER FLOWS

Our first idea was to create two separate portals — one for Stacks (non-designers within Paystack) and another for the design studio team. However, we soon realized that managing two separate systems would add unnecessary complexity. There was one major thing to consider;

"How can we make sure that all the assets produced by Stacks look consistent (in terms of spacing and layout), and match the Paystack brand?”

We figured out a solution for this. Instead of letting the Stacks directly edit the template, we thought about showing them a preview of the template, and providing them with a form that they could fill to edit that template. The form provided would depend on the template they wanted to edit, and the text fields would have character limits to ensure that any content added to the template did not mess up the layout.

With this in mind, we worked on the user flows for desktop and mobile.

User flow for desktop

User flow for mobile

LOW FIDELITY WIREFRAMES

We worked on the low fidelity wireframes to determine what the basic structure would be. We decided to have a single page design with 3 distinct sections.

The first section is the Build section with the form for Stacks to fill. These forms are dynamic, and are generated based on the asset the Stack wants to generate.
The second section is the Preview section. After Stacks have filled a form, they can click on a button and see a preview of their flyer in the top right section.
In the last section, Stacks can see what their flyer would look like across different touch points. (The touch points also differ based on the assets)

image showing the ow fidelity wireframes created on Miro

Low fidelity wireframes of desktop flow

SOLUTION & FINAL DESIGN FLOW

Step 1: Log in

Before using Panda, Stacks have to log in with their Paystack email addresses.

Step 2: Select asset type

This is the Panda empty state, that shows when no event has been selected yet. To begin, a stack would choose an asset from the asset type dropdown.

screen for the user to select the tyoe of asset they want to create

Panda empty state

Step 3: Fill dynamic form

After choosing an asset type, a dynamic form is generated and Stacks can fill the input fields with the information they want on their asset. They can also choose from the illustrations provided.