By: Drew Hagni, Designer/Front-End Developer on FlagsOfValorSTL.com
I’ve been designing and developing websites for about 10 years now, building online experiences for interesting brands and organizations across multiple industries and categories. Even so, I can only count on one hand the number of sites that have felt truly important.
Flags of Valor is one of those sites.
There’s no more noble pursuit than honoring those who have given their lives to defend our freedom as well as those who died in the 9/11 attacks. It’s humbling. It’s also unnerving.
We sat down and talked with Rick Randall and the team about the event. We looked through photography. We listened to stories. We could tell this was less an initiative and more a personal calling. (I’m not ashamed to admit that watching the full documentary—seeing the impact of the memorial and how much it meant to these families—had me choked up.)
Finding inspiration would not be a challenge.
Figuring out where to start would be the hard part.
So, we decided to start where we thought users would want to–with the photos. There was no shortage of powerful photography from multiple sources. We sifted. We marked favorites. We found ourselves speechless on more than one occasion. Instinctively, we knew these had to be featured prominently throughout the website.
We utilized galleries and large images in nearly every section. We also cut together a background video using several clips from the documentary to display in the “hero” area of the homepage.
As part of the assignment, our team developed a new identity for the 2021 event, complete with clean, versatile logo variations, color selections and typography. The site was designed to incorporate those elements as integral pieces of the experience.
A strict grid was followed for all page layouts, often emphasized with thin lines and measured spacing, evocative of military patches and ‘Old Glory’ herself. Refined details throughout the site allowed us to keep the event and its sense of reverence at the forefront.
We knew that visitors to the site would vary widely, from young kids to grandparents, so we spent time simplifying the sitemap as much as possible. Intuitive navigation with clear indications for each path helped foster a user-friendly environment. We also knew that the majority of users would be engaging with the site from their phones, so as we created, we kept readability and ease-of-navigation at the forefront.
Desktop users, however, do benefit from additional scroll animation features to further relay the tone of the event on a larger screen.
Lastly, one of the most important components of the project was the Flag Sponsorship donation form. User experience is always paramount. But when it comes to interaction-heavy elements like filling out a form or processing a payment, the margin for error becomes razor thin. We took extra care to implement a smooth, easy-to-use system where users can donate with just a few clicks without ever leaving the site. Payments are authenticated and secured off-site by a third-party gateway, removing any privacy concerns and friction during the transaction process.
We needed a robust, secure site that was also flexible enough to handle new and evolving content (like, say, a blog post from the developer). Each page in the back-end was built using custom modules that allow for changes in the copy or media assets but are not so open-ended that layouts or design elements are at risk of breaking or appearing inconsistent from screen to screen. Blog posts allow for custom layout arrangements and the Partners section of the footer is completely customizable allowing for partner logo additions with an easy-to-use, back-end interface.
Which brings me to a fitting segue–if you or your organization would like to sponsor a flag or become a partner in putting on this incredible event, please do. I hope you’ll find the online experience seamless. I’m sure you’ll find the act of supporting Flags of Valor rewarding.
I know I did.
Drew Hagni is Darling Brand Makery’s in-house web developer and designer. He enjoys working with clients to build websites that are equal parts beautiful and intuitive. To learn more about this project and some insights behind our collaboration with Flags of Valor, check out our blog.
