NYU ITP/IMA help page redesign
ITP/IMA help page is a widely used website in ITP/IMA program providing floor resources and information. We aim to enhance the overall user experience.
Team: 4 members
Me: PM/ Product designer
UX designer
Visual designer
Developer
Role
Product management
Product design
Visual lead
User interview
Time
Start from Oct 2023
Continuing for
future development
with IT department
Tools
Figma
Unity
PICO 4 VR device
Whimsical
Timeline
October
November
December
Future Improvement
User Interface/ Visual Design
Design system
Wireframes and prototype
Accessibility Design
Accessibility Notation
Accessibility Implementation
User Experience Design
Information Classification
Recreate Information Architecture
Ideation: How Might We?
Research: Find Problems
Responsive Design
Overview
In Fall 2023, I initiated this project by inquiring with the IT department about any volunteer UX projects available for me to work on. I took the lead on the redesign project and invited my friends to join me. Under the supervision of two senior technologists, as well as developers Scott and Lenin, along with the NYU Digital Accessibility team, our goal is to create a better digital experience.
Problem
63%
Users think the visual design of the site could be improved
52%
Users find it difficult to locate information on the site.
50+
There is 50+ accessibility issues using check tool on Chrome.
Based on our questionnaire and research, we have identified the following major problems:
Solution
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.
current version
redesigned version
Research
What problems do people have for current website?
To answer this question, we chose to send 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 are our stakeholders exact need?
Considering the user need of different stakeholders, we want to dive into their daily scenairo. Therefore, we chose to conduct the in depth interview to find out the painpoints.
What is good help page design?
We analyzed 26 public access help pages encompassing search engines, collaborative digital platforms, and higher education institutions to uncover best practices and areas for improvement
Research methods
44 Questionnaire Responses
Identify user issues within the current ITP/IMA help website and assessed the layout hierarchy
20 Stakeholders Interviews
Discover the needs of different stakeholders-students, residents, faculty, and administrative staff
26 Lateral Comparisons
Analyze 26 public access help pages to uncover the best design and areas for improvement
Quantitative Research - questionnaire
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 small part of the summarized results from the questionnaire:
75%
Users often navigates the site through the “Search” feature
63%
Users think the visual design of the site could be improved
52%
Users find it difficult to locate information on the site
86%
Users access the page through Laptops
Which sections do you visit most frequently on the current website?
What type of information do you expect to see from the future ITP/IMA Help website?
Please select the top 3 sections that you care for most.
How would you rate your overall experience of the current ITP/IMA help website?
Design actions - questionnaire
Search Feature:
Enhance the functionality and visibility of the ‘Search’ feature.
Information hierarchy:
Reorganize the IA and prioritize sections based on questionnaire
Restrained activities:
Redesign the visual to locate the information more efficiently.
Visual design:
Redesign the visual of the whole website and align with NYU color system
Qualitative Research - user interview
11
Students
Student is the main user who navigate all the school resources through the website
4
Administrators
Every administrator updates their own content to the website themselves
3
Residents
Residents work in different labs introduce the lab to student on the web
2
Faculties
Faculties link the resource and info from the web to their syllabus/ instructions
To view all of our interview notes, please feel free to check our Google Doc.
In summary, we interviewed various stakeholders to identify their specific needs. We delved into issues related to the search feature and information hierarchy mentioned earlier.
All of our interviewees found it challenging to access the search bar, as it was less prominent and accessible than desired. Additionally, considering that users had difficulty locating information, we created a new information architecture and presented it to every interviewee to gather revision suggestions.
Design actions - user interview
Search Feature:
In the new design, the search feature would be easier to find on landing page. Besides, there will be search keywords to create a smarter searching experience.
Information hierarchy:
We revised the information architecture based on each interviewee’s advice and rearrange the sections to a more reasonable category.
To view the details of the information architecture, please feel free to check our Figjam.
Current information architecture
Recreated information architecture
Design and validation
Virtual experience breaks the interior design limit and expands the possibility of the space.
Wireframes
Option 1：selected
Option 2
Option 3
Usability testing
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. Option 1 helps users navigate quickly compared to the other two options.
Final output
Design system
Interface design
Design system
In order to be consistent with other NYU Tisch websites, the font and color choices mainly follow the NYU design system. Please feel free to check the file in our figma.
Part of the interfaces
Search bar compare
Current design
Our redesign
Left side navigation bar compare
Current design
Our redesign
Content page compare
Current design
Our redesign
Calendar compare
Current design
Our redesign
"According to our in-depth user interviews, more than 50% of users found it quite challenging to extract information from the content page. Additionally, they expressed difficulty in locating the specific information they were searching for. Therefore, we have added a summary and related links section to the content page to assist users in navigating the content more efficiently, enabling them to quickly find relevant webpages.
Accessibility
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.
Current accessibility problems
Since I initiated this project in October 2023, I began reaching out to NYU Digital Accessibility for advice. With guidance from Jodi Arlyn Goldberg, we redesigned with a focus on accessibility. To address the current accessibility issues, we delved into the problems themselves to find a coordinated solution.
Missing alt text
Color contrast problem
Heading rank problem
Embedded link in the header
PDFs are not accessible
Tab order problem
Future solution - notation mark
In order to implement the design in an accessible way and communicate with our school’s developers, our next step is to provide the notation marks based on our redesign file. As the redesign gets implemented by the developers, I will always be there to conduct accessibility checks at each step.
Links
Takeaways
Technology would change the way we think of design
Two years ago when I just have an idea about the project after watching the documentary. I couldn’t think any kind of real technology for a virtual character. AI chatbot seems impossible applying to normal life scenario.
Not take criticism personally and keep iteration
I remember how frustrated I was when this project was criticized as too ideal and ‘students’. However, with the emerging tool like catgut and Apple’s vision pro, the fact of having a virtual friend has become closer.
Next steps
Technology would change the way we think of design
Two years ago when I just have an idea about the project after watching the documentary. I couldn’t think any kind of real technology for a virtual character. AI chatbot seems impossible applying to normal life scenario.
Not take criticism personally and keep iteration
I remember how frustrated I was when this project was criticized as too ideal and ‘students’. However, with the emerging tool like chatGPT and Apple’s vision pro, the fact of having a virtual friend has become closer.
Contact
Let's start creating together
I am actively looking for opportunities
© Designed by Murphy at midnight with music and milk tea. All Rights Reserved.