Echoes

2022 Design & Technology Thesis Web & Branding Design

Time
2022.03 - 2022.05

Team
@Parsons School of Design
@Design and Technology
2022 Design Committee

Type
UX/UI
Branding & Visual

Overview

Echoes is the Design and Technology (DT) class of 2022 thesis show mainly run by students at Parsons MFA DT. It is a celebration of the efforts of the class of 2022. Student design teams work together to design and launched ECHOES website for showcasing students’ thesis projects, displaying information and registration portal of the final end of the year events including pop-up exhibition show, publication, symposium, screening & performance events. Design team leading by myself completed the design materials needed for event promotion.

Check Echoes Website

Location
New York, NY

My Role

  • I participated in multiple teams and work with different design teams, my work includes:
  • I helped building the website information architecture and user flow, wireframing and prototype;
  • I lead the promotional and outreach team to design all the event branding materials including posters, playbill, Instagram post design, etc.
  • I managed and operated our parson DT social media accounts to promote events for the thesis show.

Goal & Challange

We had a very tight schedule, the whole thesis show was prepared and launched within two months. Design committee needed to accomplish the website from conceptual design to a complete hi-fidelity design, and then handed over to development team for website development.

The promotional & outreach team I led also needed to produce all the visual contents needed for the entire event. We were also responsible for contacting and inviting some industry professionals, and continuously promoting the event on social media started from two weeks before the show.

Design Quick Review

Responsive Website
Branding & Promotion

Design Content

Web Design

ECHOES website is for students’ thesis projects showcase, and the information of our final end of the year events including pop-up exhibition show, publication, symposium, screening & performance events. People can find all the information and register to the events they want to participate through our website. The web and visual design team work together to build the website from scratch. Our design process includes brainstorming concept, building user flow, prototyping visual aesthetics, wireframing, iterating and fidelity mock-ups.

Why Echoes?

For our annual thesis show event at 2022, the thesis committee came up with the concept of ECHOES to represent diversity, creativity and vibrant energy happening with our program. ECHOES can be defined as a close parallel or repetition of an idea, feeling, style, or event.  We want to show how we, as artists and designers, continue to brainstorm, iterate, explore and inventing new answers to the problems that we discuss all the time.

How we approached the design

In previous years, DT has designed and created separate websites to showcase student work, event information, etc. For example, Parallel in 2021 and Hindsight in 2020. We improved and built a new website by studying the structure of the previous websites and combining it with the needs of the new year's event. For example, the websites of 2021 DT thesis online event Parallel, and the 2020 event Hindsight are our major references. We integrated the new branding visual design into the new website mockup to create our class of 2022 digital space.

Moodboard

The design and aesthetic style, mainly build by Ardak Mukanova, starting from a repetitive ripple pattern that resonates with our theme of Echoes. This represents the vibrant energy of our design and the spirit of repetitive experimentation and iterate. We chose two theme colors, one light and one dark. Our website also uses these two colors as the base color, so that users can have an interactive experience.

User Flow

Unlike last year's online thesis show, the 2022 thesis event will be held offline. Our events include offline pop-up shows and performances where students present their work, online symposiums for thesis project research to be presented and discussed, the publication of student works, etc. In addition to individual pages for each student's work, our website unites all of this information and the registrations links for participating in the events. We build the information architecture based on all the needs.

Prototype & Iteration Process

Based on our user flow, we created several versions of the website design. In this section I will use the user flow - how users can navigate from the main page to the individual student page, as an example to show our design progress. I have also put our working document link at the end of the section to see the complete web design.

- How do the users navigate from the main page to individual student project?
- What should we include in the pages?
- What are the final looks with our visual elements?
Review production document

Design Guidence

Review component & style guide

User Test

When the website first got transferred from design to the actual page, the web team sent the version to all the thesis show workers for play and test and build a bug sheet to collect all the errors that need to be fixed/improved. We communicate with the team from group messgae, and we have a discord channel for the department to better work and sread infoemation.

Design Delivery

Website Launch

- Desktop present -
- Mobile present -

 Promotion & Outreach

Leading the promotional and Outreach team, I directed and designed all the visual materials needed for the event including physical show and online promotions. Our design includes different events posters, Instagram posts materials of event information and student projects showcase, performance event playbill for audience, guest invitations, etc. We used some of the design components from the visual team to align the design with the visuals style of the website。

Individual Event Poster
Performance Playbill
Main Posters

Social Media Promotion

The promotion team created different sets of materials to promote our thesis show event and student works. We used the same visual style and built the info posts in both dark and light version. We also post thesis works from students who would like to share them on instagram story so our audience can have a peak about the show.

IG Story of Event information
IG Story of Student Work

Posts promoting Echoes and Student Thesis Projects
Check our work @parsons_dt @mfadt

Thesis Show Committee

This show is mainly built by student workers with the help of leading faculties. It could not happen without hard work of every participated workers especially during Covid era.

BRANDING / VISUAL
Lead: Ardak Mukanova
Yuqing Liang, Iz Nettere

WEBSITE
UI/UX: Nanwei Cai, Billy Ho
Interactive Sketches:
Olivier Brueckner, Yuan Zhang
Design: Ardak Mukanova
Development: Kunal Jain
Faculty: Richard The, Xin Xin

EXHIBITION
Lead: Sara Kobayashi, Wesley Chau
Cecile Roca Morla, Emilio Lari, Shivanjali
Verma, Wenjun Li, Minghui Ju
Faculty: Colleen Macklin,
Clarinda Mac Low

PUBLICATION
Editors: Yuen Hoang, Jessica Jabre
Layout: Ardak Mukanova
Faculty: Ayodamola Okunseide, Harpreet Sareen, Anna Harsanyi

PROMOTION
Lead: Sarita Sun
Aldora Wang, Yujing Shi, Jiayue Gou
Faculty: Katherine Moriwaki

SYMPOSIUM
Organizers: Yuen Hoang,
Ken Chen, Livia Foldes
Layout: Ardak Mukanova, Yuen Hoang
Faculty: John Sharp

PERFORMANCE
Lead: Whitt Sellers
Bowen Li, Xintong Wang,
Lu Jia, Ziyan Cai
Faculty: Kyle Li