Refreshing Firstbase's Homepage for User Clarity & Accessibility
Comprehensive refresh to modernize design and ensure inclusivity for all users.
USER INTERFACE
USER EXPERIENCE
CONTENT STRATEGY
WEB DESIGN
Accessibility & Responsiveness
PROJECT OVERVIEW
As a Senior Designer at Firstbase, I took the lead on enhancing our homepage. My focus was on updating its look and feel and creating a comprehensive design system for our marketing team to follow. A key priority was to improve the website's accessibility, ensuring it provides an inclusive experience for all users.
ROLE
Senior Designer
TOOLS
Figma, Miro, Asana, Webflow
CHALLENGE
The Firstbase website had three main issues: poor responsiveness with unnecessary padding at certain breakpoints, a lack of consistent design, and an outdated representation of the brand's evolving identity.
TYPOGRAPHY & THEIR PAIRINGS
In refining typography, I built upon the existing font family, experimenting with diverse spacings, sizes, and weights to clearly define a visual hierarchy among headings, subheadings, and body text. This process included meticulously adjusting elements like eyebrows, headings, and body copy to ensure their font size, weight, line height, and color harmonized, effectively eliminating any potential visual clash across different sections of the website.
Ultimately, I developed six distinct headings and their variants, differentiated by font weights, along with guidelines for the body copy. I also crafted documentation outlining the type pairings and their specific applications, such as designating headings 5 and 6 for eyebrows or labels, with the recommendation to pair these with headings 1 through 3. This was to avoid pairing with heading 4, whose size closely matches the last two headings, potentially disrupting the visual hierarchy.
BREAKPOINTS, LET'S HOPE THEY DON'T BREAK!
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.
In shaping the design, I adopted a standard spacing range of 8-24px for most components to ensure visual balance, with flexibility for broader spacings in special scenarios to delineate webpage sections clearly. I also defined six breakpoints across devices—mobile, tablet, and desktop—to standardize the creation of web assets. This grid-based approach secures consistent margins and column structures, harmonizing the overall website aesthetic and enhancing user navigation.
BUTTONS & THEIR VARIANT
Building on the foundation of breakpoints, my focus shifted to refining button designs, categorizing them by size and the background context—light or dark. Mirroring the approach taken with typography, buttons were designed with a default style complemented by a range of variants, allowing for adaptability to the occasion or context. This strategy aimed to maintain design consistency and coherence, while providing the necessary flexibility to tailor to diverse design scenarios effectively.
ITERATIONS & DESIGN EXPLORATIONS
After establishing foundational design principles including typographic pairings, color schemes, button styles, and spacing guidelines. The subsequent focus was on enhancing brand consistency alongside a few layouts for the homepage. The challenge often isn't about rebranding entirely but evolving the brand to be more adaptable. Below are just a few of many layouts for one section designed for the homepage.
BENEFITS
Designed to clearly highlight service perks, ensuring immediate user recognition and appreciation.
USE CASES
Tailored to depict real-life applications, offering insights into the practical value of our solutions.
CASE STUDIES
Structured to showcase success stories, building credibility through relatable, proven outcomes.
HERO LAYOUTS
Crafted to captivate visitors, setting the tone with impactful visuals and compelling messaging
This phase was integral in gently guiding the brand's evolution, ensuring that each module remained adaptable for future updates and content shifts.
ROUND 2 & REFINMENTS
With the foundational elements in place, my attention shifted to refining specific sections of the homepage. This phase involved experimenting with visual graphics, particularly deliberating the extent of stylization needed for product screens. After several iterations, a cohesive look emerged, guiding the final phase of layout polishing to achieve a polished and visually coherent homepage.
RESULTS & IMPACT
A key lesson for designers, further highlighted by this project, is the understanding that the perfect homepage or module doesn't exist. The exploration of various module designs underscored the importance of feasibility discussions. Questions about developer implementation efficiency and compatibility with the Webflow ecosystem were central. Often, layouts I preferred weren't practical for the team, illustrating the value of collaboration. Engaging with an external freelance developer influenced our design decisions significantly, ensuring choices were both feasible and aligned with best practices.
HEADING & COPY GUIDELANDS
Established text standards for uniformity and clarity across all content.
COLOR PALETTE
Set color rules to ensure high contrast and harmony, enhancing visual accessibility.
BREAKPOINT SPACING
Defined spacing rules for each viewport, ensuring consistency and responsiveness.
BUTTOM OPTIONS
Developed button styles with clear inactive and interactive states for better usability.
