Panda; Paystack’s Asset Generator
Role
Product Designer
I worked in a seven-member team, consisting of two backend engineers, a frontend engineer, a DevOps engineer, a product manager, and a fellow product designer. My primary role involved partnering with the other designer to conduct research, define the user flow, and create design prototypes.
Duration
3 Months
Tools
Figma, Whimsical, Notion
Overview
Problem
The Paystack Design Studio team is responsible for creating all marketing assets, such as event announcements and awareness posters, that are used by a vast majority of the company. However, the frequent requests for these assets have several consequences:
- The constant flow of requests accumulates overtime and eats into the time that the team could spend on other tasks.
- Handling these requests often involves multiple long conversations between the Design Studio team and Stacks who are requesting.
- Due to the iterative nature of these interactions, the delivery of requested assets may be delayed.
Goals
- Increase the capacity of the team to take on and deliver more challenging tasks.
- Increase the efficiency of the Design Studio team.
- Create faster turnaround time on requests.
Process
Research
Our research process began by clearly stating the problem, target audience and our assumptions. We then discussed these through interviews with our potential users.
Problem Statement
Our design brief was clear that we should first explore an image generator to solve the problems. So, we created and analysed our problem statement:
How might we improve the process of designing repetitive event posters at Paystack to keep up with the increasing volume of requests, reduce turnaround time, and increase the capacity of the design studio team using an assets and image generator?
Target Audience
We also identified who our target audiences were:
- Design Studio
- Stacks, a.k.a., requesters
Assumptions
We then created a list of assumption statements that we hoped to validate or invalidate while speaking to our potential users.
- Our potential users are the Design Studio team, designers, and non-designers in other teams within Paystack.
- The Design Studio team wants to make sure that every design sent off is good enough and is consistent with the Paystack brand.
- The non-designers want faster turn-around time for their design requests.
- The design studio team wants to spend less time working on repetitive tasks.
- Users need multiple sizes of posters for different touchpoints (e.g., banners, social media, billboards, etc.)
The objectives of interviewing our target audience were to:
- Understand the current process of designing event posters.
- Validate our target users — so that we would be sure that we were creating Panda for the right group of people.
- Understand their pain points — so that we knew the problems we were trying to solve for them and therefore could intentionally design features that addressed those problems.
- Understand which workarounds the Design Studio team had previously implemented to solve these problems, if any.
Even though our questions were directly inspired by our assumption statements, we also wanted to hear unbiased thoughts from our audience. So, we included ample time for that during our discussions. On the side, we also conducted secondary research, which included exploring products like Canva and Adobe Express which had an offering similar to what we envisioned for Panda.
Insights
Our research confirmed most of our assumptions, however, we made two new discoveries:
- The current journey for creating design assets is much more tedious than we thought.
- A previous attempt had been made to streamline this process. The Design Studio team piloted a new process with the Developer Relations team by creating an editable template on Figma. However, the non-designers in that team struggled to learn how to use a new tool like Figma.
🐼
Creating visibility of critical information will allow the Userops team to identify the causes of a payout issue and quickly communicate them to merchants.
In terms of visibility, we could make information like error codes, session ID, deduction ID, and different payout statuses visible on logs and timelines on Watchtower
Considerations
Based on the Figma pilot that was done with the Developer Relations team, we decided not to explore using design tools like Figma for our solution, even though we had gone into the project thinking it could work well. However, we had another idea:
🐼
Panda could be a simple platform we build that allows the Design Studio team to create flyer templates that Stacks use to generate their own flyers.
With our new direction came two questions:
- What tools will the Design Studio team need on the platform to make the best templates?
- How will we make it easy for Stacks to customise the templates through text and illustrations without too much freedom to change the layout?
Question #2 was easy to answer. Instead of allowing Stacks to be able to move elements around a flyer template, we could provide a locked layout to which they could add information via a form. We also know that Stacks typically need flyers for different social media platforms, so different flyer sizes could be automatically generated.
Question #1 was challenging to answer because:
- The platform would not have the functionality of the advanced design softwares they use and this could be limiting for the Design Studio team.
- Creating a close match to what they know and need would take too much time.
- The Design Studio team would have to dedicate time to learn how to use a new application, which disrupted our goal to increase their capacity to take on and deliver more tasks.
Our new direction was to make Panda a one-sided web application that was only used by Stacks who needed to create flyers.
🐼
Panda v1 is going to be a place where Stacks can have a breeze creating flyers. They’ll do it by picking from ready-made templates, filling out a form, giving their design a quick review, and downloading their flyer in multiple sizes.
But how would the templates be uploaded? We decided that, for now, our engineers would be responsible for uploading templates.
Outcomes
User Journey
Instead of the previous complicated journey, the new journey of creating design assets would look like this:
To get the engineers and designers on the same page, we mapped out the flows for Panda v1 in more detail.
Stacks go to the Panda website, login with their Paystack email address, select a template, fill out the form that is dynamically processed, generate and preview their design, and download their asset in one or more sizes.
High-fidelity Mockups
Based on the user journey, we designed mockups for each of the screens needed in the platform.
Login
Here, Stacks will login with their email
Get Onboarded
The page is divided into three sections where three major actions happen: sections; Build, Preview and Download. A quick walkthrough is initiated for new users.
Log In
When Stacks select a template, a dynamic form is generated. The form asks for data specific to the template that was selected.
Preview
Once the required data is collected through the form, Stacks can click on the “Generate Preview” button. This sends the data to the backend to generate the image. The generated image is then shown in the Preview Section. Future versions of Panda could allow the preview to update while the Stack is typing.
Download
Panda allows Stacks to download their asset after they have filled the form and generated a preview. They can choose to download all the asset sizes at once by clicking “Select All” or select individual sizes by clicking the checkboxes beside their choice sizes.
Prototype
We made a prototype in Figma to share with the engineers and other designers for feedback. Thereafter, we showed the prototype to our potential users so we could get their feedback.
Development and Launch
The engineering team built Panda v1 successfully and we launched to a subset of Stacks to pilot Panda.
Reflections
Impact
- Panda is now Paystack’s go-to internal asset-creation tool that streamlines the asset creation processes and improves all-round employee efficiency.
- The initial users were very happy with the speed and convenience of Panda and have begun making Panda a part of their regular workflows.
- Panda has reduced the time the Design Studio team spends on the creation of repetitive design assets to zero hours. Now, the team can dedicate all the gained time to more productive and challenging tasks.
- Stacks are empowered to create flyers on the go. This saves time for them too, as they no longer need to wait for designers in case of urgent requests.
Lesson
To update with my lessons
Other Projects
Wavv
Amazon Cars
Finda