Bricks
Branding / Art Direction / Marketing / Product / UI/UX / Web Design | 2024-Present
Bricks is a San Francisco based start-up building AI tools in spreadsheets, databases, dashboards and more. As the creative lead on the team, I led brand direction across marketing creative and product. As of present day, Bricks average 600-800 new sign ups per day.
Website Design
Prior to Bricks' official go-to-market launch in late 2024, Bricks' had an existing website that was in-use for a period of time. The existing design was vibrant with unique designs but lacked cohesiveness across the site. Important information was hard to distinguish & best SEO practices wasn't implemented.
Lo-fi Experiments:
I experimented with different branding & website designs ranging from similar to our existing product design system to a complete revamp (this would also mean rebranding the product for consistency).
Disruptive, adventurous, outside-the-box
Existing product design system, in-line with other industry competitors
Selected design:
After narrowing down the design style, I mocked up a high-fidelity prototype based on a wireframe. I evolved the layout to optimize for conversions (i.e. moving "Unleash your team's creative potential..." section further below the fold as it didn't contain relevant information for new leads)
Wireframe:
High-fidelity prototype:
While running the prototype through small-scale usability testing, we discovered some key insights:
😀 Layout and wireframe is cleaner, centre-aligned homepage hero is preferred for a cleaner layout + more flexibility to grab attention. Left-right layout is better for landing pages as you can get all the information at once in the hero
😀 Rather than having a static hero image, a concise homepage video / motion graphic is preferred to give a first touch product overview
😀 Seeing actual product artifacts in the "Create visuals..." section prompted more click-throughs and longer engagement
🙁 Most participants did not like animations/complex graphics as it slowed down loading time and made it harder to find necessary information
🙁 Users found having email sign-up in the homepage redundant as the onboarding flow has it after clicking main sign-up CTA
Branding Design System:
After fine-tuning the website design, I mapped out a style guide for logo, colour, typography/fonts, iconography and styles
Homepage Video:
A short product overview of what Bricks' is (first touch point for new leads)
Final Iterations:
Desktop:
Landing Page Template:
.png)
Mobile:
Product Design
One of my projects involved designing "Bricks" - interactive, drag-and-drop visual modules like product roadmaps, calendars, kanban boards, and more. Users can combine these bricks to construct a visual Board that dynamically connects with their data. This data is also stored in the Grid section of the product, offering an all-in-one data management solution. Any updates made to the data in the Grid instantly reflect in the Board, creating a real-time experience.
Problem:
Although Bricks' offer competitive features and AI functionality, users are unable to discover these tools as it's unclear they are drag-and-drop modules intended to build a visual board. It is also unclear the modules are linked to data in real-time.
Goal:
Increase product adoption of Bricks modules by using a consistent design system that showcases functionality, while also showing features (i.e. updating in real-time, customization to different use cases)
Design audit:
-
Comparing product modules against best design principles
-
Testing responsiveness and adaptability of the product
-
Identifying user pain points and opportunity areas for product solution
User Research:
The team was able to conduct 1:1 user interviews over video call to gather the most common use cases and product feedback. From those interviews, I was able to summarize these main archetypes and pain points:
Brand Persona #1 - Avid Excel User
Brand Persona #2 - Canva Expert
Pain Points:
-
Not understanding "Brick" modules are different from existing templates as they are in the same side bar (different tab). Inconsistent category names
-
Difficulty customizing heavily designed modules to own use cases
UX Flow:
Prior to designing the modules, I mapped out the discovery user journey. Users are able to build Bricks via the Grid or Board as first touch points. The Board flow is the optimal path with the least friction and potential to bounce out of product. It's evident the visual of the modules is important to ensure users "Choose a Brick" & move to the next step.
Final Iteration:
Design System:
To maintain visual consistency, I expanded our existing design system to accommodate these modules. This evolution standardized multiple elements to avoid confusion with new users and emphasize customizability by showing default styling.
Solution:
From prior user research and design auditing, it was clear the feature is missed due to inconsistent design styles and confusion between modules & templates. Users were also not aware of the customizability of the module as existing modules had varied designs.
To rectify this, I established the same design system and styling across the new modules. Each module had a "default state" users began with and the ability to then customize as they see fit. Modules were also designed with responsiveness to data in mind, ensuring designed components could easily scale when data on the Grid is modified (i.e. not using gradients or intricate shapes).
