Case - echoes — chooseimage

Interaction Designer
Creative Technologist

I make fun stuffs with and about computers.

Current: Building Queer Map Taiwan with SpOnAcT.xyz
Previous: Senior Creative Technologist at OUTFRONT Media

WORKS: SELECTED All

PROJECT

Echoes

Go to Live -Website

INFO

2022.04 - 2022.05

MFADT 2022 Thesis Event Website Design

CLIENT

Parsons MFADT

TEAM

Billy Ho
Nanwei Cai

Context

ECHOES is a celebration of the efforts of Design Technology's class of 2022, quietly reverberating through our collective imagination. ECHOES website showcases nearly
100 projects from emerging artists, designers, coders, makers, hackers, educators and thinkers, standing as evidence of resilience and innovation.

As a member of UX team, I was in charge of the following tasks:

Responsive website design.
Collaboration with the web developer and the thesis event committee.
Student project submission instruction materials, WordPress pages management.

Our Team:

Visual: Ardak Mukanova
UI/UX: Nanwei Cai, Billy Ho
Interactive Sketches: Olivier Brueckner, Yuan Zhang
Development: Kunal Jain

Goals and Constrains

Work within a tight timeframe (2 weeks), create a high-fidelity and executable prototype for the web developer.

Parties involved with the scope of our work include program students, event committee, web developer, and the general public.

I worked closely with the event committe iterating upon new contents, communicating with the web developer ensuring the design landed as expected.

On the submission side, I created student project submission manuals in pdf and walkthrough videos. Minimizing the content errors hosting more than 100 users.

Information Architecture

The whole website serves as a showcase of student participant’s works, which can be accessed through either the student list or project list. With additional pages showing informations regarding on-site events. The publication page functions as a separated page for the thesis publications, which is a text-based medium hosting volunteered student essays.

Collaboration

Working asynchronously with our web developer, we have set up a bug list with prioritization and actively communicated through Figma comments for Q&As and fast iterations.

Project submission instruction manual

Working with a WordPress backend, our workflow allows Echoes participants to submit their own works. It provides flexibility for individual revisions and customizations and also ensures consistency across the posts.

Materials including a set of 3 step-by-step pdfs and 3 videos.

Design Deliverables

UI Kit

Maintaining a component library throughout the wireframing process allows us to iterate the design efficiently and consistently within the design team. It also helps expedite the development progress.

Landing Page and Menu

Publication

Projects

TakeAways

Always test out the implementations and ask for feedbacks.
No matter how tight the deadline is, always allocate time for feedbacks in any shape or form, the development of ECHOES has benefited from multiple informal internal feedbacks, allowing the whole team to move fast with confident.

Identify all users/steakholders across project’s lifecycle.
Always consider the “usability” of the design not only for end users but also for collaborators. Dissect the design with simple diagrams for developers’ better comprehension. Try to catch errors as early in the process as possible with thought out instructions for collaborators.

Reach out for a coffee chat

chooseimage0125@gmail.com

github

Taipei, TW