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 project was undertaken by the Beam team 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 accuracy during implementation. Leveraging Figma components and variables facilitated quicker decisions cascading 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 the implementation process of translating brand guidelines to 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 the creation of new files, leading to prolonged setup times and redundant design decisions.
Inconsistencies in Design Files: The absence of standardized design files results in inconsistencies between implementations, causing confusion and hindering developer handoff.
Lack of Implementation Efficiency: Design decisions need to be made repeatedly across individual instances, prolonging the implementation process and increasing the potential for 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, Beam Customer Experience team, calls with clients seeking quicker stand-ups, and pressure from leadership to enhance 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, the development of a plugin to sync CSS values from the Figma file introduced challenges related to color token management, potentially increasing timelines.
Initially, the Design and Development teams were not fully aligned regarding the problem’s scope. However, as they worked with the original file, consensus was reached, leading to the development of a larger token system for implementation in subsequent Beam product iterations. The team aimed to decrease implementation design length by 4-6 weeks, increase 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 aimed to receive more consistent and accurate files, and Beam Customers desired 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
Initial insights were gathered 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 backgrounds on the client side, enhancing 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 in reaching teammates at offices across the country and the globe. Previously, brand managers collected guidelines in print or PDF formats, which were difficult to update and prone to being lost.
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 to 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 can be found in urban and rural areas, with a prevalence in major cities and urban centers where there's a concentration of business opportunities.
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 time wastage.
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, these did not occur during this project, which allowed us to maintain focus and meet our objectives promptly.
We avoided any scope-altering inputs introduced mid-way through the project, enabling us to complete the project without delays or deviations. And thankfully, we did not encounter stubborn stakeholders or excessive educational needs, which facilitated 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: Proactive management of 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: Provided guidance and support to 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 realize this vision.
Research and Development: The team conducted research to understand Figma's styles and components, then began creating a comprehensive file covering standard elements in a Beam implementation.
Documentation: As design progressed, the necessity for documentation became evident, 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 originated from the recognition of prolonged 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 were conducted within Figma to understand components and styles, facilitating the creation of an intuitive and 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 effectiveness of the deliverable was validated by the reduction in setup times and the elimination of inconsistencies observed in previous implementations.
Lessons Learned and Future Directions
Future Iterations: The introduction of 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 remained within budgetary constraints, ensuring efficient resource allocation and cost-effectiveness.
Final Deliverables
Key Deliverables: The project culminated in the creation of a Figma template file for implementation designers, accompanied by training sessions on its usage. Additionally, a client-ready Figma file was provided 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 success of the project was quantified 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, eliminating redundant work and ensuring a unified user experience.
Scalability: Building scalable design systems and tools, such as the Figma plug-in for syncing design decisions with CSS properties, facilitates future growth and evolution of products 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.
