Role: UX/UI Designer
Industry: AI, Business, Productivity
Toolkit: Figma, FigJam
Test Project Prototype
Jump To Section
What is BN
An AI-driven advertising agency
Products:
BN Influencer
BN Audience
BN Ads
Founded in 2007, acquired by Augeo in 2023
What is BN?
Our Product
Our Product
Migrating outdated ad pages from Google Sheets to an internal website
Integrates seamlessly into the client’s website, enabling a smooth transition
Adding more filters and enhanced visuals for metric insights
Design Process
Visual Appeal
Current tool lacks BN’s branding and clear, visually appealing layout to show to clients.
Data Accuracy & Visualization
Ease in tracking different KPIs and how CPO shifts budget and provides clear representations to both users and clients.
Clarity in Inputs
Clear identification of which elements require input vs which are optional or not interactive.
Design Process
Research & Focus
Fall 2024 Cohort
CodeLab Davis | codelabdavis.com
Design Process
Mid-fi & Client Feedback
Fall 2024 Cohort
CodeLab Davis | codelabdavis.com
Clear distinctions between initiatives, collections, and channels
In-depth key metric tracking
Filtering for success vs error on logging
My Solution
Design Challenges
Our Solution
Log
Provides a comprehensive record of past budget optimizations for troubleshooting and review.
Focused on helping users identify errors and understand budget shifts.
Prioritizes usability over detailed data analysis.
Design Challenges
Challenge #1
Understanding the client’s problems, and the goals of the solutions
Challenge #2
Having an established line of communication
Challenge #3
Lack of user feedback due to time constraints
Visual Appeal
Current tool lacks BN’s branding and clear, visually appealing layout to show to clients.
Data Accuracy & Visualization
Ease in tracking different KPIs and how CPO shifts budget and provides clear representations to both users and clients.
Clarity in Inputs
Clear identification of which elements require input vs which are optional or not interactive.
Design Process
Research & Focus
Design System
Background
Main Font
Color
Grayed Font
Color
Segment Button
Active
Container
Background
Container
Background
Lines/dividers, button stroke
Normal Button Text Size (14)
Table Headers Size (13 Semibold)
Table Body Size (13)
Nav Header Unclicked Tab Text Size (14 Medium)
Nav Header Clicked Tab Text Size (14 Semibold)
Page Header (24 SemiBold)
Subheader (20 Semibold)
Color Palette
Navigation
Filter
Buttons
Title (48 Bold)
Key Takeaways & Next Steps
Key Takeaways
Asking the right questions – Understanding the real problem upfront made all the difference.
Pre-planning user flows – Mapping out interactions first led to a more intuitive experience.
Direct feedback from the BN team – Staying aligned with their needs ensured our solutions were effective.
Next Steps
Focus on refining discovery processes to identify deeper user needs.
Strengthen team coordination & structured feedback loops for smoother collaboration.
Prioritize user testing earlier to validate decisions more efficiently.
