Case Study: Optimizing Beam White Label Templates for Efficient Brand Implementation
We developed a ‘white label’ template in Figma, significantly enhancing our implementation speed. By using Figma components, we created customizable template parts that seamlessly align with customer brand guidelines. These components are also synced with product specifications, ensuring design decisions are consistently replicable in development.
Our product and implementation design teams partnered with developers to create a flexible set of color tokens. This system allows us to swiftly adapt designs to match each client’s brand identity, ensuring consistent and personalized visual experiences.
Overview
The Beam team undertook the project to enhance our flagship brand engagement and asset management platform, Beam. Beam serves organizations seeking effective brand asset management solutions, empowering teams to centralize assets, streamline collaboration, and ensure brand consistency across touchpoints.
The primary goal was to increase implementation efficiency and consistency in developer handoffs. Key problems included lengthy setup times due to the absence of a uniform starting file template, resulting in redundant design decisions and inconsistencies in design files.
Overall objectives
Decrease Implementation Time: By creating a uniform starting file template, the project aimed to reduce setup times. The project targeted a reduction in design implementation time, which previously lasted 6-8 weeks.
Ensure Consistency: Leveraging Figma components and variables aimed to maintain consistency in design files and eliminate redundancies. A uniform starting file aimed to streamline client brand representation, reducing setup times and inconsistencies in design files handed off to developers
Improve Developer Handoff: Providing developers with comprehensive Figma files aimed to reduce confusion and improve implementation accuracy. Leveraging Figma components and variables enabled faster decisions to cascade throughout the file.
Stakeholder objectives
Brand accuracy: Beam customers sought accurate brand representation in implementation design files.
Smooth implementation: Implementation designers aimed for consistency and efficiency through a uniform starting file template.
Design-to-code consistency: Developers sought Figma files with all design decisions and naming conventions for improved accuracy.
In summary, the project aimed to optimize Beam’s digital platform for hosting and presenting brand guidelines, enhancing brand management, consistency, and collaboration for organizations using the Beam platform.
This image showcases our wireframe layout alongside three client homepages. The wireframe demonstrates the consistent underlying structure, while the three homepages illustrate how different styling of the component parts can create unique looks that adhere to each client's brand identity without altering the original framework.
Problem Statement
The Beam White Label Templates project aimed to address inefficiencies and inconsistencies in translating brand guidelines into the Beam platform. Despite Beam’s robust features for brand asset management and collaboration, the design portion of the implementation process was time-consuming, sometimes lasting 6-8 weeks. The lack of a uniform starting file for client brand representations led to lengthy setup times and inconsistencies between design files, impacting implementation efficiency and developer handoff consistency.
The specific problems identified include:
Lengthy Setup Times: Without a uniform starting file template, each client implementation requires creating new files, leading to longer setup times and redundant design decisions.
Inconsistencies in Design Files: Without standardized design files, implementations vary, causing confusion and hindering developer handoff.
Lack of Implementation Efficiency: Teams must repeatedly make design decisions across individual instances, prolonging implementation and increasing the risk of errors.
The Beam Implementation Design Team aimed to improve setup times, Beam Developers sought more consistent and accurate files, and Beam Customers desired faster site deployments to meet important deadlines.
Insights from the Beam Implementation Design team, the Beam Customer Experience team, client calls seeking quicker stand-ups, and leadership pressure to improve efficiency for customer satisfaction and cost savings.
The problem escalated as the project progressed. Initial issues, such as misassociations of colors in the Beam Theme file, highlighted the need for more comprehensive solutions. Additionally, developing a plugin to sync CSS values from the Figma file introduced challenges in color token management, potentially extending timelines.
Initially, the Design and Development teams were not fully aligned regarding the problem’s scope. However, as they worked with the original file, they reached consensus, leading to the development of a larger token system for implementation in subsequent Beam product iterations. The team aimed to shorten implementation design by 4-6 weeks, improve accuracy in design-to-development handoffs, and reduce QA issues before site launch.
Users & Audience
The Beam Implementation Design Team sought to improve setup times, Beam Developers wanted more consistent and accurate files, and Beam Customers wanted faster site deployments to meet important deadlines. From a receiving and usage perspective, the end users of the design handoff are Beam developers and QA. From a design and implementation perspective, the end users of the Figma file are Beam designers and sometimes customers.
Understanding Corporate Brand Managers
We gathered initial insights through regular conversations within the team and with customers. The UX and CX teams routinely met with customers throughout the kickoff, implementation, and launch processes of Beam standup, providing ample opportunities to capture their thoughts and feedback on the product and processes. Many team members had client-side backgrounds, strengthening their understanding of user problems, constraints, and deadlines.
Corporate brand managers, the primary users of Beam, are tasked with evolving their roles from being perceived as "brand cops" to "brand concierges." They face challenges reaching teammates in offices across the country and around the globe. Previously, brand managers collected guidelines in print or PDF formats, which were hard to update and easy to lose.
A Day in the Life of a Corporate Brand Manager
Corporate brand managers start their day early, juggling emails, meetings, and strategy sessions. They meticulously review brand guidelines and collaborate with teams to ensure consistency across marketing materials. Brand managers thrive on creativity, strategy, and problem-solving, finding fulfillment in seeing their brand's message come to life. They would use Beam over competitors because it offers comprehensive solutions, customizable brand guidelines, intuitive asset storage, robust collaboration tools, and seamless integration with design tools like Figma.
Key stakeholder demographics:
Education: Many brand managers hold bachelor's degrees, often in marketing, business administration, or communications. Some may have pursued further education, such as a master's degree in marketing or an MBA.
Experience: Brand managers typically have several years of experience in marketing or related fields before advancing to a brand management role. They may have worked as marketing coordinators or product managers.
Age: Brand managers span various age groups, but they often fall within the mid-career stage, between their late 20s and mid-40s.
Industry: They work across diverse industries, including consumer goods, technology, healthcare, finance, and hospitality.
Skills: Brand managers possess analytical, creative, and interpersonal skills, with proficiency in market research, strategic planning, and project management.
Location: They work in urban and rural areas, with a higher concentration in major cities and urban centers where business opportunities are abundant.
Roles & Responsibilities
Over a span of three months, this was our all-in-house design team:
Duncan Robertson: UX/UI Design Lead and project architect; primary planner, researcher, and synthesizer; conducted stakeholder meetings and provided updates; and worked closely with designers to ensure consistency and avoid wasted time.
Sarah Moore and Parker Baker: UX/UI designers; Secondary planners, researchers, and synthesizers; Worked on visual design, ensuring alignment with the basic Beam brand to maintain consistency within the Beam system.
Simultaneously with the visual design phase, the team collaborated with the development team to ensure alignment and smooth implementation within the Beam stand-up process.
Scope & Constraints
Anticipated interruptions were not a hindrance
I anticipated interruptions from client work, but fortunately, none occurred during this project, which allowed us to stay focused and meet our objectives promptly.
We avoided scope-altering inputs introduced midway through the project, enabling us to complete it without delays or deviations. Thankfully, we did not encounter stubborn stakeholders or excessive educational needs, which supported smoother progress and decision-making.
Technical constraints arose from underestimating the complexity of pulling data from Figma into CSS values. This issue required reworking in a subsequent iteration of the Beam White Label Templates.
How we dealt with the potential constraints
Collaboration with Development Team: Close collaboration with the development team ensured that the design file would effectively enhance their processes.
Managing Executive Expectations: Proactively managing executive expectations helped maintain satisfaction with project progress and efficiency.
I played the role of UX/UI Design Manager
Project Planning and Strategy: Collaborated with stakeholders to define objectives and timelines.
Team Leadership: Guided and supported the design team.
Design Conceptualization: Contributed to generating creative ideas aligned with project goals.
Design Review and Feedback: Ensured design solutions met standards and addressed concerns.
Stakeholder Engagement: Presented designs, gathered feedback, and addressed requirements.
Quality Assurance: Oversaw the QA process to ensure deliverables met standards.
Continuous Improvement: Fostered a culture of learning and innovation within the team.
Process & What I Did
Play-by-Play
Identified Need: After observing the inefficiencies in starting each Beam implementation from scratch, I recognized the potential for efficiency gains through a uniform starting template file.
Leveraging Figma: With the introduction of Figma's components, the opportunity for even greater efficiency became apparent.
Tasked Designers: During a lull in client work, I assigned designers from the Beam product design team to bring this vision to life.
Research and Development: The team researched Figma's styles and components, then began creating a comprehensive file covering standard elements in a Beam implementation.
Documentation: As the design progressed, the need for documentation became clear, leading to collaboration with the content team to create clear instructions and explanations within the file.
Iterative Updates: Advances in Figma's features necessitated ongoing updates throughout the process, ultimately enhancing the file's effectiveness.
Project Initiation
Problem Identification: The project began with the recognition of long setup times and inconsistencies in implementation files, prompting the need for a standardized template.
Solution Urgency: The project needed immediate attention to streamline implementation processes and enhance developer handoff consistency.
Evidence and Justification: Observational data from client interactions and implementation design files clearly demonstrated the problem's significance.
Research Approach
Observational Research: Research primarily relied on experience working with Beam clients and products, providing valuable insights into existing challenges.
Initial Steps
Component Documentation: The project began by documenting all necessary components and basic styles essential for a Beam implementation.
Early Design Exploration
Prototyping in Figma: Early prototyping and exploration in Figma helped clarify components and styles, supporting the creation of an intuitive, manageable file.
Stakeholder Collaboration
Development Team Contribution: Stakeholders from the development team played a crucial role in defining design constraints and requirements, guiding the approach to designing the file effectively.
Final Deliverable and Validation
Deliverable: The final deliverable was a Figma template file, intended for duplication in each Beam implementation project.
Problem Resolution: The deliverable's effectiveness was validated by reduced setup times and the elimination of inconsistencies observed in previous implementations.
Lessons Learned and Future Directions
Future Iterations: Introducing variables and tokens in Figma's REST API informed plans for the next iteration of the Beam White Label Template, promising more robust connections between Figma and the platform code.
Continuous Improvement: Lessons from this project underscore the importance of ongoing adaptation and enhancement in response to evolving tools and requirements.
Outcome & Lessons
Timeliness
Project Duration: Despite facing challenges in securing consistent resources and timelines due to its internal nature, the project was completed within 3 months, meeting the initial deadline and avoiding pressure from impatient stakeholders.
Budget Adherence
Financial Management: The project stayed within budget, ensuring efficient resource allocation and cost-effectiveness.
Final Deliverables
Key Deliverables: The project culminated in a Figma template file for implementation designers, accompanied by training sessions on its use. Additionally, we provided a client-ready Figma file for clients or partner agencies interested in managing the implementation application themselves.
Team Morale
Consistent Positivity: The team maintained a positive and encouraging attitude throughout the project, fueled by the visible benefits and value of the deliverables.
Stakeholder and User Reception
Stakeholder and User Satisfaction: Both stakeholders and users were impressed by the increased efficiency and reduced QA issues resulting from the project. The streamlined implementation process garnered particular praise from customer stakeholders, who appreciated faster site setup and smoother workflows.
Success Metrics
Measuring Success: The project's success was measured by a significant reduction in the design portion of the implementation process, from 6-8 weeks to less than 4 weeks, demonstrating improved efficiency and productivity.
Lessons Learned for Future Projects
Foundational Work: Investing time in foundational work upfront may require additional effort initially but pays off in improved efficiency and communication later in the project lifecycle.
Efficiency and Consistency: Creating templates and design systems promotes efficiency and consistency, eliminates redundant work, and ensures a unified user experience.
Scalability: Building scalable design systems and tools, such as the Figma plug-in that syncs design decisions with CSS properties, supports future growth and product evolution while maintaining consistency and efficiency.
Continuous Improvement
Iterative Learning: Reflecting on the project's outcomes and processes informs strategies for continuous improvement, enhancing future design endeavors and project outcomes.
