BrandGuide Builder
Company:
BrandGuard
Role:
UI.UX, Researcher
Date:
May 2024
P R O J E C T D E T A I L S
Tools
Figma, Adobe Creative Cloud
Team
Head of Product, 1 Developer, 1 Data Scientist
Deliverable
Web Application
User
Creatives, Copywriters, Small Marketing Agencies
Constraints
A small team working on this as a side project
Small to medium-sized businesses often lack the resources or expertise needed to create comprehensive style guides, leading to inconsistent branding and communication.
BrandGuide Builder was developed as a companion to BrandGuard to address this gap by providing an accessible tool for these businesses to easily develop and maintain detailed brand guidelines. Additionally, this solution allows our machine-learning models to gather more data on various brands, enhancing the platform's overall effectiveness.
Researcher & designer
As a Product Designer and researcher for the BrandGuide Builder, I played a key role in solving a critical challenge: enabling users to generate a comprehensive brand guide without requiring extensive data uploads. Through our work on the BrandGuard platform, we discovered that users often struggled to provide enough assets to effectively train the system. To address this, I conducted competitive research to identify gaps and opportunities in existing brand-building tools, collaborating closely with engineers and the AI team to explore automated solutions.
I designed wireframes and validated high-fidelity prototypes with users, ensuring alignment with stakeholder goals at every step. This iterative process resulted in a tool that seamlessly auto-generates brand guidelines, requiring minimal input from users. The project was successfully built and launched in just eight weeks, delivering a deeper and more automated brand analysis while addressing user pain points effectively.
Identified a gap in the market
I analyzed four companies offering brand builder tools, focusing on Gingersauce, Brandpad, Brandfolder, and BrandKit by Typeface as the most comparable to what we aimed to build. Most tools lacked depth in areas typically found in a full brand guide, such as tone of voice or brand archetypes—Gingersauce being the only one to include archetypes.
Additionally, Gingersauce and BrandKit stood out for incorporating helpful guidance features, but none of the tools addressed brand compliance, highlighting a critical gap in the market.
gingersauce
www.gingersauce.co
Brandpad
www.brandpad.io
Brandfolder
www.brandfolder.com
BrandKit
www.typeface.ai
Built wireframes to gain alignment
I started by designing the initial layouts for the more intricate user flows, identifying areas that were overly complex or needed additional detail. During this stage, I conducted walkthroughs with engineering, product, and the CMO to ensure alignment across teams and address any potential roadblocks early on. This collaborative approach ensured our data collection on the back end was precise and that the tool's design supported both user needs and technical feasibility.
Established clean UI brand guidelines
To ensure the brand’s colors and imagery remained the focal point, I designed a clean and simple UI that avoided competing visual elements.
Streamlined decision-making
To minimize cognitive load, I kept each section of a flow straightforward, reducing the mental effort required to process information and preventing users from feeling overwhelmed. By incorporating a status bar, users could easily see the flow’s structure, understand their progress, and skip sections they didn’t need, streamlining decision-making.
The homescreen, shown below, allows users to start building their brand guide regardless of how much content they have.
The next screen highlights the Logo flow, demonstrating how an uploaded SVG logo is manipulated to showcase common misuse scenarios, enabling users to identify and select the options they need.
