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.

Next
Next

Patticha Visuals