Petite Plume
As an e-commerce retailer, marketing communications are integral to building and maintaining customer relationships as well as driving sales. With multiple weekly email and SMS sends, plus regularly updated paid ads and landing pages, it is imperative that the design process be as streamlined as possible to keep up with evergreen and campaign content needs.
Goals:
Build an MVP design system that followed new brand guidelines
Unify team workflows and processes to support collaboration, iteration, and cohesion across all outputs
Role:
Visual Designer
UI/UX Designer
Project Duration: 160 hours
Tools:
Figma and Adobe Creative Cloud (for design)
Shopify and GemPages (for implementation)
Constraints:
Allotting budget for any new software
Ensuring all aspects of the design system were in line with branding, cohesive across communication channels, and accessible
Managing regular workload in conjunction with project
Software Solution
With a fragmented work flow of individuals working in different softwares, maintaining visual consistency across all files, repeatedly sharing massive files out to various stakeholders, distinguishing which file version was the latest, and having them all live in miscellaneous locations, it became increasingly apparent that the design team needed to unify under a system and software.
By utilizing Figma for centralized storage of digital assets, coupled with a standardized design system, visual coherence in cross-channel communications and brand consistency across team members' deliverables is ensured.
Feature Matrix
A Competitive Feature Matrix was conducted to observe and understand what discrepancies there were between the current software (Adobe Creative Cloud) and what other competitors do in this space based off of key product features necessary for the team to excel.
Figma Implementation
To aid the onboarding process and overcome the adoption challenges of Figma, I implemented various strategies. I organized one-on-one tutorial sessions and collaborative work blocks, as well as shared informative videos and supplementary resources.
Building the System
Brand Guidelines
With the refreshed branding toolkit provided by an external agency, which included isolated elements like: new fonts, updated color palette, and graphical flourishes, I used that as the foundation for creating the design system.
Reference Image From External Agency’s Proposal
Design System
Figma Library
Upon receiving the brand guidelines from the external agency, I then translated them into Figma by creating components.
Email Modules
To better facilitate consistency and efficiency, using these new elements, I created modules that could easily be mixed and matched based on the goals of marketing communications (i.e. product education, print feature, new arrivals, etc).
Initial Wireframes Utilizing Modules (Left) and Completed Email Design (Right)
As demonstrated, each component can be used repeatedly styled different ways with the use of imagery/video and brand elements like color, text, flourishes, etc.
Web Modules
In tandem with the brand identity initiative, it became crucial to translate these changes onto the e-commerce website. This prompted the development of web modules essential for crafting new pages that would effectively convey Petite Plume's brand narrative and strategic objectives. Creating these content blocks enabled rapid builds and prototyping for responsive web development across desktop and mobile.
Responsive Web Page Created Using Web Modules (Desktop - Left, Mobile - Right)
Cont. Responsive Web Page (Desktop - Left, Mobile - Right)
Further develop components to support new features, web pages, and brand identity evolution
Continue to knowledge share about design library, best practices, software capabilities and updates
Next Steps
Feedback
Within six months of Figma use, team members cited that it made designing so much easier and quicker. A substantial amount of their time is saved by not having to search all over the place on their computers or in the Digital Asset Manager (DAM) for logos, colors, brand elements, etc. Designing with Figma has enabled the team to collaborate by dropping in images, writing copy, and leaving feedback all in real time.
Conclusion
Currently, all 10 internal and external members of the marketing and design teams use Figma. Previously, it took about two days to create an email as everything had to be made from scratch or found from someone else’s previous design file. Now, it only takes a matter of moments to create the initial wireframe and one day to make a review-ready design. The team is able to crank out biweekly batches of 10 emails and 15 paid ads with allotted time for feedback, iteration, and approvals. With the time we’ve saved using Figma, we are able to work ahead, making us agile to create ad hoc communications in order to push towards sales goals and allowing us focus to on strategy for upcoming initiatives/campaigns with the foresight of anticipated needs and a holistic view of deliverables.