The 100 Club of Chicago is an organization dedicated to providing financial support to the families of first responders who lose their lives in the line of duty. For their upcoming 50th anniversary, we were tasked with visually refreshing their web presence, and updating their look at feel to reflect modern web design. Our main challenge was to create a visual style that could be both modern and respectful.
KEY MOMENTS, CHALLENGES, AND SOLUTIONS
1. We learned that similar websites use three elements to their advantage: Sans serif fonts, empathetic imagery, and long-scrolling home pages. These elements are working, and we incorporated these elements into our mockups.
2. Through style tiles, I learned that I could create a visual language that is both modern and respectful by framing respectful content with modern, minimal design elements.
3. In my mockups, I reorganized the 100 Club's homepage to show more top level information in order to be more accessible for first-time visitors.
4. Certain web pages only had a few paragraphs of content on them so I designed a way to toggle between content on web pages. This combined pages that didn’t need to be separated without increasing the cognitive load on users.
And now, in a little more detail:
1. What is everyone else doing? Should we care?
After our kickoff meeting, we created a competitive visual analysis of ten different websites. Most of these sites were for philanthropy or charity. We wanted to see what was working, what wasn't working, and where we could fit in. To put it simply, almost all of these websites used the same three elements.
First, they used sans serif fonts to give it a friendly, modern design.
Second, they used large, full width images of people to build empathy with site visitors.
And lastly, they used long-scrolling home pages to give a broad top-level view of their identity.
All of these elements, though repetitive across a lot of websites, build empathy and create a welcoming interface for the user. In addition to that, users are used to seeing these trends.
But, do these trends matter? Yes. Not just because they're trends, but because the trends are working to create a good user experience. The 100 Club of Chicago's website was visually dated, and a mess to navigate through. The modern trends we found aid users in seeing top-level information about the respective organization, as well as welcome the user with empathetic imagery and modern fonts. And, because users are used to seeing websites with these elements, utilizing these elements would help users ease into new content. With these major elements in mind we were equipped to effectively re-frame the 100 Club of Chicago's reverent content.
2. So how do you modernize reverence?
We dedicated our first sprint to exploring and modernizing the look and feel of the 100 Club of Chicago's website. At our kickoff meeting, we received a list of brand adjectives that our client wanted to embody: Flat, sleek, minimal, modern, familial, reverent, hopeful, and timeless. With these, we split up and explored how we could bring these characteristics to life. Style tiles were our tool of choice, and we individually designed three divergent visual languages within the scope of these characteristics.
My first style tile was minimal and stark. I used primarily black and white with gold accents to achieve a minimal feel. I purposely left out other colors to create a certain distance with the user - one that would create a sense of reverence and quiet. On the other hand, I wanted imagery to elicit empathy and chose engaging images. In addition to that, I chose Proxima Nova, a sans-serif font, to modernize the style. This tension of reverent distance coupled with engaging photography and flat, modern elements helped me create a strong style.
My second style tile stuck closer to the original styling of the 100 Club of Chicago. I designed it to be modern and official. I used the 100 Club of Chicago's traditional colors of blue and gold, but modernized it by incorporating full-width images and flat UI elements. I also mixed a serif font with a sans-serif font in order to touch upon both the modern and official feel.
I designed my third style tile to be the most accessible of the three by calling out modern elements of web design, such as full width images and sans-serif fonts. This helped create a simple, easily accessible style. I also brought in different colors and would have used them as accents and for icons if this style tile was chosen.
At the end of this sprint, our client chose my first style tile for me to develop. I found that by framing reverent content with minimal UI elements, I could find the sweet spot between modernity and respectfulness. I enjoyed applying this visual language to my mockups, as it was my personal favorite of the three.
3. How can we make the homepage more accessible?
When I first arrived at the 100 Club's website, I was inundated by haphazardly used font sizes, weights and colors.
On the homepage, there are too many elements vying for the users' attention. Good UI should lead users and help them navigate through a page. But here, it's hard to know where to begin, where to go, or even know what you're supposed to be looking for.
So, when it came time to design initial webpages, I put extra effort into designing a home page that would address the problem of accessibility and serve as a more effective touch point for first time users.
With my visual competitive analysis in mind, I decided to design a long vertical page, use empathetic imagery, and use accent colors to create subtle but clear contrasts in the UI.
In terms of content, I broke important things to know about the 100 Club of Chicago into smaller, bite-sized pieces of information. I then placed them into their own sections going down the length of the page. I also gave each of these sections CTAs to enable users to drill down into more detailed information. By stringing information about the club down the page and allowing easy ways to dive deeper into the website, I created a way for first time users to have a more paced, less inundating, experience.
4. A better way to navigate between pages of content.
When browsing the old website, I noticed that certain pages only had a few paragraphs of content on them. I wanted to find a better way to navigate between this content.
When it came time to design these pages, I wanted to combine these pages without taking up a lot of vertical real estate. My solution was to design the top half of the page to house the overview of the programs, but the bottom half of the page as an area that can be toggled to display different content. I didn't want the user to jump from page to page, only to read a few paragraphs of content. With this, I created a way to keep users engaged on a single page.
This was received well, and I re-used this pattern to organize the fallen heroes page as well. Previously, when you got to the fallen heroes page, you had to select a decade, and then use a drop down menu to move between pages.
Instead of having to go through a main page and then use a drop down menu, I re-designed the page using my tabbed design. I wanted to engage users quickly with the content, and give them a smoother browsing experience.
5. In conclusion...
Working on this project was a joy. Having been a part of the boy scouts, and growing up around people who serve, I felt an emotional connection to what I was working on. With my designs, I really wanted to make way for users to have a more engaging experience when coming to the 100 Club of Chicago's website.
Through this process I learned how to keep the tension between modern and respectful, and find the sweet spot in the midst of that. I developed a personal process of designing style tiles where I could keep the big picture in mind. And, I got to flex my UX thinking muscles while designing a better way to browse through content.
Because the project was only two and a half weeks long, I was left with wanting to do more.
First, It would've been great to iterate on pages more (namely the events and sign-up pages).
Second, because there was no UX work to build off of, I would have liked to usability test with users to make sure the finished product is sound.
Lastly, with my knowledge of HTML and CSS, I would've liked to have coded my own living style guide and prototype, instead of writing a document and using InVision.
Thank you for taking the time to read about my experience working with the 100 Club of Chicago. Although these are just some of the key moments from the project, I would love to share more about my work, so please don't hesitate to contact me.