Back to projects

UX Design · Web App

SODAA Alumni Map

An interactive map that shows the alumni network of NDSU SoDAA.

Role
UX Designer and Developer
Timeline
2020 · 8 weeks
Tools
HTML/CSS/JS, MapBox, Firebase Real Time Database, Bootstrap
Team
Solo
SODAA Alumni Map cover

The director of NDSU School of Design, Architecture, and Art, initiated the idea of alumni map, building an interactive map that displays the school’s alumni network. When I received this work request, I noticed a bigger pain point. Previously, they updated the list of alumni manually on the website. The information is often outdated because it was hard to track everyone’s information over time. So, rather than just creating a map page, I created a content management system that allows the alumni to create an account and manage their location and profile by themselves. The information will be updated on the map automatically.

My goal in this project is to create a configurable content management system that can be used for any geological-related information, not just a static design for the fixed content. So, I optimized the coding and database so that it could be easily configured for different purposes. Later, the system has been implemented for five other projects of other organizations, such as American Craft Council, SoDAA Advisory Board, and NCBDS 38 Conference.

Video walkthrough

See the alumni map in action.

Published app

Explore the live alumni map.

The live map demonstrates the alumni profile and location system described in the case study.

Open map

UI Design

SODAA Alumni Map screen 1
SODAA Alumni Map mobile mockups
SODAA Alumni Map handheld phone mockup
SODAA Alumni Map screen 2
SODAA Alumni Map screen 3

Outcome

The content management system allows alumni to create an account and manage their location and profile by themselves. The information updates on the map automatically. It was successful, and people loved it.

Visit the Map