Design Problem
Stanford Health Care needed a new newsroom website design, one which would better showcase press releases, photos, videos and feature articles written by Stanford Health Care Communications. Stanford wanted a refreshing new experience, but wanted the new newsroom to utilize existing templates and components from Adobe Exerience Manager and their existing website. They wanted to raise awareness and achievements of Stanford Health Care and its doctors through the new newsroom site, and have a central place to communicate with the press.
Features
Stanford Health Care wanted the key features for their website: a Newsroom Home Landing Page; a videos landing page; a photos landing page; landing pages for Press Releases, Patient Stories, Physician Stories and Stanford Health Care in the News; and a video collection page and a photo collection page.
My Role
I was the user experience designer and visual designer. I worked with a program manager, account executives and the Stanford Health Care Digital Strategy team.
Tools
Designs were created in Sketch. Prototypes were created using Invision. Specifications were created using Confluence.
Design Challenges
Design challenges for this project included: 1) working with a demanding client and short timelines in which to get the project done; 2) utilization of existing components and templates from Adobe Experience Manager which were not ideally suited to newsroom 3) a distributed team and the inability to work with the client in person; and 4) lack of access to engineering as our agency was only doing the designs and not implementing the designs.
Existing Stanford Newsroom
The existing Stanford Newsroom was just a landing page that linked off to articles on the website. There was no central newsroom repository showcasing articles, photos or videos. The articles tended to be outdated and updated infrequently. The newsroom was not well suited to a world class organization like Stanford Health Care.
Old Stanford Health Care Newsroom Landing Page before the Redesign
Design Solution
Information Architecture
The information architecture for the site is below:
Wireframes & Specifications
Delivery to the Stanford Health Care IT Development consisted of high fidelity wireframes with the visual styles applied, using annotations in Confluence to convey the specification of the design to developers. Designs were developed using Stanford Health Care Website's style guide and components and templates from Adobe Experience Manager. Certain components and templates were customized to meet the needs of the redesigned Newsroom.
Example of Atlassian Confluence Annotations
Newsroom Home Page
The newsroom home page was landing page for the homeroom. The newsroom home page featured 1) a featured article; 2) subnavigation for the Newsroom; 3) an RSS feed of the latest press releases and 4) Media contact information for Stanford Health care.
Article Page
The article page featured the article with a sharing component, bullet points, pull quotes, meta tags, and related news in the right sidebar.
Press Release Landing Page
The press release landing page featured a list of articles sorted by date. This was the pattern also used for Patient Stories, Physician Stories and SHC in the News.
Image Gallery
The image gallery was the pattern used for the image gallery, the infographic gallery and the video gallery. A unique feature that the customer required was a photo collection and a video collection in addition to having individual photos and videos. A collection is a collection of images or videos.
Image Detail Page
The image detail page was the individual detail screen for images. The same pattern was utilized for videos and infographics.
Lessons Learned
Our first inclination as a designer is always to redesign and come up with something new. However, in the case of a highly templatized and componentized website that doesn't have a lot of money for development costs, it is preferable to utilize as much of the available templates and components as possible to cut down on cost of development.
As a ux and product designer, we often have to work within constraints and we need to design around those constraints, imperfect as the constraints are.
