Echoes
Echoes is a collection of works and events that showcase students’ thesis projects and celebrate the end of the year events for MFA Design and Technology graduating class of 2022 at Parsons School of Design. Working together with developers and other student workers, we successfully lauched a thesis show website and hosted various events including pop-up exhibition show, screening and performance show, symposium and publication.
Check out the thesis show website. ︎︎︎
Check out the thesis show website. ︎︎︎
UX/UI Design, Web Design, Branding & Visual Design
Figma
2022
Figma
2022
My Contribution
I worked on multiple design teams including the website team and the promotion team. I helped building the information architecture, wireframes and prototypes for the responsive website design, and supported promotion and outreach efforts including the creation of event posters, registration portal page, social media promotions, performance playbills and guest invitations, etc.
I worked on multiple design teams including the website team and the promotion team. I helped building the information architecture, wireframes and prototypes for the responsive website design, and supported promotion and outreach efforts including the creation of event posters, registration portal page, social media promotions, performance playbills and guest invitations, etc.
Overview
Echoes website is created to showcase students’ thesis projects, and provide information to our end of the year events including pop-up exhibition show, publication, symposium, screening & performance events. People can find all the information and registration portals to the events through our website. The web and visual design team worked 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.
Dark Mode
Light Mode
Goals and Challenges
We were working under a 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. 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.
Aside from the website, we also needed to produce all the visual contents needed for the entire event to support promotion and outreach effort. 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.
Aside from the website, we also needed to produce all the visual contents needed for the entire event to support promotion and outreach effort. 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.
Concept Development
01. Why Echoes?
For our 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.
02. Design Process
The design and branding of the theme, led and mainly created by Ardak Mukanova, started 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.
Information Architecture
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.
Style Guide
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.
![]()
Prototype
01. landing Page
02. Projects Page
03. Events Page
04. Publication Page
05. People (Student List) Page
06. Individual Project Page
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 Deliverables
LANDING PAGE
EVENTS AND PUBLICATIONS
PROJECTS AND PEOPLE
PROJECT PAGE
Promotion & Outreach
Promotion & Outreach
I also helped creating all the visual materials needed for the events 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.
Thesis Show Main Posters
Individual Event Posters
Screening & Performance Playbill
