Storytelling Spaces of Solidarity in the Asian Diaspora

We designed, developed, and launched SSSAD’s website which archives interviews, convenings, and stories from Asian diaspora designers and leaders. I advised on best practices, created mockups and design options, and custom coded html, CSS, JavaScript, and python.

Overview

Storytelling Spaces of Solidarity in the Asian Diaspora (SSSAD) is an initiative that engages Asian diasporic designers and leaders in learning, building, and practicing intra- and inter-community solidarity. Their website acts as an archive of oral history interviews, convenings, and stories.

Problem space

SSSAD maintains an ongoing digital archive on its website, containing long transcripts of interviews conducted with various Asian diasporic designers and leaders. As an archival project dealing with long transcripts, we encountered challenges in cataloging, engagement, and user flows.

My role: Interaction Designer

As the interaction designer and UX developer, while working closely with Tonia Sing Chi, I designed and custom coded features such as mouseover annotations, progress read bars, nested menus, automated python scripts, mobile compatibility, and more.

Tools

Figma, Miro, HTML, CSS, Python, & JavaScript

Timeline

September 2023 - January 2024

<html>

Mobile friendly content using grids
Nested menus on desktop navagation bar
Promoted action with pinned "Take the SSSAD Survey"

{css}

Consistent style, layout, visual effects, and branding
Custom highlighted-text background color
Mouseover annotations
Progress read bars

.js

Pinned anchor tags that brings you back to the top of the page with a single click

SSSAD’s transcript page in desktop view.

.py

Automated script that turns Microsoft Word transcripts into formatted html website content

What's next?

Next steps, recommendations, and reflections

Season 1 of this project consists of 15 transcripts that will be processed and uploaded. We'd love this archive to be easily accessible and searchable. The next steps would include usability testing to boost engagement, implementation of a search bar and metadata tags, and a nested menu bar in mobile.