Web Design, Video Editing

Empathy Bytes

ROLE

Web Designer & Video Editor

Team Members

Julian Nogal, Amara Williams, Mackenzie Thies, & many more

YEAR

2023-2025

Project description

Empathy Bytes VIP explores how multimedia and emerging technologies can enhance empathy and understanding as we create digital scholarship. This VIP section looks to document the stories of diverse communities in Georgia and beyond. The team explores how technology can enhance empathy, as well as improve access to resources. Most importantly, we ask how these advanced technologies allow us to understand new perspectives, solve problems, or simply be a better person in a world full of daily challenges.

Responsibilities

Contributed to the redesign and implementation of the website using HTML, CSS, and JavaScript, enhancing visual appeal and user experience. Conducted interviews, captured video footage, and edited content to promote the Empathy Bytes VIP

Website Design + Implementation

Background

The original Empathy Bytes website was created primarily to present basic information. The content was hardcoded, resulting in inconsistent branding and limited flexibility. Our goal was to implement modular, readable code to improve maintainability, introduce responsive design for mobile accessibility, and update the visual identity to better align with the Empathy Bytes brand.

Style Guide

The original colors of the website were grey with blue accents. We felt this didn’t align with the Empathy Bytes brand, especially since the logo itself didn’t include grey. We decided to choose colors from our logo and incorporate our school colors, which eventually led us to create a cohesive style guide.

Designs

I was in charge of the experience pages on our website, and here are the design iterations.

Implementation

To include dynamic sizing, we decided to use React Grid components to make our code more responsive. This allowed us to create a more fluid structure that is responsive across different screen sizes. By doing so, we addressed one of the key limitations of the original Empathy Bytes website, which relied heavily on hardcoded content. Our updated approach focuses on modular, readable code that’s easier to maintain, while also improving mobile accessibility.