Home


Mirror Archive


ROLE        Full Stack Engineer, Technical UX Design
DATE        2021
CLIENT    UCLA Arts & Architecture (via Color Coded Los Angeles)
                  Sponsored by Getty Foundation Pacific Standard Time, 
                  National Endowment for the Arts.

A public archive documenting artists who create work with software and for the internet.




The Challenge

Color coded was hired by UCLA to build a robust and scalable participatory web archive. We were responsible for full-stack development of the registration, submission, moderation and display. We had three audiences that we had to keep in mind for usability: contributing artists, visiting art enthusiasts, and moderating archivists.

VISITOR FLOW
  1. Visit curated collections
  2. Explore directory of artists with filters and search.
  3. Nominate an artist or yourself

CONTRIBUTOR FLOW
  1. Create a profille. (Profiles include artist information in addition to a number of their works.
    Each of their works can include a number of images.)
  2. Preview the profile with submitted information.
  3. Submit profile for Moderation.

MODERATOR FLOW
  1. Invite creators from nominations to send the nominee an email to create a profile.
  2. Review submitted profiles and works can be reviewed and approved to be made public.
  3. Curate specific artists or works can into collections.



UX Design Features
The amount of information needed for a creator profile was large. We iterated on UX features to help creators fill the form at their own pace and have the information they needed to make sure their submission felt like it represnted them. To this end we prioritized giving contributors flexibility in how they prepare, edit, preview, and save progress along the way. 

  • Responsive design adapts to device sizes.
  • WCAG guidelines for accessibility.
  • Modular Form Navigation grouped into tabbed sections 
  • Input validation and word limit countdowns.
  • Auto-saving when inputs change.
  • File upload and preview.
  • Smart Location drop down lists
  • Editable Preview to quickly jump around to make final edits. 

Tech Stack
  • React for front end rendering
  • Magic Link for logging in and profile tracking
  • Strapi for CMS, moderation and custom api 
  • Render for deployment