Redesign NYU Help Website
Business to consumer industry, accessibility enhancement, Product Designer
User Research, Information Architecture, Usability Testing, Accessibility Notation, Interface Design, Prototyping
Oct 2023 - Present
2 Supervisors
1 Project Manager
2 UX Designer
1 Developer
Figma, Google Analytics, Whimsical, Notion, Pen & Paper
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.
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.
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.
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.
Project Timeline
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.
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.
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.
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.
01
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:
Search Feature Enhancement
Enhance the functionality and visibility of the ‘Search’ feature.
Information Hierarchy Redesign
Reorganize the IA and prioritize sections based on questionnaire results.
Visual design Improvement
Redesign the visual of the whole website and align with NYU color system
02
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
studentsStudents are the main user who navigate through the help website for resources .
.
4
AdministratorsEvery administrator updates their own content to the website themselves.
3
ResidentsResidents work in different labs and introduce the lab to student on the website.
2
FacultiesFaculties 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
The help page layout is attractive and not user-friendly. 03. Visual Designs
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.
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?
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
Digital Accessibility Approach
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 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
Embedded links in the header
Color contrast problem
Pdfs should be accessible pdfs
Pdfs should be accessible pdfs
Heading rank problem
Tab order should match the visual order
Tab order should match the visual order
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.
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.
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.
Final Design Overview