B612 Foundation Website Redesign

Goal: Redesign key pages of their website

Constraints: Working around best practices and client needs

Role: Lead User Experience Designer

Tools: Sketch

UX Deliverables: wireframes

Timeline: 3 weeks

 

Background

The B612 Foundation is a non-profit organization that is dedicated to protecting Earth from asteroid impacts. As farfetched as that sounds, the company itself is doing some really cool things and is backed by the likes of Google, the California Academy of Sciences, and Microsoft. The goal of this design sprint was to take their website from an out-of-the-box Wordpress website to a fully-customized and beautiful website that would educate visitors and entice them to donate. 

The old B612 landing page.

 

Process

The key screens I had to design were the home page, team page, and donate page. I began with some research about the needs of our client and an expert review of their current website. We held a stakeholder interview to learn more about our clients' goals and uncover any insights that would help us during our design phase. Next, we performed an expert review of their website and took note of all places of improvement. Since this was a very short sprint, we used these two things, along with weekly check-ins, to inform our design moving forward.

Through our stakeholder interview we found that our clients' primary goals for the home page were to encourage visitors to donate, talk about their history, display any recent news or resources, and add testimonials from some of their members. I used these insights to get started on the home page. I started by sketching and playing around with the placement of these items in a modular layout, assigning each goal a section within the landing page. Next, I simplified the navigation bar to only include certain items based off of our expert review. We found that the current website didn't have a consistent interaction pattern among the different navigation items. Some you could click, others you couldn't, and others could only be accessed through the sub-navigation items. This influenced our decision to:

  • combine all the Team Pages into one page,
  • combine the Blog and Resources pages,
  • combine the Sentinel Mission and About Us pages,
  • add prominence to the Donate call-to-action
  • add a Search bar for users to quickly find articles recommended from the B612 team

Various wireframes exploring different layouts for the home page.

The next page I worked on was the team page. This page was important to the team because if someone contributed time, money, or effort, the B612 team wanted to recognize them. The groups that comprised the B612 team were broken out onto different pages, which were accessed via the "Our Team" drop down navigation item.

The different drop down items that you can choose from to view the team members. The "Our Team" navigation item did not navigate to any page.

I wanted to group and simplify content as much as possible, so I decided to explore how we could access the entire team on one page by designing a sorting mechanism that a user could use to select a specific group they wanted to see. Once a user clicked on a sorting group, the team members within that group would display.

In the previous design, if a user wanted to learn more about a specific team member, they would have to click on their photo, and they would be taken away to a different profile page for that user. I didn't want the users to lose sight of the other team members or have them perform unnecessary clicks, so I thought about using a lightbox to display more information.

Final Team Page Design

Final Team Page Design

The last page I had to focus on was the Donation page. This page enabled the user to make a donation to B612 to support their programs. The different donation methods were broken out onto different pages, which were accessed via the "Donate" drop down navigation item. Other non-profits made it really simple to donate and we wanted to bring that to our users as well.

How a user used to have to decide how they wanted to donate. Confusing and complicated!

To make it easier for users to choose which method to use to donate, I decided to combine the methods onto one page and allow the user to select their method of choice from there. This allows the user to easily decide among the different methods of donation fairly quickly. 

Online Donation.png
Final Donation Page Design

Final Donation Page Design

 

Results

Our clients were really pleased with the final results. The website is currently live at B612foundation.org.