Echoes
2022 Apr - May
MFADT 2022 Thesis Event Website Design
[ Figma ]
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.
Role and Responsibilities
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.
Parsons MFA D+T Thesis Show 2022 Echoes Website/Graphics Team:
Visual: Ardak Mukanova
UI/UX: Nanwei Cai, Billy Ho
Interactive Sketches: Olivier Brueckner, Yuan Zhang
Development: Kunal Jain
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.
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 instructions / 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 & 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.
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.