Panda is an asset generator that was designed for internal use within Paystack.
THE PROBLEM
The design studio team at Paystack produced all the graphic assets that were used by various teams across the company. These graphic assets included social media posts for events, product launch announcements, certificates, zoom backgrounds, etc. The requests for these assets were very frequent, and they caused 2 major problems;
- Repetitive tasks: Most of the design requests required minor adjustments on predefined layouts, consuming significant time that could be spent on more challenging tasks.
- Long turn around times: Some design requests required multiple conversations between the design studio team and the requesters, leading to long turn around times on those requests.
GOALS
To address these problems, we needed to explore how we could streamline the creation of graphic assets by implementing an assets generator that would;
- Increase the efficiency of the design studio team
- Ensure faster turnaround time on requests
- Increase the capacity of the team to take on and deliver more (challenging) tasks
ROLE
I worked on this project with a team of 7 people. 2 backend engineers, a frontend engineer, a DevOps engineer, a product manager, and another product designer. I worked with the other designer to conduct research, define the user flow, and design the prototypes.
RESEARCH
The design studio team shared a detailed brief sharing the issues they had been experiencing, and what they envisioned Panda to be. Based on the brief they shared, we created a list of assumption statements. We were assuming that;
- Our target users were the design studio team, and Stacks (non-designers in other teams within Paystack)
- The Stacks wanted faster turn-around time for their design requests.
- The design studio team wanted to spend less time working on repetitive tasks.
- The design studio team wanted to make sure that every design sent off was good enough and consistent with the Paystack brand.
- Users needed multiple sizes of posters for different touchpoints (banners, social media, billboards, etc)
Our next step was to speak with our identified target users to validate our assumptions, as well as fill in any knowledge gaps that we had. The goals of our research were:
- To validate our target users.
- To validate and understand the problems we were trying to solve for them.
- To understand which walkarounds the design studio team had previously implemented to solve these problems.
- To understand the current asset request and design process.
Insights
- Our assumptions were correct.
- The asset request and design process looked like this;
- The Design Studio team had already tried a walkaround with Dev Rel team by creating editable templates on Figma. However, this did not work out because it involved non-designers needing to learn how to use a new tool.
Secondary Research
In addition to the interviews, we also did some secondary research into some sites like Canva, Pixelied, and Stencil, which were providing similar services.
BRAINSTORMING
Our initial idea was to create two separate portals for Panda;
- A portal for Stacks
- Another portal for the Design studio team
However, during our brainstorming session, we started thinking deeply about how these would work. There were 2 things to consider:
The first one was;
"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.
The second one was;
How exactly will the portal for the design studio team function?”
While thinking through the answer to this question, we discovered some potential problems with designing a separate portal for the design studio. We already knew that the design studio team made use of advanced applications like Figma in their day-to-day work, so the questions were:
- Is it a smart idea to ask them to use a tool with much limited functionality to perform tasks that can be performed better on another application?
- Can we build something that would replicate some of Figma’s essential features, and even if we can, is it a wise idea to try given that we have just 3 weeks?
The answer to both questions was “No”, so we decided to discard the portal for the design studio team. We decided that the templates could already be uploaded by the engineers, and the Stacks could then make use of those templates to generate their assets.
With Panda, we were trying to achieve this new workflow;
FINAL OUTCOMES
User flow
The first step in the design process was to define the user flow for desktop and mobile.
User flow for desktop
User flow for mobile
Low fidelity wireframes
We also 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)
Low fidelity wireframes of desktop flow
High Fidelity wireframes
- Login
- Select asset type
- Fill dynamic form
- Generate Preview
- Download
- Walkthrough
- Loom Video
Before using Panda, Stacks have to log in with their Paystack email addresses.
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
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.
After filling the form, Stacks can click on the Generate preview button to see how their asset will look across different platforms.
Stacks can then download the assets for all platforms or can download for specific platforms.
We provided a simple walkthrough for Stacks, to serve as a guide if it was ever needed. This step is triggered by clicking on the help icon at any point during the process.
IMPACT
- Paystack now has an assets generator that streamlines the assets creation process and improves employee efficiency.
- The productivity of the design studio team has been increased. They no longer have to spend time on repetitive requests, and are now free to take on more challenging tasks.
- Stacks can now create flyers as soon as they need them. The asset turn around time has been reduced from >1 day to about 5 minutes.
LESSONS
- While working on this project, I learnt the importance of clear communication between all the teams involved in building a product. At the start of the project, the design and development teams were not communicating well. This caused confusion and led to us spending 6 weeks By fixing the communication gaps and ensuring full transparency by all parties, we were able to collaborate efficiently to deliver the final product.
- Everyone on a team is under a lot of pressure to make a project work. I learnt to understand this, and extend grace when things are not moving the way I want them to, or as fast as I want them to.
WANT TO SEE MORE?
GoLemon Misfits
Reducing food waste and business loss
Design. Strategy.
Content guide
