The Manhattan International High School
Revitalizing an outdated high school website
Addressing a high school website’s information architecture and usability challenges, and transforming unstructured content into a user-friendly platform with a modernized UI design.
OVERVIEW
Role: UX/UI Designer, UX Researcher, Information Architect, Interaction Designer
Duration: 1 month
Target Audience: Parents and prospective high school students
Problem: Website’s outdated user interface and lack of structure causes poor navigation
Objective: Revamp its information architecture, page layout, and UI design to improve usability
Impact: Elevating user satisfaction, retention, and information accessibility
Why This Website?
As my former high school, Manhattan International High School (MIHS) holds a special place in my memory. It was a place I stepped in with insecurity and stepped out with confidence. As a new immigrant in the United States, MIHS fostered a safe and encouraging environment for me to thrive and rebuild my identity.
What are the weaknesses in the current website?
As a notable school known for its service to immigrant students and families, I want to ensure its design and functionality accurately represented and did justice to its mission, core values, and service. As school websites are often the initial point of contact for parents and prospective students, it's essential that they leave a strong impression to achieve as many new enrollments as possible.
The following are weaknesses I identified in the website’s design:
Confusing navigation and information architecture
1.
Partial preview of homepage content
Information overload and extensive texts
2.
Poor contrast and unstructured, low-resolution images
3.
(School profile page) These images lack context and some are irrelevant to the page they’re in
Poor choice of background image, making the header title difficult to read.
RESEARCH
Competitive Analysis
Identifying areas of opportunities for change
How Did I Choose Websites?
My selection included international schools, specialized high schools, and schools my friends attended. I specifically sought to have a variety of sites ranging in design and effectiveness. That is how I ended with the selection below.
This diverse selection allowed me to evaluate their strengths and weaknesses and gather insights for the revamp process.
Personal Top Competitor Sites
I especially liked the sites of International High School for Health Sciences and Queens Technical High School for their simple, clean, and cohesive design.
Pre-Redesign Usability Testing
Since I already had a website to work with and was interested in assessing how others navigated it, my mentor and I decided a usability test would be deemed more valuable than an interview for gathering insightful observations and defining the problem. Hence, I initiated a usability test to gather user perspectives and experiences, helping me determine priority areas and actionable data to inform the redesign process.
PLAN
Research Goals
• Determine the best way to improve the website’s information architecture, layout, and usability.
• Discern participants’ frustrations and dislikes, if any, when using the website.
Task
Allow participants to freely explore the website to gain a sense of its content and design and point out strengths and weaknesses.
Methodology
• A number of 4-5 participants will complete a 10–15-minute test, which may be moderated or unmoderated depending on scheduling circumstances.
• Observations will be documented and summarized in a Word document.
FINDINGS AND ANALYSIS
Summary
I conducted one moderated and four unmoderated usability tests. I asked all participants to explore MIHS' official website and share their impressions.
From the usability tests, participants mentioned the following points for revision:
1. information hierarchy
2. choice, location, relevance, and quality of images
3. ineffective use of typefaces and fonts
4. monotonous colors
5. disorganized navigation bar
6. unnoticeable school logo
7. lack of distinction between headlines and body texts
8. non-prominent CTAs
9. awkward placement of components
Measuring Success
This usability test was successful because all participants shared numerous areas of improvement for the website. There were also overlaps in feedback where people identified the same weaknesses. These results reinforce the necessity to redesign this site.
Recommendation
Many areas of improvement can be addressed simultaneously, saving time. Fixing the weak points mentioned in the Summary section is a high-impact, low-effort task, manageable within the project timeframe. I addressed each aspect one at a time. Therefore, I tackled each aspect one at a time.
DEFINE
Problem Statement and Goal
Problem Statement: Users need a high school website that is user-friendly and well-designed because the current version makes it challenging to find and understand information.
Goal: Thoroughly revamp the website by first strengthening its core structure and organization, and then enhancing its design.
Card Sorting
I began by addressing MIHS' site map, which lacked well-organized and logical structure, making information hard to find. To enhance it, I conducted a card sorting exercise, using existing and new categories to assess user preferences.
SETUP
CARDS —————>
MIHS in pictures
Panther Nation PSAL
New Student (9th Grade) Contact Info
Our Partners
After School Programs
NY Performance Standards Consortium
Extracurricular Activities
School's Statistics
Alumni
Policies and Forms
CATEGORIES ——>
About Us
Students
Parents
Faculty & Staff
Quick Links
Resources
Administration
Our Core Values
Virtual Graduation 2011
Mastery-Based Learning
Grades/Jumprope
School Profile
Corona Virus Update
The Internationals Network
Apple Distinguished School
Calendar
News & Announcements
Academics
RESULTS
Regular Grid (left)
I was surprised to find almost half of the people categorized "Alumni" under "Resources", when initially I was so sure it would pertain under "Students".
Standardization Grid (right)
The values in this grid represent the number of people who placed a certain card under a category. Most participants, 5-6 out of 7 to be more specific, agreed on the categorization of the following cards:
1. Administration
2. Calendar
3. Corona Virus Update
4. Mastery-Based Learning
5. Our Core Values
6. Our Partners
I took these results into consideration when constructing the new sitemap.
Site Map
The biggest improvement in the sitemap is condensation. The original sitemap was unnecessarily extensive with random loose categories. Now, each category in the new sitemap is intentional and contains related subcategories. This change will significantly facilitate the search for information.
BEFORE
AFTER
Design
Style Tile
Elevating the brand
WHY MODIFY IT?
MIHS' color palette is prominently blue with neutral colors white, black, and gray. Since most of its colors are dark, it lacks contrast and consequently makes the site appear dull. These claims were reinforced by usability test participants as well. Thus, I took the liberty as a UX/UI Designer to bring more color and improve the website's visibility and visuals.
NEW PALETTE DECISION
As it's a high school website, my aim was to infuse a youthful feeling while staying true to the original color palette. I accomplished this by adding a warm yellow, a complementary color to blue, and a touch of a dark shade of red for extra vitality.
Wireframes
There was no need to draw sketches due to the already existing screens. Thus, I jumped straight into redesigning the site on Figma. For this project, I aimed to create responsive designs for desktops and mobiles.
IMPROVEMENTS
The new content layout, font, and use of whitespace enhanced the website's overall readability and, as a result, the user experience.
The original website used low-quality pictures which compromised its quality and professionalism, so they were replaced with higher-quality ones.
NOTE: The hero images serve as placeholders because I don't have access to any of the school's original pictures. Although they are not directly connected to the school nor its stakeholders, but they are relevant to the content of the page.
DESKTOP SCREENS
MOBILE SCREENS
Prototype
Recall the impression you had of the original MIHS website.
How did you feel when you saw it? What were its strengths and weaknesses?
Keep these questions in mind as you navigate the redesigned website's prototype.
Has your view changed?
Test
Post-Redesign Usability Testing
For this usability test, I followed the same plan as the first round of usability tests conducted prior to redesigning the website. Please refer to the "Research" section for reference.
RESULTS AND ANALYSIS
Summary
Four participants, three of whom had experience with MIHS' current UI design, provided feedback on my redesigned MIHS website during this usability test.
I focused on ten desktop screens and seven mobile responsive designs, significantly improving UI design and functionality based on the first usability test's findings.
This time, participants offered more positive feedback than negative. I collected enough comments to proceed with priority revisions and further refine the site.
Measuring Success
The new design of MIHS is successful because, as mentioned earlier, it received a higher number of positive comments. All negative comments were related to the visual design of some screens, such as dissatisfaction with the font or color palette, which at times, is just a matter of taste. Participants didn’t experience significant struggles when navigating the site, which shows it is easy to use.
Thus, I deem my work triumphant because there weren’t crucial aspects of my design that negatively impacted the participants’ experience.
Recommendations
I will proceed with making the following small modifications:
1. Redesign the illustration used on the "Core Values" page
2. Reduce the font weight on the "Contact Us" page
3. Incorporate a "home" button
Reasoning
I will move forward with these low-impact yet low-effort changes. While each one may not significantly affect the site's quality, collectively, they can substantially enhance user satisfaction and the overall experience.
Priority Revisions
Additional Revisions
Without time constraints, I would've further worked on the following areas:
Smoother transitions and animations to resemble the finalized website
Request original photos from the high school to replace low-quality pictures in the site with high-quality, MIHS-related photos
Conclusion
Next Steps and Reflection
Contact MIHS and work with them to ensure the new website matches their vision and values
Build comprehensive redesigned pages for the rest of the site
Introduce transitions and animations for a more immersive website experience
Effective communication with stakeholders is essential for the success of a product
Throughout this project, even though I had the freedom to make design decisions, I always had a lingering question: Would these changes align with the school's needs and the tone they wish to convey? While I felt confident in my design choices as a designer, I recognized an inherent uncertainty in the process. The true validation of my decisions would only come when I had the opportunity to share my work directly with the client.
This challenge was particularly pronounced due to the fixed deadline, but it underscored a critical aspect of the design process that I value and look forward to in my future work: partnering and working closely with a team and clients to ensure my designs choices meet business and client needs.
