Adolf Busch Award

What?

Redesigned the Adolf Busch Award website based on users’ pain points and feedback.

How?

Adobe XD
Adobe Photoshop
Google Drive
WordPress

Who?

UX Designer
UI Designer
Website Builder

Solo Project

Prototype

Problem:

Users have difficulty navigating through the Adolf Busch Award’s website in order to find relevant and necessary information, specifically the award’s application and its guidelines pages.

Solution:

Redesign the Adolf Busch Award’s website to become a more cohesive and accessible site for users to navigate to the application, eligibility and Award updates.

Site Analysis

After a series of user tests on the Adolf Busch Award’s website, users had clear pain points. Overall, users found that the site was text-heavy and inconsistent. The ‘Application Help’ and ‘Award Guidelines’ pages had paragraphs of content with no visual elements to break up the text.

On the ‘Board of Advisors’ page, image sizes and text alignment differed, and the ‘Application Help’ page had font inconsistencies.

Finally, users found the homepage empty with limited content to navigate through, besides the navigation bar, updates and footer.

Heuristic Evaluation

In addition to the user tests, I conducted a heuristic evaluation of the Adolf Busch Award site. Throughout the site, there was one main issue, which was text-heavy pages with a lack of interaction or visual aids, which violates usability heuristic #6: recognition rather than recall. Specifically, the ‘Board of Advisors’ page included every board bio listed with no particular order, with varying image sizes and no consistency with the location of the horizontal divider between each member. This page not only ignored heuristic #6, but also #4: consistency and standards, and #8: aesthetic and minimalist design.

The navigation bar layout was good. It followed usability heuristic #1: visibility of system status, by including an underline of where on the navigation bar the user is within the site, as well as the use of dropdown arrows to inform users that some menus have additional page options. The arrows also follow usability heuristic #7: flexibility and efficiency of use.

The footer was redundant of the navigation bar and ultimately useless with no additional information, other than the link to Facebook.

Redesign

The nav bar was already user friendly, so I kept its basic structure, including indication of where the user is on the site by highlighting that menu option and green, and retaining dropdown arrows to signal further options.

The footer was completely changed to make use of the empty space. I added the logo to the footer to keep the branding of the site, and kept the links to social media. On the other side, I embedded a call-to-action to sign up for the Award’s newsletter for those interested in staying up to date. Finally, I changed the menus on the bottom, so it wasn’t redundant of the nav bar. While ‘News’ and ‘Contact’ remained based on their importance to users, I changed ‘Home’ and ‘Apply’ to ‘About Us’ and ‘Eligibility’. Before users apply, they should understand why the Award was started and then, find out if they are eligible to apply at all.

The redesigned homepage was intended to follow a “Z” pattern “above the fold” of the screen to place the most important components in areas to catch the users’ eyes. By following the “Z”, the first thing the user sees is the Adolf Busch Award logo. This was intentional to help brand the Award and make it recognizable by its logo. The next point is the nav bar, specifically with the search icon at the furthest right point, so if users know what they are looking for, they can quickly search. The third point is a banner quick link to review eligibility. The Award receives numerous emails from potential applicants about whether or not they should bother applying, and having this quick link in an easy-to-spot position is beneficial to the users to get a quick answer, and to the Award to save time replying to emails. The final viewpoint is the banner quick link to “Read Updates,” so users have a quick access point to get recent news about the Award.

I combined the original ‘Who We Are’ and ‘About’ pages into the ‘What We Do’ page. This page is text-heavy, so I needed to make sure that I was breaking up the content with titles and including visual aids throughout. I broke up the first section into two: ‘Our Mission’ and ‘Our Outlook’. From there, I got into the biggest text section, which is ‘Why Adolf Busch?’. This section is accompanied by photos of the namesake, along with subtitles to follow-along with the text. Finally, the last section is ‘The Award’ followed by a YouTube clip of Adolf Busch and his legacy.

The ‘Board of Advisors’ page went through the biggest overhaul. First and foremost, the main page deleted the bios and only included pictures and brief overviews of the Board. The members were organized first hierarchically, with the founder in the first position, and then followed alphabetically for the remaining members. I also made sure to keep all of the photos the same size and shape throughout the page. When a user clicks on a member’s photo or name, it opens up a new page with the full bio of the desired member.

The ‘Past Recipients’ page is a very similar layout to the ‘Board of Advisors’ page. The winners are organized by the year in which they won. Within each year, if there is more than one recipient, it is organized by the amount of money received because some organizations received a first place prize of $10,000, a second place prize of $5,000, and some years a third place prize of $2,500 was awarded. Similar to the ‘Board of Advisors,’ when a user clicks on the logo or name of the organization, it opens up to a page with a description of their organization and why they were chosen to receive the Award, along with links to their social media accounts.

Eligibility’ was another text-heavy page, but this time there were no accompanying photos that made sense to go with the text. Instead, I included icons to represent the eligibility requirements. I added a blue section to separate the page visually.

The ‘Application Help’ page was likely the most overwhelming with its text-heavy content. Again, there were no clear visual indicators to accompany the text, so I opted to break up the content via dropdown sections, so that users can digest the criteria in chunks and not all at once.

Style Guide & Accessibility

Color

Cadet Blue was chosen from the Adolf Busch Award logo. The green color on the logo is #75984C, but it did not pass the WCAG 2.0 guidelines for contrast accessibility against a white background. Olive Green was chosen as a slightly darker version to the logo color. Eerie Black was taken from the website’s navigation and footer. Olive Green serves as the header colors, while Cadet Blue is used for buttons and toggles, where necessary. Eerie Black is the background color of the navigation menu and footer.

The secondary colors, Laurel Green, Cadet Gray and Silver are lighter versions of their primary colors, and they all passed the WCAG 2.0 guidelines for contrast accessibility against the Eerie Black background, so are used in the navigation menu and footer.

Font

Lora was chosen as the header font for its bridge between old and new. This shift between old and new is to signify modern takes on Adolf Busch’s legacy, made possible through the Award. While Lora takes style from calligraphy practices, its thin and minimalistic appearance give it a modern and contemporary flair.

Lato was chosen for the body copy as a sans-serif complement to Lora’s serifs. The letters are semi-rounded, giving warmth like Lora’s structure, but the sleek design of Lato provides a serious and stable tone. Further, as a sans-serif font, Lato is the most accessible font style for a screen. Lato was specifically created to be “legible and readable” to all users.

Feedback & Iterations

Map of Recipients

In the redesign portion of the project, I added an ‘Our Impact’ page, so that potential applicants can read on how the Award has continued Adolf Busch’s legacy.

The Award recognizes organizations worldwide, so the founder and members of the Board of Advisors thought it would be beneficial to include a map at the bottom of the ‘Our Impact’ page, so that potential applicants can recognize the Award’s reach.

Award Values

Instead of having the Award Focus adjacent to the Areas Not Funded section on the ‘Eligibility’ page, the founder and members of the Board of Advisors thought that it would make more sense to include the Award’s values in that section, so potential applicants can determine whether or not they are qualified and eligible to apply for the Award.

Final Prototype