Black World

Providing a voice on campus for the Black and Hispanic community of Stony Brook University

Tools

Figma

Canva

Zoom

Asana

Responsibilities

Competitor Analysis

Wireframing: Paper & Digital

Prototyping

Roles

UX Research

UX Designer

UI Designer

Team

Praneetha Mullapudi

Kenneth Hargrove

Imani Adapoe

Ashani Escoffery

Here's the Problem

Black World is a media publication club affiliated with a university that aims to empower and amplify the voices of the Black and Hispanic community on campus. Despite its founding in 1974, the organization has experienced a period of inactivity for over a year, necessitating the rebranding of its website to align with the club's renewed vision and better serve its audience. The challenge lies in creating an engaging and accessible website that reflects the club's commitment to diversity and inclusion while addressing the needs of its community.

What's the goal?

The primary objective of the Black World website redesign is to foster a sense of community among its audience while prioritizing organization, simplicity, and accessibility. The design should be intuitive and user-friendly, making it easy for visitors to navigate and find the content they need, while also providing opportunities for feedback and interaction with the club.

Research findings

As part of the redesign process, we aimed to gather valuable insights from the Black World website's regular users to address the site's primary usability and content challenges. Our research objective was to identify the information needs, preferences, and expectations of students visiting a university website to inform our design decisions. Specifically, we sought to understand:

The primary motivations for visiting the club website.
The typical user behaviors and patterns on the website.
Any pain points or usability issues that users encountered during their browsing experience.

By gathering this information, we aimed to create a more user-centered design that meets the needs and expectations of its target audience while providing an engaging and seamless experience.

Competitive Analysis

To enhance the Black World website, it was necessary to first explore comparable products available in the market.

We studied two competitors, Liberty Student Activities Blog and NYU Events, which are blogs run by students. Our analysis aims to assess important user experience aspects by pointing out good and bad practices found on their websites.

Discoveries and suggestions

Click to view full Competitive Analysis

Eliminating repetitive content
Creating an interactive event calendar
Categorizing and segmenting events and activities
Implementing an inline search with suggestions based on user input
Reducing content to prevent long scrolling
Providing a quick view of ongoing playlists or podcasts

Talking to students

We had a blast chatting with three active club members to better understand their busy lives and how they interact with the website. Here are some juicy insights we uncovered:

Students are juggling multiple extracurriculars and activities on top of their classwork, so it's tough to keep up with the club's happenings.
Black World's navigation menu was a bit overwhelming, so we decided to streamline it to prevent information overload and clutter for our users' sake.
We discovered that members are eager to get involved with the club, so we made sure to feature a clear call-to-action on the website that's easy to find. Now, joining the club is as easy as pie!

Here are the insights

Through various user research methods such as usability testing, user interviews, and user surveys, we were able to identify the primary usability and content issues encountered by users in the original website design. This analysis informed our integration of these insights into the new website design.

The spotlight confused me

It's hard to read and format for pictures when uploading content

Wish they had longer article previews or a blurb about what's in the article

I didn't know if the articles were in chronological order

I have ADHD so the layout can be overwhelming. I want to click on everything and if I wanted to find something I would go to the search bar[can't find search bar right away]

Couldn't find the search bar right away

Layout

Not that mobile friendly and doesn't like the color scheme

Hard to pinpoint where to look first on the site. Somethings are bigger than others, some have no pics, the different sizes call attention to too many places

Student check out the site when things they do are referenced

Didn't know about the website until I saw asu fashion show[african student union fashion show, super popular event across black community on campus] and then went to check it out to see my own fashion shows reviews

Issues encountered with the original website of Black World

What users want to see

If they had a tiktok I would've kept up with that.

Content

Would be nice to show their music playlist and feature articles on the size

Content/Layout

Dates are the first thing you see and they are not in chronological order and that can be confusing. Decide if the dates matter or not.

Would like to see current events information, events, schedules, meetings. Wants to see meeting dates for the gbms on the website.

You can archive content by year or by club member to help with categorization.

Layout

For the photos, would like a section that has a picture of the shows and if you click on pics it'll hyperlink you to the articles. Feature article carousel.

Content/Layout

Having polls based on convos in the podcast. Could asqs on the podcast and have a section for student opinion on your podcasts. Interact with your audience.

Content

Could be helpful to organize the site content by cohorts. You can split it up by dates to see the archive according to how club membership changes.

Layout

Having an event calendar prominently displayed would be good so we can see what's going on. Including events for other clubs too would be helpful to see who's doing what

Content

It would be cool to let people know how they could get involved too

Content

What users like

Posting content more frequently would make me visit the site more. More short and sweet stories

You can spotlight features for each cohort, or things in general you want to showcase should always be first thing

I like seeign the names of the authors of the articles

Structured like a blog so the format makes it easy to scroll on mobile

I like the topics on the website art, music, events on campus

I like the design and color scheme

likes that you can view spotlight, can scroll down which is easy to navigate

Fresh perspectives acquired through conducting interviews

Our user personas

Understanding User Journey

Using research obtained from website users, we created a user journey map that demonstrates the common actions a typical student would take when navigating through the website.

User Journey mapping

In order to enhance the user navigation experience, we created a sitemap to arrange all our web pages systematically.

Legend

Primary Navigation

Secondary Navigation

Content

Sitemap

Our approach

Existing BlackWorld website

Homepage

Spotlight

About

Paper sketches

Emphasize the spotlight search feature to facilitate easy access to the latest articles and media on all pages.

A dynamic calendar is located on the homepage to display significant and forthcoming events. This enables users to promptly view event dates, times, and locations.

Stay informed about the latest social media updates and events through the announcements section.

The purpose of adding secondary navigation is to enhance the user's ability to navigate more easily when browsing a particular webpage.

We designed active and inactive states for the top navigation menu to indicate to users which page they are currently viewing.

To facilitate navigation through lengthy pages with multiple sections, we included an in-page secondary navigation on each page.

To highlight the university's location and enable easy access, a link to view the location is provided in the footer for a quick view.

The social media links located in the footer facilitate quick access and encourage social media activity and engagement.

The Archives section provides a convenient way to locate past articles and media.

Design system

Creating a design system that accurately represents the brand vision was essential in order to capture the essence of Blackworld through a redesign.

Style guide

Logo variations

Final Designs

Lessons learned

Reflecting on our design project, I am pleased with the great job that my team and I did in completing the initial version of the final designs. During our brief, we identified some key areas for improvement, such as the appropriate amount of white space around certain components and ensuring that they are designed to scale with the overall frame size. Being mindful of these design elements will undoubtedly help us to produce even better results in our next project. We acknowledge the significance of incorporating a greater amount of our user research findings into the final design, as we believe it will lead to an even more successful outcome. Although incorporating our user research findings into the final design was not a significant challenge during the project, we are confident that we can further improve in this area going forward.