City University of Hong Kong

Redesign the university website for a leading global university to make it an effective digital channel for the University to communicate their brand value, promise and achievements with the audiences and to enhance the user experience for browsing the website based on their interests and context.

My role

I worked on this project as a UX/UI Designer in Sedgwick Richardson. Our team consisted of a digital design director and two project managers. We formed a scrum team with an overseas team of scrum master and developers. I was responsible for the research, IA design, visual design and client workshops of the project.

Background

City University of Hong Kong (CityU) has a well-earned reputation as an innovative hub for research and professional education. Being a global shop window of the university, the University website needs a great attention in terms of its development. The website has been in service for many years without major changes. Their institutional identity, current web technology and user behaviour have changed significantly. The gaps between user expectations and what the current website delivers have widened, resulting in a deteriorating user experience. To ensure the CityU website befitting a leading global university, there is a need to redesign the University website.

Research

We conducted an online user survey to understand the users' goals (e.g. what information were they looking for? How was it related to their roles?) and pain points they met (e.g. How do they find the navigation?) when using the website.

We also interviewed a group of internal stakeholders of the university to understand their expectations of the website.

Moreover, we studied a comprehensive usability research report on higher education websites created by Nielsen Norman Group to gain insights about the best UX practices of university websites.

We dived into the competitive analysis of the other university websites to assess how did the peers design for their users. (e.g. How did they communicate their brand message? How did they handle usability? How did they present the list of programmes available?)

Key findings

Complexity was the dominant theme that emerged from research and touched on almost every area of the site, dramatically impacted the user experience.

The navigation of the website was very complex, created confusion to the users and made them get lost navigating the site. It also exposed the users to the internal complexities of the University structure.

The website users were directed to sub-sites very early in their journey. The information that most users wanted was spread across multiple sections on the site, and even scattered on over hundreds of sub-sites.

Inconsistency in the visuals and behaviour of the UI elements made users feel a loss of control, in particular of finding the route back.

The landing page was just a page of links directing to multiple sub-sites of the University, and the links were repeated with the main navigation menu of the website. It was difficult for the users to find the information they need without clear context. The website was lack of engaging content that communicated the University's brand image, promise, positioning and achievements with the users.

The content was text-heavy, cluttered, and presented in a large volume at a time which made the users hard to digest.

Information was at times outdated and hard to keep updated, resulting in many non-functional parts such as dead links and pages on the site.

Project goals

The redesign of the website aimed to:

Simplify the experience and and make it easier for users to find what they look for
Make the website an effective channel to communicate CityU’s achievements and status to the users
Enhance the user experience for browsing CityU websites based on their interests and context
Resolve the current content silo situation. Provide a suitable platform for content to be created and housed. Allow the University to easily and quickly scale the website, add content or create new pages with flexibility when needed
Modernise the interface of the website and make it reflect the brand identity properly

Working process

Identify the user groups and their needs

We identified the user groups of the website and generated some personas. These gave the entire team a shared understanding of who we were designing for and what do the users want to achieve on the website.

Primary user: current students, prospective students, researchers
Secondary user: alumnus, faculty staff, donors, employers, media and general public

Re-design the information architecture

We re-designed the information architecture in a way that the hierarchy of information is more intuitive to the users to help them find the information they need more easily.
The items and their order in the main navigation supports CityU’s narrative to present it as an education and research institution. It provides a clear orientation to users visiting the site. The supplementary navigation helps users find the content they are looking for while keeping the overall narrative intact by not introducing noise to the main navigation.
Distilled the large volume of information to display high-level information at the early stage of the user journey. Identified the user groups and show only relevant content to the users at the right time.

Content audit and information grouping

Went through the existing university website and the sub-sites to evaluate the usefulness and accuracy of the content, to identify and locate the existing content needed for the new website, and to analyse what new content was required to complete the information backbone of the new website.

Mapped out the details of the content structure in different sections and the relationship between the pages of the website.

There is some information (e.g. key figures, people stories, department contact information, etc...) that needs to appear in different sections of the websites and also on the university sub-sites. To maintain one single source of truth and allow easy update of the information happen in the future, we identified the content types with this characteristic, defined the attributes, their relationships with the components to be designed and owners of each content type by working closely with the product owner of the client side.

Pencil sketches and Wireframe

The sketches and wireframes were important for early discussion with development team to reduce unnecessary development changes and cost

Sketched out the pages for key tasks and key features. Sketching lets us generate ideas quickly and explore more design solutions.

Created wireframe to plan the content and user experience, and to define the templates and components to be designed

Visual design using modular design approach

Due to the large scale of the university website, we used a modular design approach instead of a page-based design process. We created a design system with reusable components and patterns, defined the details of every component, included its purpose, behaviour, data rules, restrictions, etc… Those components can then be combined in various ways across the website to create unique pages easily. Overall we designed 100+ panels in 4 viewport dimensions.

This means the website development is scalable and sustainable. Consistency can be maintained and gives the users a cohesive user experience. It also gives more control to the web editors. Web editors without development expertise can create new pages that look professional and consistent with the rest of the website by using the existing components available in the content management system.

Detailed design

How we got there

Agile methodology

We divided the whole design process into 10 sprints.
We broke down the big, complex project into small tasks. Together with the development team and the scrum master, we groomed the scope at the beginning of each sprint based on the project status, resources available and priority of the tasks. This allowed all team members to work in parallel.
We went through the components to be developed regularly to understand the technological opportunities and constraints and iterated the design throughout the process.
We reviewed and tested the work completed during the sprints at the end of each sprint, so that difficulties and problems could be discovered early.

Prototyping

We created interactive prototypes with Invision so that our client could experience how the website would work in real-life.
We used the prototypes to carry out some testing in order to validate our design solutions and iterate quickly. It is important to do testing as users might tell you things you have never expected or have a totally different interpretation of the UI elements you design.
The daily instant communication with the overseas development team happened smoothly on the online prototype. It instantly reflects design changes and lets the developers grab the code to use easily.

Client workshops

The components developed and guidances were well documented in a guideline for the client. Besides, we ran workshops at the client office to go through the purposes, usage and rules of the components, and to practice creating some pages with them using the components, so that they learnt how to decide what components to be used to display the content afterwards.

Results

We delivered a completely revitalised university website and turned a highly complex and information heavy website into  an intuitive engaging platform, optimised for all devices. The website was well received by both internal and the public – an exceptional achievement considering the scale and complexity of the website.

The website was awarded “Best rebrand of a digital property – Silver” in Transform Awards Asia Pacific 2019.

[email protected] • LinkedIn • Pinterest