3 Effective Design Solutions for NYU Shanghai’s New Website
MING Labs’ site refresh for a multi-persona, cross-cultural educational institute.
Designing a large website can be tough — even more so when you need to appeal to both fresh-faced undergraduates and established academic faculty not just aesthetically, but also practically. Based on our latest project with NYU Shanghai, we want to share some challenges we faced in redesigning a website for a complex organization, and how we overcame them while facing technical and scope limitations.
The three challenges were:
- Improving the user experience by designing better visual hierarchy and website navigation
- Ensuring UI consistency across a mature site
- Typography: Balancing English and Chinese fonts
1. Improving the user experience with better visual hierarchy and website navigation
The Challenge: Confusing Navigation
The original NYU Shanghai website was confusing to navigate because information of different hierarchies was displayed with no visual distinctions at various touch points of the website. For example, tabs of different importance (ie. ‘Students’, ‘Faculty’, ‘Search”, ‘Apply”) were all visually displayed on the same level in the navigation bar.
In another example below, the ‘Faculty’ tab can be found in the header bars and buttons in 3 different colours, which visually represented 3 different hierarchies.
This was a problem because visual hierarchy serves to determine which elements first attract users’ attention. Without visual distinctions, there are too many offerings of the same importance visually. Users may be easily distracted and become confused about which button to click next.
How we solved it: Ironing Out Visual and Information Hierarchy
To make the site navigation less confusing, we set out to redesign the structure of the homepage, and to prioritise its high-importance navigations. We categorised content by labelling and colour-coding information according to hierarchy, cataloging each element for redesign.
Restructuring also meant determining what blocks were important and which were redundant in order to achieve optimal organisation of the webpage.
Ideally, we would have liked to restructure the entire site. However, we faced some budget restrictions, technical constraints and the fact that we were building on a legacy platform with other complex factors to consider. Thus, we focused on proposing minimal but meaningful improvements, such as restructuring the core navigations on the homepage to enhance the user experience.
We also created a UI guide to ensure consistency, and to help stakeholders follow the logic behind NYU Shanghai’s new visual design for future site updates. According to the Interaction Design Foundation, consistency is important for 2 reasons:
1. Reduce learning for users by decreasing the number of representations for actions and operations
2. Eliminate user confusion where users should not have to spend time wondering the meaning of different words or interactions.
2. Ensuring UI consistency across a mature site
The Challenge: Creating a Refresh for a Large Legacy Site
Another problem we faced was the amount of content on the website. NYU Shanghai’s large organisational structure meant the site had an excess of different components spread across several pages. We spent a significant amount of time sieving through the information on the site and deciding which aspects to redesign.
How we solved it: Mapping, Grouping, Refining
First, we mapped out the entire website for an overarching view of all the content. We subsequently grouped the content into pages and refined it over several rounds to develop clarity on the pages we designed.
The team also used Sketch symbols to save time and improve workflows so we did not have to remake each button for every page. We simply needed to define how each button would look like and change the content subsequently.
3. Typography: Balancing English and Chinese fonts
The Challenge: Multiple, Diverse Stakeholders and Font Compatibility
Our art direction was led by the phrase “From Made in China to Created in China”, and with that we aimed to tailor-make a website that innovatively embodied NYU Shanghai’s unique identity. One element we explored was the website’s typography. NYU Shanghai has a dual identity, with Chinese nationals and internationals making up 51% and 49% of the student body respectively. We sought to translate this cross-cultural identity by integrating Chinese characters in the homepage headers and retaining a traditional look through the typography.
Our priority with the typography was to satisfy the varying preferences of the different stakeholders in a diverse organization. Although we felt that certain options were visually impactful, we needed to maintain levels of empathy across all stakeholders and ended up choosing a more neutral approach.
Another challenge we faced was finding the perfect fonts for both English and Chinese characters. They had to be visually compatible as English and Chinese are very different in their written forms; English letters have differing widths, heights and spatial considerations between letters that form comprehensible words, while Chinese characters are logograms, blockish and exist without spatial specifications between words or sentences. The availability of fonts also differ for both languages. Common typography rules such as font weight, tracking, visual hierarchy and alignment were distinct between the two.
Our difficulties are illustrated in the image below. After applying our initial proposal to the mockup, it was clear the font did not work visually with the overall style.
How we solved it
We found fonts with similar stroke widths and weights to make both languages equally heavy. The final solution paired enlarged Gotham Bold with a Chinese Heiti font of an almost identical weight.
As designers, we often have to design around restrictions, creating solutions that work with large, legacy products. In executing a site refresh for a multi-persona, cross-cultural educational institute like NYU Shanghai, we found unique solutions in mixed typography choices, and establishing clear visual hierarchies for users.
Check out our finished work here: https://shanghai.nyu.edu.
For more great insights like this one, follow MING Labs on Medium and subscribe to our monthly newsletter. Feel free to drop us a note at hello@minglabs.com.
MING Labs is a leading digital business builder located in Berlin, Munich, New York City, Shanghai and Singapore. We guide clients in designing their businesses for the future, ensuring they are leaders in the field of innovation.
Liked this article? Keep an eye on the horizon with us.
Get stories like this sent to your inbox once a month. Stay in the know with MING Labs’ best reads for digital, business building and technology.
