Skip to content

Responsive UX design for Marie Curie media centre

I helped Dam Digital redevelop the User Experience for the Marie Curie online media centre.

Media Centre homepage design

Overview

Marie Curie Cancer Care is a registered charitable organisation in the United Kingdom which provides nursing care, without charge, to terminally ill people at home and in hospices.

As part of a client-led initiative to improve the user experience of their website, the media centre area of the existing website was used as a pilot to test a new responsive design and information structure.

Solution

I worked closely with the technical team at Dam Digital along with the digital design team at Marie Curie in their Vauxhall headquarters to develop an interactive HTML prototype.

The purpose of the prototype was twofold. To demonstrate to key internal stakeholders how the new site might work and also to allow the internal team to test the site architecture and functionality through user testing.

Initially the in-house design team modelled the different content types and sketched potential layouts for the different page templates. I then translated those templates into a functional HTML prototype using the front end responsive framework, Twitter Bootstrap.

Within the space of a week the client had a working prototype that they could take into user testing to evaluate the site architecture and functionality.

HTML prototype video walk-through (Bootstrap 3)

Multi-device view of the HTML prototype
HTML prototype: Tablet and mobile view of the Media Centre landing page.
HTML prototype of the press release page
HTML prototype: Desktop view of the press releases listing page.
Desktop view of the HTML prototype
HTML prototype: Desktop view of an individual press article.
Tablet view of the HTML prototype
HTML prototype: Tablet view of the spokespeople page template.
Mobile view of the HTML prototype
HTML prototype: Mobile view of the media centre homepage with the main menu collapsed and expanded.
Marie Curie Media Centre viewed on mobile device
Live website: Mobile view of the media centre showing the main navigation in collapsed and expanded states.
Marie Curie - Media Centre website - desktop view
Live website: Desktop view of the media centre homepage.

Share This Project

If you enjoyed this project, then let others know about it by sharing it.