Blueboard
·
2022–2023
An accessibility-first rebrand and an immersive Webflow site that made Blueboard fully WCAG compliant.
Branding
Web design
Paid media
Videography
The Gist
In December 2022, I led the experiential overhaul of Blueboard's website, with a focus on creating a web experience just as impactful as a Blueboard experience. This was a new deep dive into Webflow animations and interactions, while building new coding skills with an emphasis on animation scripts.
Previously, in March 2022, Blueboard launched a new web experience that brought a brand refresh focused on accessibility and highlighting the recipient experience. As Senior Designer, I led the creation of new brand guidelines, developed high-fidelity mockups and prototypes of the website for the Design team, managed ongoing analytics monitoring and reporting, and completed the build with Webflow.
The Impact
Launching in January 2023, the new approach on Blueboard.com provides users with a clear journey through Blueboard's mission and impact. Leading with a mobile first approach, we strived to make the experiences just as smile-inducing on your phone as on the big screen.
Transforming over 50 pages, Blueboard saw overall site speed and performance increases and achieved full WCAG compliance. A 70% increase in Blueboard recipient-submitted photos is proudly showcased throughout hero and body images, and the team saw increases in time on page while seeing a slight decrease in bounce rate. All of these updates were paired with comprehensive company-wide training on the new brand guidelines and usage.
Client
Blueboard
Role
Art Director & Designer
In-house
Brand designer, Web designer, Webflow developer
Year
2022–2023
Tools
Figma, Webflow, Adobe CC, HubSpot, Google Analytics, WCAG
50+
pages transformed
70%
more recipient-submitted photos on site
WCAG
full compliance achieved
(01)
The Research
Built an understanding of WCAG Accessibility Guidelines, their implications, and where to start.
Explored alternative color schemes and tested their impact on previously inaccessible elements.
Audited the previous web design system to identify non-compliant elements, global areas of opportunity, and determined an actionable plan of action.
Accessibility audit of the previous brand and web system
(02)
The Pitch
Delivered a pitch to the Founders and Sr. Director of Marketing for approval to relaunch the Brand Guidelines and redesign the website.
Introduced new colors, textures, digital design system, and a slew of accessibility optimizations.
Left the Founders with an interactive website prototype to get a feel for the new design system (and a due date for feedback).
The pitch deck presented to the Founders
(03)
The Build
Created fresh brand guidelines with focus around accessibility considerations, more detailed guidelines for design element applications, and the introduction of new colors, textures, and best practices.
Built off of the Figma prototype to develop the new website experience including focus states, image alt-text, and lots of accessibility attributes.
Learned new capabilities and techniques to enable a more engaging user experience.
Building the new design system in Figma and Webflow
(04)
Bringing the Recipient Experience to Life
One of the new brand elements introduced in 2022 was the Afterglow texture. Glowing in the hero of each page, a subtle animated glow of the brand colors brings to life the concept of Afterglow, which Blueboard tags as those warm and fuzzy feelings you have looking back on an epic adventure.
Another way we brought the recipient experience to the forefront was by reimagining the hero sections to include up to nine recipient-submitted images on each page. Not only did this change increase the number of recipient images on the site by 70%, but it also ensured text remained accessible on all screen sizes.
Check it out live at Blueboard.com.
Recipient imagery leading every hero
Mobile-first layouts
(05)
Motion and Magic
In efforts to create an immersive homepage experience, I dove into the world of Webflow custom JavaScript and interaction animations. This scrollable journey brings users through the experience of Blueboard as they move down the page, with elements of surprise and delight along the way.
The new Blueboard.com homepage
Scroll-driven homepage interactions
(06)
Bring on the Video
With a rockstar Videographer on the team pumping out killer video content, we wanted to bring it to life through the site with Platform GIFs, recipient interviews, and marketing hype reels to keep users engaged and educated.
Platform GIFs and video woven through the site
Mobile pages across the new site
(07)
Fresh Guidelines
Alongside the new web experience, we launched a fresh edition of the Brand Guidelines including new brand elements and more actionable guides to maintain accessibility standards across all branded collateral.
Below are a few other ways we brought the new guidelines to life through digital ads, social media, eBooks, original research, and more.
The refreshed Brand Guidelines
Original research and eBooks
Promoting the research across paid and organic
Packaging
More work
Truepic
·
2024
Truepic Website Redesign
Positioning a media-authenticity leader alongside Adobe and Microsoft with a new design system and site.
Design system
Web design
Webflow build
Aidaly
·
2023
Aidaly Rebrand + Web Redesign
Relaunching Aidaly around family caregivers with accessible brand guidelines and a new web experience.
Branding
Web design
Blueboard
·
2023
Employee Appreciation Hub
An eCard engine that grew Employee Appreciation Day submissions 138% year over year.
Product design
Web design
Campaign