Project: Patient Journey Website

A website was required to guide new patients suffering from a medical condition and their friends and family through information regarding living with the condition and treatment. I developed and wire-framed a user experience alongside functional documentation for use by the project and development teams.

Please browse through the wire frames below to see the journey I developed for this project. Hover or click on a wire frame for more information. Please note that these wire frames have been genericized to protect the identity of the client.

  • Site splash page

    Site splash page

    On arriving at the website, users are presented with a splash page that contains an introductory video about living with the medical condition. They are then asked to select whether or not they are a patient on the medication, as this will affect what articles they are able to see.

  • Site splash page with patient confirmation

    Site splash page with patient confirmation

    If users try to bypass the patient selection buttons, or arrive at the site on another page, a modal dialog stops them and asks them to confirm their status.

  • Home page

    Home page

    The home page is designed to present popular and key articles from the various content sections of the site. These are ordered differently depending on whether or not the user has confirmed they are a paitient.

  • Section landing page

    Section landing page

    Each section on the site has it's own landing page which includes introductory text and teasers of all article in this section. Articles can be filtered by various taxonomies.

  • Exit notification

    Exit notification

    To comply with medical legislation, users are prompted before leaving the website.

  • Content page

    Content page

    Content pages are designed to be flexible and allow editors to build stories from layouts ordered together in rows. This allows many different page layouts whilst keeping consistency with the rest of the site. Related content feeds are populated by comparing other content on the site with the taxonomy of the current page, and ordering by popularity. Editors can override this and push specific content items into this area to control a user's journey throughout the site.

Skills used: UI/UX