University of Michigan Black Alumni Website Improvement Project

‍

Introduction

Client: University of Michigan Black Alumni (UMBA)

Team: Ben Kozlowski, Nida Hameed, Judy Ng

Timeline: October 2020-December 2020

Problem Statement: UMBA's website struggled with usability, engaging users, and relevance to the audience

Description of what our team accomplished:

The three of us volunteered for a university program where we could help local clients with information needs.
From late October to December, we held regular meetings with our client.
We then utilized UMBA's mailchimp and google analytics info to understand how people were accessing their site.
Following that, we performed an insight analysis to understand how similar organizations designed their website.
After all these measures, we took to Figma and created wireframes and a prototype of their new website.

Research

Data Insights

First, our team analyzed the website's Google Analytics in order to learn more about their users. From the analysis, we presented recommendations in a slide deck report to the client.

A Few of Our Key Findings

Most users start off on the homepage, but 55.4% drop-off and don’t navigate through the rest of the site.
Most sessions only last 0-10 secs.
67.9% of visitors use desktop

The decrease in engagement is most likely due to the pandemic. The main activities on the site, such as looking up events or purchasing tickets, are no longer occurring.

Recommendations for Next Steps

Designing a homepage that is more interactive that will draw the user to other portions of the site
Designing a more interactive site that is frequently updated to draw more returning users
Analyzing why some pages are not visited as frequently and see how they can be improved.

Insight Analysis Report

We also submitted an insight analysis report to the client. Our team analyzed seven other Black Alumni websites to generate recommendations for the potential design and interactive features of the UMBA website. It was helpful to see how similar organizations structured their content. I worked on researching the calendar and store pages of other Black Alumni websites.

Recommendations for Next Steps

Homepage:

Include dynamic content and pictures
Do not overload page with lots of text
Make it interactive with different elements

Donation Page:

Make it clean and minimal without lots of text
Design a simple form that lets users know where they are in the form at each step

Calendar:

Stick to displaying key events instead of a whole calendar
Allow users to download events directly to their calendar for ease of use
Ensure that the information is concise

Store (eCommerce):

Create a store that cleanly displays merchandise for special occasions such as anniversaries or bigger events.`
Design an eCommerce system that users would trust using their cards on

Design

Below are the redesigned medium-fidelity wireframes for the main features of UMBA’s website. This is the first iteration. The wireframes that my team and I worked on and presented to the client can also be viewed in the Figma link here. To view the prototype, click the button below.

‍

View Prototype

‍‍‍

1. Home‍

Click on the images for them to appear larger and to find out more about the shop.

Our client wanted to add a shop to the website for UMBA’s 45th anniversary. Because this was a new feature, our team designed it from scratch. Our insight analysis, where we looked at the eCommerce section of other black alumni websites, inspired this design.
‍
Our goal was to create a clear user flow where the user knew where they were in each step. We also wanted users to be able to easily fix mistakes, so under the review page, the user can easily edit their item selection by clicking "Edit" and making the changes in an overlay window without navigating away from the current window. Also, when checking out, a summary of the visitor’s purchases is displayed to the right of the page; this helps reduce the user's cognitive load on their working memory since they can read the summary instead of trying to remember the items that they previously selected.

6. Donate

The donate page is another new feature we added for the redesign. During COVID, many of UMBA’s past fundraising efforts have been stalled. We designed a donate button and used principles related to fitts’ law. We wanted the donate button to stand out from other pages, so we inverted the color scheme for that color. We made it so the user wouldn’t have to travel a long distance to click the button.
‍
Our team created buttons with suggested donation amounts because that can be less taxing than having to recall an amount to donate and then typing that amount. If a visitor routinely donates to the website, they can easily locate the amount of money they want to donate by recognizing the yellow highlighted donation button.

7. Header

Before

The past header’s information architecture was confusing. It was unclear which pages (e.g. about, membership) had sub-pages, it was difficult to learn about joining the organization, and the contact page first linked to social media ideas, rather than how to contact the organization.

After

In our redesign, we added two sections, “Shop” and “News.” and a call to action “Donate” button that encourages site visitors to donate to UMBA. We simplified the “Contact” page, making it only link to contact information.

8. Footer

Before

Before, the footer was not up to current design standards. There was a section only for board members in the footer. This is problematic because the majority of intended site users are not on the board of the organization. The old footer was also way larger than common practice

After

Big Ideas

In our design, we:

Redesigned information architecture

We updated the navigation bar and its subpages, and condensed information to make for a smoother user experience.

Improved typography.

Before the site had difficult-to-read, uppercase text in many places. The site also packed too much information on a page. We standardized the fonts and broke up content.

Redesigned the site’s new functionalities

There was a lot of uncharted territory that came with this redesign. We used inspiration from other sites and explored new ideas to create a donate, news, and store section.

Modernized the aesthetic

We updated logos, added more images, improved grouping, and followed recent design standards, in order to make a more aesthetic, digestible site.

Improved communication methods

Creating a more understandable contact page and updating our header makes reaching out to the organization easier

Next Steps

The 2021 winter project team is currently working on responding to client feedback, making adjustments, and developing the website! The project should be completed by the end of April.

University of Michigan Black Alumni Website Improvement Project

‍

Introduction

Research

Data Insights

A Few of Our Key Findings

Recommendations for Next Steps

Insight Analysis Report

Recommendations for Next Steps

Design

View Prototype

1. Home‍

2. News Section

3. Events Section

4. Contact Page

5. Shop

6. Donate

7. Header

8. Footer

Big Ideas

In our design, we: