Department of
Obstetrics and Gynaecology

This project aims to support the Department of Obstetrics and Gynaecology in redesigning their official website, as the current one no longer meets their needs.  

The new website will provide important information for students, staff, and members of the public seeking guidance on obstetrics and gynaecology.

The website will feature information on three teams, namely the Obstetrics Team, Gynaecological Team, and Midwifery Team, each with their own area of expertise in the field. 

Timeline

April - May, 2022

Team

Yakoo Technology
(with 2 Project Manager, 2 Developer)

Role

UI & UX Designer

Client

The Chinese University of Hong Kong

Tools

Figma

Discovery & Define

Challenge

As a client-based project, we couldn't engage directly with end-users and relied solely on client feedback.

Changes in client representatives led to shifting requirements without altering the launch deadline, which created challenges.

The original website also had a disorganized sitemap with hidden pages, making navigation difficult for users.

Our Solution

Maintain regular communication with client at every stage of the project to ensure that all parties are on the same page.

Providing frequent updates to the client by sharing all the materials related to the project's progress.

Offering guidelines to the client to assist in validating whether the site's restructured organization meets their expectations.

To stay aligned with the client's expectations, we held regular meetings throughout the design process.

We shared all materials in a Google folder for ongoing feedback and used an Excel document to propose a clearer site structure.

This helped the client validate the new layout and better understand the site hierarchy.

Defining the Site Structure

In the site structure definition phase, we work closely with the client to establish the hierarchy of the website.
‍
Before placing each page into the structure, we ask ourselves several questions, such as:

Is there a sub-page under this page?

Verify whether this represents the lowest level of the hierarchy.
If a sub-page is added, we will utilize a navigation link to display it.

Are there multiple categories of content within this page?

Determine whether there will be a significant amount of diverse content within a page.
If so, we will incorporate a side tab within the page to facilitate content navigation.

Is this page directed by one page or many pages?

To ensure that users can easily follow the navigation flow, we have implemented breadcrumbs, which require a clean and clear site structure.

Wireframe

Hi-Fidelity Wireframe

After organizing the content, we designed wireframes for 10 key pages, including the homepage and various sub-pages under About, Research, Services, and News & Events.

We presented consistent components like the header, navigation bar, sub-headings, and footer across all pages.

Depending on the page’s hierarchy, we also included navigation links or side tabs where appropriate.

Material Organization

To help our client efficiently fill in over 100+ website pages within a tight deadline, we created a template form.
‍
We established design, including font, color, and word spacing for:

Headings, Paragraph, Small Text, Callout Text, Links, Order List, Form, Button, Attachment, Collapse, Timeline, Card...and more.

This template format enables the client to easily add or update content, and it also groups the content into different categories, creating a style guide for developers to follow when filling in the content.

Style Guide

Colour

Navigation Button

Card Carousel Theme Colour

Final Design✨

View Live Website - O&G CUHK

Mobile Responsive

Every design is also showcased with mobile responsive mockup.

Hands Off Documents

With the final design, we create hands-off documents for developers and clients to reference.
‍
These documents ensure that the website is developed correctly and that clients have all the necessary information to maintain and update their website.

Reflection

This project to revamp the Department of Obstetrics and Gynaecology's official website presented several challenges, including the changing requirements due to the changing client representative and the disorganized sitemap of the original website.
‍
However, our team overcame these challenges through frequent communication and collaboration with the client, creating a Google folder to store all materials, restructuring and organizing the website, simplifying the site's structure, and creating hands-off documents for developers and clients to reference.

In addition to the challenges faced by the project, I was also handling 3 different projects at the same time and sometimes working outside of the project, which affected my ability to provide strong support to the development team.
‍
This is an area where I could have done better and I am committed to providing full support to the development team in my future projects.