_

Thesis Archive | Lead Designer

_
Client:
ITP at NYU
_
Role:
Lead Designer
_
Collaborators:
Themis García, Sue Roh, Lenin Compres
_
Date & Timeline:
2022, 2 months 

_
Skills:
Design Systems
Branding
UX/UI 
Wireframes 
Figma Prototype
_
Tools:
Figma
Illustrator

Project overview

For every graduating cohort, NYU’s ITP program redesigns their graduate students thesis archive. I was the design lead for the 2022 redesign.

Problem statement

Previous ITP thesis archive websites were confusing to navigate. Some of the key problems were: users had to minimize screens before finding student work, thesis advisor’s names were hard to find and the website was not accessible to those with low vision.

Project goals

1. Create a website that makes student-work the immediate focal point
2. Simplify navigation
3. Increase accessibility for those with low vision
4. Advisor’s names should be easy to find

Design Process

1. Understand project goals 
2. Create a design system 
3. Create low fidelity wireframes for each design direction
4. Get feedback
5. Update wireframes 
6. Design branding 
7. Create high fidelity wireframes & click-through prototype

Understanding the goals

Our team started off the design process by having a conversation with stakeholders to understand the goals of the redesign. After understanding the goals, our team had a meeting to come up with a timeline and better understand who would own each part of the project.

Creating a design system

I first focused broadly and came up with a design system that united thesis projects by category (ex: machine learning, installation art, music) using a color-coding system. I chose a color palette that is bright, bold and joyful to celebrate students’ important achievement in finishing their thesis projects.

Creating low fidelity wireframes

My first design direction used project thumbnails as the key focal point inspired by books laid out on a surface

My second design direction made the color-coding the focal point for each project and was inspired by filing cabinet folders.

Getting feedback

After talking to my collaborators, we decided that option two was a better overall direction, but the team liked having the images as the focal point.

Updating the wireframes

I redesigned the layout with this feedback in mind and split the page vertically so that I could include a large project thumbnail on the right hand column as users hover over projects in the left hand scroll column. The project order is randomized so that projects have equal chances of being listed first.

Creating the branding

After we had landed on our layout, I came up with branding for the website which included a logo in a typeface that I designed called Chip as well as header and body copy in Hiragino Maru Gothic Pro and uses a pale cream color as the background and the accent colors for the color-coding system.

Creating high fidelity wireframes

I created high fidelity wireframes which includes place-holder project information and images to share with my team. Additionally, I created the black and white version for increased accessibility. 

Making a click-through prototype

The Result

The result of this redesign project is a joyful website  with an intuitive navigation system and easily accessible project information.

Next steps

If I had more time to work on this project I would conduct usability testing using the click-through prototype. The most important questions would be:

1. Is there anything confusing about how to move between projects?
2. Are you able to navigate to a specific project that you want to see?
3. Are you able to navigate to a specific category that you want to see?
4. Is the black and white version of the website suitable for someone with low vision?

Additionally, I would want to create a mobile version of the archive.