Undergraduate Assistant | Black Communication and Technology Lab

Redesigning the BCaT website to strengthen brand recognition, usability and site performance

ROLE

Undergraduate Assistant

Brand development, visual design, user research

DURATION

Feb 2024 - May 2024

TEAM

Lab Directors

The TLDR;

PROBLEM

The Black Communication and Technology Lab— an organization for Black Studies, Digital Humanities, and more— lacked a functional, brand-driven website.

There were a lot of pain points that dampened the user experience: inaccessible text, information hidden within confusing sections, inconsistences in fonts, colors, and text sizes, and information overload. Not to mention, it lacked a connection to the brand as a whole.

How might we:

ensure consistency and findability throughout our website?

SOLUTION

A website redesign that focuses on enhancing functionality and brand-recognition!

In February 2024, I was hired and tasked with redesigning BCaT’s entire website and information architecture by May 2024. My redesign would focus on addressing usability heuristic issues and incorporating BCaT's brand throughout the site.

HOW?

Collaborating with lab directors, conducting a usability heuristic evaluation, and leading usability testing helped me pinpoint functional errors and find additional opportunities for improvement pre and post-launch.

SO WHAT?

My redesign increased user satisfaction and site performance, with site visits boosting by 70%.

We jumped from 1.7k site visits last year to ~2.4k site visits in less than a year to date! Within that same time frame, our page views boosted from 3.5k last year to 6.1k today.

Our site analytics as of October 24th, 2024

Discovery

What was wrong with the previous site design?

The old site design lacked consistency, simplicity, and a connection to the brand.

APPROACH #1

I conducted a website audit and heuristic evaluation.

I found numerous issues pertaining to the organization of information, readability, and overall accessibility of the site. I mapped these inconsistencies out and brought them to stakeholders for additional feedback and consensus.

I referenced the 10 Usability Heuristics for User Interface Design to pinpoint prominent issues with the previous site design.

APPROACH #2

I connected with three lab directors to discuss goals for the redesign

I used our meeting as a way to uncover the director's pain points and hopes for the site overhaul. After our discussion, we developed these 3 redesign goals that would be my north star:

REDESIGN GOALS

Branding and design should connect to the logo

We want to increase our brand recognition throughout the site and beyond

Simple navigation

We want to make it easier for users to find what they need

Clear language and CTAs

We want to mitigate any confusion about resource information

Let’s get to work!

Ideation

Setting the foundation for a rebrand

I created mood boards to visualize how BCaT's brand identity could expand

MOOD BOARD

With BCaT’s brand leaning towards bold and modern, I found sites with similar feels and noted how they ordered information and maintained consistency.

This also helped me figure out how to utilize brand colors throughout the site in a way that improved accessibility and clarity for our users.

The mood board I came up with and shared with stakeholders.

Reimagining the information architecture to increase findability

IMPROVING NAVIGATION

I created site maps in order to address the navigation issues and lack of clarity users have faced.

I brought the reimagined site map to the team to see if they had new content they were considering adding to the site.

Original:

There are confusing sections and some categorizations overlap, making it harder for users to find the resources they need.

We decided to rename the sections to enhance clarity and strengthen the connection to our user's mental models.

New:

We have clearer header navigations and groupings to increase discoverability and findability.

Develop

Wireframes and design considerations

Low fidelity wireframes

Navigating design challenges throughout the site

DESIGN CONSIDERATIONS

How can we reduce unnecessary blank space?

In the old redesign, we had large images alongside the event information that would make pages excessively long. Additionally, there was no way to filter through or see a summary of upcoming events beyond subscribing to our Google Calendar. This made finding future events time consuming and arduous.

The old events page.

In my iterations, I opted to explore different ways we could display the events so that we could address these usability issues.

01 Horizontal + Detail Oriented

02 Horizontal + Photo

03 2 Columns

Different iterations of the Events page — we chose option #1!

01. Horizontal + Detail Oriented

There's a good sequential flow of events

You can see multiple events on the page

The banner image is too large and takes up unnecessary space.

02. Horizontal + Event Graphic

Images bring more excitement to an event, giving a glimpse into what to expect

The new graphic proportions would require additional labor

We can't fit multiple events in one scroll

03. 2 Columns + Event Graphic

Can fit more events at a time than option 2

The new graphic proportions would require additional labor

Readability concerns

Option 1 was the easiest in terms of readability and it allowed for the user to view multiple events at a time.

DESIGN CONSIDERATIONS

How can we improve event findability?

The old site didn't have a filter or search capability which made it hard to sift through the month's events. In my iterations, I opted to include search capabilities at the top of the page.

However, after talking with the directors and testing technical constraints, we found that a calendar that listed the events at the top of the page would be succinct and clearer to users.

To make up for the lack of searchability on the page, I added a calendar to give an overview of the month's events.

Deliver

The new and improved Black Communication and Technology Lab!

After consulting with stakeholders, I was able to make some small refinements and finalize the designs! Introducing the BCaT redesign:

Redesign of the Home, About, FAQ, Projects, Resources, Media and Library pages

FEEDBACK

All of the directors were satisfied with the site enhancements!

After doing incremental check-ins and handoffs, the directors were fully on board with the site redesign and felt like it developed BCaT's brand to the next level.

TRANSFERRING TO HOST SITE

Since the organization hosts their site on Squarespace, I had to transfer my designs from Figma.

Due to technical constraints, some of the final designs had to be modified to accommodate Squarespace's capabilities.

!

Want to see the current site? Click here!

Next Steps

What's on the roadmap for next semester?

Doing further user testing to improve consistency, usability, and improve SEO

FALL 2024

In September 2024, we conducted 2 usability tests with coordinators from our partner— the DISCO Network! October and November will be spent addressing the feedback we received.

We uncovered pivotal opportunities to bridge consistencies between the two organizations in terms of tone and site layout. Stay tuned for the upcoming site changes and iterations :)

PREVIOUS

PREVIOUS

NEXT

NEXT

like what you see? let’s grow something impactful together!

Or we can chat about which music you’re into, whatever works.

Designed with matcha and love

©️ Roshida Herelle 2024

like what you see? let’s grow something impactful together!

Or we can chat about which music you’re into, whatever works.

Designed with matcha and love

©️ Roshida Herelle 2024

like what you see? let’s grow something impactful together!

Or we can chat about which music you’re into, whatever works.

Designed with matcha and love

©️ Roshida Herelle 2024

like what you see? let’s grow something impactful together!

Or we can chat about which music you’re into, whatever works.

Designed with matcha and love

©️ Roshida Herelle 2024

FOR

Black Communication and Technology Lab

ROLE

Undergraduate Assistant

DURATION

Feb 2024 - May 2024

FOR

Black Communication and Technology Lab

ROLE

Undergraduate Assistant

DURATION

Feb 2024 - May 2024