Refreshing Firstbase's Formfill Pages for Ease of Use & Accessibility
Comprehensive refresh to modernize design and ensure inclusivity for all users.
PROJECT OVERVIEW
At Firstbase, my role as Senior Designer involved refreshing our demo and form fill pages, with the aim of developing a flexible template for Webflow's editor mode. By establishing clear guidelines, such as character limits, we ensured the template was easy for our team to use. Notably, this template was also tailored for event sign-up pages, enhancing its versatility and ensuring a consistent, user-friendly experience across these key areas.
ROLE
Senior Designer
TOOLS
Figma, Miro, Asana, Webflow
CHALLENGE
The original demo page lacked clear guidelines, causing uncertainty around character limits for the marketing team. They also needed to include detailed benefit descriptions, especially for events, without extending page length. Furthermore, the marketing team requested a refresh of the visual design language to better align with Firstbase's evolving brand and update the page's outdated aesthetics.
INITIAL CONCEPTS
The project kicked off with an initial focus on setting foundational design guidelines, mirroring the approach taken with the homepage refresh. This involved defining typographic pairings, selecting a cohesive color palette, standardizing button designs, and determining appropriate spacing to ensure visual harmony and consistency across the site. The aim was to reinforce Firstbase's brand identity through these elements.
REFINEMENTS & THEIR GUIDELINES
I recognized that each element required a specific amount of space or white space around it, with the exact spacing varying depending on the element. By establishing clear spacing rules, I significantly saved time and moved closer to achieving harmonious consistency across the designs. Setting these spacing guidelines ensured that the visual creations not only looked polished but also maintained a cohesive and professional appearance.
FORM PARAMETERS
During the form fill design, discussions emerged around introducing a dark mode option. Additionally, I aimed to empower the marketing team with flexibility in form styling, offering choices between a white or blue 200 background. Significant effort was dedicated to refining the spacing between form sections, ensuring a consistent and seamless user experience across both mobile and desktop viewports.
CONTENT STYLING
When working on the demo page, it was important to let the team know how much text could fit in each section and to check in with them about character limits. Good design comes from talking with the team you're working with, which helps decide how things will look. For example, we limited the benefits heading to 31 characters to keep it simple, so users can quickly understand the benefit and then read more about it in that section if interested. This back-and-forth with the team helped shape where and how we placed information.
This phase was integral in gently guiding the brand's evolution, ensuring that each module remained adaptable for future updates and content shifts.
LOGO DISPLAY
The goal was clear: to build a repository of pre-sized logos. I started by guiding the team and creators of form or event pages on logo requirements, ensuring initial adjustments by the design team for a consistent look. Eventually, this repository would allow for straightforward logo selection without further design adjustments.
KEY TAKEAWAY
Effective communication is central to design, with empathy playing a crucial role in understanding and addressing the team's challenges, whether it's asset creation or form design. While meetings may seem to detract from design time, they often provide essential clarity and direction, guiding the development of products or assets to meet the team's needs.