Echoes

MFADT 2022 Thesis Event Website Design

 

Overview

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.

Take a look ↗︎

 

  • Responsive Web Design
  • 2022.04 -2022.05
  • Parsons Design & Tech Thesis Show
  • Team:

    UI/UX: Nanwei Cai, Billy Ho

    Interactive Sketches: Olivier Brueckner, Yuan Zhang

    Visual: Ardak Mukanova

    Development: Kunal Jain

     

    My Contributions

    As a UXUI designer in the team, I collaborated with other thesis event committee members across the design process from decision-making to design execution. My main contributions and responsibilities are:

    • Responsive web design

    • Collaboration with the web developer and the thesis event committee

    • Project submission instruction and WordPress pages management

     
     

    Result Quickview

     

    Goals and Constrains

     
     

    The clock was ticking, we needed to create a high-fidelity and executable design for development within a tight timeframe (2 weeks).

    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 committee to acquire information about the thesis events and promptly communicated with the web developer to ensure the design landed as expected.

    Info Architecture

    This website serves as a showcase of thesis students’ works, which can be accessed through either the Students list or Projects list, with additional pages showing information about on-site and other online events. The Publication page functions as a separate page for the thesis publications, which is a text-based medium hosting volunteered student essays.

    Info Architecture drafted in Miro

    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 Instructions

    We delivered a set of three step-by-step pdf manuals and three videos as submission instructions to help students upload their posts on WordPress. It provides flexibility for individual revisions and customizations and also ensures consistency across the posts.

    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 & Menu

     

    Publication

    Projects

    Project post page

     

    Events

     

    People

     

    Yes, we also have a light mode :D

    Learnings

    1. Never too late to test the design and ask for feedbacks!
      Even with limited resources and time, simply showing the working prototypes or demos to users would be beneficial for design decisions.


    1. Communicate in a proactive and comprehensible manner.
      Always consider the “usability” of the design not only for users but also for collaborators. Dissect the design with simple diagrams for developers’ better comprehension.