LKS Faculty of Medicine, HKU

Background

HKUMed (LKS Faculty of Medicine, The University of Hong Kong) is an internationally famous medical institute with more than 50 departments and units. Each departments and units have their own website to promote themselves but most of them are old-fashioned and not efficient to serve the purpose.

Project team structure

The project team included 6 people :

UX/UI Lead x 1, Account Manager x 1, Visual Designer x 1, Technical Lead x 1, Developers x 3

As the UX/UI Lead, I need to drive the whole design process and my responsibilities included:

User Research
UX Design
Information Architecture
Visual Design

Wireframe & Prototyping
Front-end Development
Usability Testing

Challenges

"Where should I click when I enter the website?"

"I feel lost as I don't know where to find the information that I want..."

"Why can't I view the website in my mobile?"

These are some common feedbacks we received from the kick-off users interview. We concluded there are few major pain points:

Lack of coordination- Different look & feel and site structure
Old-fashioned design - Not in modern design style and not device-friendly
Content management- Controlled by different CMS or simply built in static
Unique brand value - Not clearly serve the promotion purpose

Design Process

The process is divided into two cycles:

Cycle 1: Representatives and project team members from the faculty, and

Cycle 2: Users and project team members from 13 departments.

For each cycle we underwent five stages of the Design thinking methodology: Research, Analysis, Ideation, Prototype and Testing.

Our ultimate goal in Cycle 2 is to deliver design for 13 department websites, based on the standardised sitemap and prototype from Cycle 1, which is perfectly responsive cross browsers and devices, and also maintained using single source CMS.

Design Process: Cycle 1

At the beginning of Cycle 1, we interviewed the project team members and users from the faculty to understand their expectations on this project. The faculty team required us to focus on three main themes for all websites: Academic, Research and Clinical Services.

Information Architecture

We took references from faculty's competitors, like Medical school from Harvard University and National University of Singapore and designing the sitemap and content hierarchy.

We studied each of the existing department websites and sort out the key common requirements in different levels using card sorting by categorizing the topics by different items like target audience, features and etc.

We also did flow diagram comparisons to find out the best solution for optimizing then key features user flow.

Comparisons for some key features and user flows

Use Card Sorting method to filter the common features for each websites

Sitemap redesign and wireframing

We picked one of the existing department site as an example. We start from restructuring the sitemap, illustrating a visible content hierarchy using wireframe, and creating the interface mockup and high-fidelity prototype. All steps included the review and testing from the client before moving on to next stage.

Involve client's participation on sitemap creation is a good way to come-up a design that really fit for their needs. We used a free online sitemap tools "GlooMaps" to keep interaction with client in our discussion.

Sitemap redesign and comparison to existing website

Wireframe of standardised IA, with landing page, all key topics pages and simple user flow

Prototyping

We provide a clickable interface design prototype with full navigation and user-flow using inVision, included desktop, tablet and mobile version for client's review.

After several rounds of comment and layout revisions, the prototype sample was approved and ready to move on Cycle 2.

Design Process: Cycle 2

In Cycle 2 we interviewed the users from each department respectively (more than 13 departments!). We listened to what they need and created customized design according to their requirements based on the standardised prototype and sitemap, with enhancing their unique branding identities.

Unique identities

Since all departmental websites are designed based on same IA and prototype, it is a big challenge for us to bring unique characteristic for each of them.

We requested to have a visiting tour to the facilities, laboratories and medical instruments of specific departments. We invited a professional photographer and held several tailor-made photo shooting sessions, to get visual content material with uniqueness and branding engagement for our production.

We also "beautified" each website layout with customised unique theme colours, photos (both shooting and stocks), graphical icon and department logos.

Development and Production

I create hi-fidelity clickable prototype using HTML, CSS and jQuery to yield more realistic experience and usability testing. From high-level features to granular design elements, we tested and refined the design iteratively to achieve a final design that caters to the needs of the target users.

I took lead in the frontend development process. Design guidelines and prototypes are provided to developers for further implementation on CMS.

Consider the scope, the prototypes and templates should be designed with more flexibility for easy customization. For example, use widget and function-base component instead of creating static stand-alone HTML pages.

Testing and Refine

Numbers of client review are undergone for each department websites, with revising the texts, images, and content migration from existing websites. I also arranged usability testing sessions to keep improving the user experience until it is satisfied to launch.

User flow demonstration 1: Researcher searches for a publication article

User flow demonstration 2: Patient who looking for the address of a clinic

Difficulties and what I learned

The main difficulty of this project is that most of the users are not familiar with design or development related knowledge. Usually I need to explain the design concept in layman's perspectives or use some tools to help them understand it easily, like inVision and Gloomaps as mentioned above.

Another difficulty is facing the long and complicated approval procedure before the site launch. During this process, the requirements kept changed and added from client, so the communication and definitions of SOW is important to deal with this situation.

This is the one of the project that I can apply a full UX methodology, which also give me a practical skills and experience on project management and organisation.