Redesign NYU Help Website


Interactive Telecommunications Program/Interactive Media Arts Program (ITP/IMA) Help Website offers program resources and floor information for all students and faculty in the ITP and IMA programs at NYU's Tisch School of the Arts.

My Role

Business to consumer industry, accessibility enhancement, Product Designer

User Research, Information Architecture, Usability Testing, Accessibility Notation, Interface Design, Prototyping


Time

Oct 2023 - Present

Team

2 Supervisors
1 Project Manager
2 UX Designer
1 Developer

Tools

Figma, Google Analytics, Whimsical, Notion, Pen & Paper






CONTEXT


Project Overview
In October 2023, we started to redesign the NYU ITP/IMA Help Page as volunteer project. ITP/IMA Help Website offers program resources and floor information for all students and faculty in the ITP and IMA programs at NYU's Tisch School of the Arts.

After pitching our redesign proposal in December, we have turned this volunteer project into a on-campus position for further improvements and implementations. 

Currently, we are pitching to multiple stakeholders for feedbacks on future implementations and negotiating with key stakeholders to align visions and expectations for project success. 








CONTEXT

What is our goal?

Our goal is to address accessibility concerns on the existing website, and improve the overall user experience so that students can access resource information conveniently.

Project supervised by Scott, Lenin and the NYU Digital Accessibility team.
My Role
As a Product Designer, I led the interface design process and established a design system that proposes a more efficient workflow.

During the UX Research process, I conducted user research with my teammates, designed and tested the prototypes to optimize the user experience and ensure seamless integration with existing platforms.






CONTEXT

Solution Overview
We developed a new information architecture and enhanced the search function based on our research, optimized the user flow and applied them to the website along with a new visual design.



Previous Version
Redesigned Version





CONTEXT


Project Timeline








RESEARCH

Identifying Problems
01.
What problems do people have for the current website?


We sent out questionnaires using google forms to collect users feedback for current website. This method gives us a general overview of problems that users might have.

02.
What are our users’ exact needs?


We want to dive into their daily scenario, therefore, we chose to conduct the in-depth interview to find out the pain-points.

03.
What is a good help page design?


We analyzed 26 public access help pages encompassing search engines, collaborative digital platforms, and higher education institutions to uncover the best practices and areas for improvement.




RESEARCH  OVERVIEW



01
RESEARCH BREAKDOWN

Quantitative Research - 44 Questionnaire responses

In the questionnaire, we ask questions regarding the user's preferences for device selection, frequency of use, and opinions on the current design and features. More importantly, gathering general feedback on which sections of the page are used most will help us prioritize small sections in future redesign.

Here are the summarized results from the questionnaire:



75%

Users often navigates the site through the “Search” function.
.

63.7%

Users think the visual design can be improved.

52.3%

Users find it difficult to locate desired information.

86.4%

Users access the page through Laptops.


Sample questions we asked:






Summarized Insights learned from the Questionnaire:
01.
Search Feature Enhancement


Enhance the functionality and visibility of the ‘Search’ feature.
02.
Information Hierarchy Redesign


Reorganize the IA and prioritize sections based on questionnaire results.
03.
Visual design Improvement


Redesign the visual of the whole website and align with NYU color system 







02
RESEARCH BREAKDOWN

Qualitative Research - 20 User Interviews

In summary, we interviewed various stakeholders to identify their specific needs. We asked detailed questions related to the search function and the current information architecture to receive in-depth feedbacks from the users.


11

students

Students are the main user who navigate through the help website for resources .
.

4

Administrators

Every administrator updates their own content to the website themselves.

3

Residents

Residents work in different labs and introduce the lab to student on the website.

2

Faculties
Faculties link the resources and information from the website to their syllabus.







Summarized Design Actions based on our interview notes:

Enhance Information Hierarchy


01. Information Architecture
There are a lot of repetitive sub-tabs under each section. The side menu is cluttered with too many links, making the navigation complex and difficult to use.

02. Layout and Hierarchy
The current layout design making it difficult for users to discern the importance and organization of content.

Improve
User Experience


03. Visual Designs
The help page layout is attractive and not user-friendly. 



04. Terminology Issues
The terminology of sections is not accurate.
Enrich
Functionality


05. Search Bar
Students find it challenging to access the search bar.



06. Resources
For first year students, it would be helpful to have a better designed floor map.







RESEARCH SYNTHESIS


Define Problems 
Based on our research insights, we used the HMW statement to help us clarify our direction and actions. 
We have two HMW statements as they focused on different directions.

01. How might we optimize the ITP/IMA help page to  improve users' information navigation efficiency and quickly get what they want?

02. How might we  enhance the accessibility in design to ensure inclusivity for all users?



UX DESIGN: INFORMATION ARCHITECTURE


Enhance Information Hierarchy
We reorganized the new Information Architecture, removed repetitive sub-tabs, and rephrased the terminology used for different sections to ensure clarity and efficiency for users.


Current Information Architecture

New Information Architecture




UX DESIGN: ACCESSIBILITY NOTATION


Digital Accessibility Approach
Our design focus

With guidance from Jodi Arlyn Goldberg, we redesigned with a focus on accessibility. 6 major accessibility issues were being identified through the consultation with the NYU digital accessibility team. To address the current accessibility issues, we delved into the problems themselves to find a coordinated solution.

(mentioning the tool we used Wave)

NYU web accessibility policy

NYU has adopted the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) 2.0, Level AA as its standard for digital accessibility.


Accessibility Issues

Missing alt text





Embedded links in the header


Color contrast problem





Pdfs should be accessible pdfs

Heading rank problem





Tab order should match the visual order









DESIGN PROCESS


Design and Validation


We created different types of wireframes and conducted a small scale usability testing to validate the most efficient user flow, after we selected our wireframes, I led the interface design process and established a design system that proposes a more efficient workflow. 



DESIGN PROCESS

Wireframes

We reached out to 10 interviewees from the user interview process. 
Then, we conducted usability testing in-person to observe how our users interacted with the working low-fidelity prototypes.

After the usability testing, we decided to choose option 1 because it presents all the information efficiently in one place, and the length of the website is the shortest, which helps the users navigate quickly compared to the other two options.



  Option 1  




Option 2

Option 3





Design Systems

I created the design systems to align with other NYU Tisch websites. The font and color choices mainly follow the NYU design system, and the format is learned from Microsoft Teams UI.






DESIGN DELIVERABLES


Final Design deliverables
In December, our team pitched this redesign proposal to our product manager Scott, the pitch is very successful, and we turned this volunteer project into a on-campus position for further improvements and implementations.




DESIGN DELIVERABLES

Final Design Overview