Parade Figma Plugin
An internal design system to automate agency work.
My Role
UX Designer
Tools Used
Figma
Team
1x UX Designer
2x Engineers
Duration
8 Weeks
Key Contributions
Concept Ideation
Project Management
Client Management
User Research
Branding
Design System Build
Developer Handoff
Parade Dashboard
Parade
Helping companies launch and grow without hiring a designer.
Our team of 6 was working to automatically generate personalized designs for a fraction of the cost of an agency by using machine-learning software.
The next step in building out a full brand kit for clients was to automate the generation of marketing assets.
The Challenge
Early-stage founders need a cheap and fast, yet quality solution to launch their brand externally.
How can we deliver custom, affordable assets to clients within 24 hours?
What are we trying to do, exactly?
Project Goals
With the internal tool we'd create, the goals revolved around serving clients as quickly as possible with minimal manual work.
Goal #1: Serve customers on-brand assets within 24 hours
Goal #2: Generate assets with no manual design work
Goal #3: Build out a design system of scalable templates
How Parade Works
Painting the Picture
Step #1
Identify Brand Personality
Our software analyzed the user's onboarding survey results to identify their brand personality.
Step #2
Build Brand Kit
Our machine learning-based system then selected specific design characteristics (whitespace, text sizing, etc.) for the brand.
Step #3 (What we're working on!)
Generate Assets
Algorithms then automatically generate marketing assets with the company's branding and specifically tailored design elements.
Getting to Know our Users
Key Takeaways from 1:1 client work
In this first phase of the project, I served clients in classic agency style to gather insights into what they wanted and how we could design assets to work towards our goal of automation. I worked 1:1 with 8 clients to serve them fully customized social media templates.
Case Study
Partnership Announcement
Customer Testimonial
New Feature Release
Bold Statement
Takeaway #1
Confirmed Initial Product Offerings
Customers confirmed the need for social media posts; they all gravitated towards needing graphic posts versus photo-based posts due to a lack of imagery at such an early stage.
Result: we locked in the 5 initial social media posts we would build out and use for our MVP.
Takeaway #2
Need for Graphic Elements
Changing brand colors, type, and logos were not enough to make a personalized asset, customers repeatedly asked for "a unique element" to set their brand apart.
Result: We would include graphic elements in the brand kit, library of design templates, and the internal tool.
Takeaway #3
Figma is not for Beginners
Customers had difficulty updating the assets that we delivered in Figma. They needed a walk-through and explicit directions on how to navigate the platform.
Result: Down the line, we would need to serve customers their deliverables in a more user-friendly method.
Turning Templates into Algorithms
Deconstructing the Solution
With a good understanding of what we needed to build for our customers, I started working with our lead backend engineer to translate my designs into an algorithm for the plugin to communicate with.
Custom social media template
Backend translation of the template
Mapping out Functionality
Product flow for the Figma Plugin
To fully flush out what we had to build, we mapped out the process of a user's first interaction with Parade, to the final handoff of their on-brand assets. The major feature specs revolved around the Figma plugin's ability to update the master component library with the new brand, and then ripple these changes to the template files.
Putting it to the Test
Verifying the prototype
At this point, our engineer had built a prototype that was ready to test and we were excited to see it's full capabilities and how the end results would turn out.
Test #1:
Can the plugin successfully pull a brand kit from Parade and update the Figma files?
Test #2:
Can one base template generate truly unique assets for different brands?
Result:
Both tests passed! The plugin functionality worked to generate on-brand assets with no manual design work. The Gif below shows the success of updating one set of templates to various brand kits.
Social posts for different brands from the same templates
Case Study: True Pass
Using the Plugin in Real Life
While preparing for their Beta launch, TruePass used Parade to refresh their branding, and upgrade their website, slide deck, social media presence. We successfully used the Plugin to generate TruePass' assets with zero manual design work.
Parade was spot on from the first delivery. Design wise, they captured our vision perfectly... it was all delivered literally in 24 hours. We not only saved thousands of dollars, but valuable time.
Marieme Sane, CEO, TruePass by IonCell
Landing Page
Social Posts
Slide Deck
Ads
Marketing Emails
Final Thoughts
Major progress towards automation
The team was thrilled at our progress towards full automation and how we engineered a design system by tapping into Figma capabilities and their API. We were able to immediately start serving customers using the plugin which had an immediate positive impact on revenue efficiency.
Parade has shut down as of 2021, but the IP may be used in the future.
Feedback on the build? Want to chat about Figma or startups?
Feel free to get in touch!