BOSTON CHILDREN'S HOSPITAL 150
TEAM
Liberty Concepts
MY ROLE
Design Lead, UI/UX
TIMELINE
Aug 2018 - Dec 2018
Project Goal
Boston Children's is ranked the number one pediatric hospital in the nation by U.S. News and World Report. It is home to the world's largest pediatric research enterprise.
At the 150 Years Celebrating time, how can we create a digital experience for Boston Children’s Hospital to increase public awareness of its achievement in pediatric medicine and research? How might this experience allow BCH’s audiences to learn the past, acknowledge the present and look forward to future innovation and discoveries?
We collaborated with the client representative and decided to design a responsive microsite to showcase the history and achievements of Boston Children's Hospital.
Who Do We Design For?
For this microsite, the target audiences were focused on the hospital's Alumni and Staff, Thought Leaders in the industry, Medical and healthcare community, and the local community. They are interested in learning more about the medical achievements and stories of Boston Children's Hospital.
Challenge
As a microsite that contains only one homepage, and two page-templates for clients to manage the content, how to design flexible page-templates not only emphasizes the historical highlights of BCH but also can fit in other different types of contents, which was a challenge. In addition, in terms of the amount of historical content, how to provide a smooth mobile browsing experience without endless scrolling was another challenge.
DIGITAL EXPERIENCE
The project goal is to design a clean, straightforward, and immersive digital tour for audiences to explore the 150 years historical-highlight of Boston Children’s Hospital. A storytelling timeline that focused on innovation and research achievement was the ideal key component.
Digital Experience Goals
-
Primary goal:
Browse the timeline on the homepage -
Secondary goal:
Access About Us, Video, Events, Vault, and download book contents through the section menus. -
Third level goal:
Direct audiences to BCH's primary website and social media.
Given the time and scope constraints of the project, we focused the team efforts on the homepage to build a timeline experience. In addition, we provided a standard body page and list page templates that allow the client to customize their content.
Wireframe Iteration
Initial Design
Improved Iteration
Problem
-
The beginning section is too long and contains too much content before the timeline
-
The timeline is too long for audiences to explore
-
The "What we're working on Now" content interrupts the immersive experience of the historical contents.
-
Circle shape photo hide content in corners
Improvement
-
Reduced the length and kept the clean style of the beginning area and used a hamburger menu to access content in other sections.
-
Removed "What we're working on Now" content on the default timeline and provided audiences with a button to access it for each highlighted year. At the same time, it shortens the length of the timeline.
-
Added an intro section as a connector between the timeline and beginning area to ensure a smoother browsing experience
-
Updated photo shape from circle to rectangle and added a slides style
"What We Are Working On"
We hide the "What we're working on Now" content on the default timeline view and provided audiences with a button to access the content for each highlighted year. So that the audiences can learn more about what the Boston Children's Hospital is working on now compared to their historical research.
Mobile experience
Consider the limited space on mobile screens, unlike desktop and tablet experiences, we used an accordion layout. Except for the content of 1891, the rest of the contents are all collapsed by default. This way we avoided endless scrolling of lengthy content, and audiences can easily access the content they are interested in just by browsing the years and titles.
What Did I Learned?
This was a fun and exciting project to design a timeline that showcases the history and achievements of Boston Children’s Hospital. Although this is a small project, I still learned important takeaways:
-
The client can be convinced by strong evidence and are welcome with rational suggestions.
-
Try to get the real content as early as possible to design the layout and browsing experience which can better serve the content.