ILD-IN

Designing and building a promotional site and resource library for a specialist nursing network.

Team
Paul Brophy

Deliverables
High-fidelity prototype
Wordpress driven site

Timeframe
1 month (2017)

ild-in-home-ipad-b
ild-in-conference-ipad-w

Project Overview

The ILD-IN is a network for nurses and healthcare professionals in the highly specialised area of Interstitial Lung Disease. The aim of the project was to promote the organisation and provide a central point for support and information.

I met up with Nurse Specialist Julie Hocking and Respiratory Physiotherapist Laura Bygrave in a discovery workshop. As you would expect, nurses are busy people and they wouldn't be around for regular meetings. Being time-efficient was critical for success.

ild-speaker-card@2x
ild-member-profiles@2x
ild-tweet@2x-2

Top left: The visuals for the project came together in small components. Getting one right meant I'd be able to carry that same style through to other components, cutting down on time and feedback.

Bottom:  Twitter is the main outlet for the network's news. They were keen on this being in a prominent place.

Irregular shifts, regular feedback.

We decided on small chunks of regular feedback using Adobe XD's in-app commenting, which would allow us to keep it concise and to the point, and meant it could be posted overnight. This allowed me to work on the site in modules, steadily building components that would eventually amount to a system. I'd later use parts of this to help the site admins generate imagery.

Ticketing and a creeping deadline.

The site had to launch before the next conference. Tickets for which were due to go on sale within the next few weeks. Budget meant there wasn't going to be more people to throw at it. There were going to be trade-offs. We agreed to launch using 3rd party ticketing, with a custom system being added at a later date.

ild-hex-feature@2x

Identifying the right problems to work on

Through the workshop I uncovered 3 main problems that I could work on within the timeframe;

  • The network relies on a membership fee, but there wasn't a clear reason to justify one. It wasn't clear who or what the network was for.

  • There was no fixed place to make the material from past conferences available. Members each had their own portals to post their respective academic materials, making them impossible to link to and organise.

  • The committee is made up of a rolling roster of existing network members who spend a relatively short time in that position, making updating the site and library a constant issue.
<div id="outer-wrapper">
  <section id="type-area">
    <span class="sub-text marker">03. ACT</span>
    <h1>We act as a professional body that can influence policy practice throughout the UK.</h1>
    <a class="sub-text">MORE FROM OUR MISSION STATEMENT</a>
  </section>
</div>
*{
  margin: 0;
}
body{
  font-family: 'pragmatica', Roboto, arial, sans-serif;
  font-weight: 300;
  color: #2E2974;
  height: 100vh;
  padding: 2em;
}
h1{
  height: 350px;
  font-size: 62px;
  font-weight: 300;
  line-height: 1.25;
}
.cursor{
  border-right: .05em solid;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}
.sub-text{
  display: inline-block;
  margin: 3rem 0;
  font-size: 0.875rem;
  line-height: 1.2;
  color: #7D85EB;
}

#outer-wrapper{
  margin: auto;
  max-width: 970px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#type-area{
  width: 100%;
}
document.addEventListener('DOMContentLoaded',function(event){
  // array with texts to type in typewriter
  var dataText = [["01. INFLUENCE", "We influence improvement and developments in ILD care."], ["02. COLLABORATE", "We encourage collaboration with all multi-disciplinary ILD specialists."],["03. ACT", "We act as a professional body that can influence and practice in ILD care throughout the UK."],["04. PROMOTE", "We support and promote equality in service provision for patients with ILD and their carers throughout the UK."],["05. PROVIDE OPINION","We provide expert opinion to raise the standard and provision of ILD care."],["06. SUPPORT", "We provide a supportive network for members to encourage information sharing, best practice and research collaboration."]];
  
  // type one text in the typwriter
  // keeps calling itself until the text is finished
  function typeWriter(text, i, fnCallback) {
    // chekc if text isn't finished yet
    if (i < (text.length)) {
      // add next character to h1
     document.querySelector("#type-area h1").innerHTML = text.substring(0, i+1) +'<span class="cursor" aria-hidden="true"></span>';

      // wait for a while and call this function again for next character
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 50);
    }
    // text finished, call callback if there is a callback function
    else if (typeof fnCallback == 'function') {
      // call callback after timeout
      setTimeout(fnCallback, 5000);
    }
  }
  // start a typewriter animation for a text in the dataText array
   function StartTextAnimation(i) {
     
     let currentMarker = document.querySelector('#type-area .marker');
    
     if (typeof dataText[i] == 'undefined'){
        setTimeout(function() {
          currentMarker.innerHTML = dataText[0][0];
          StartTextAnimation(0);
        }, 20000);
     }
     
     // check if dataText[i] exists
    if (i < dataText[i][1].length) {
      currentMarker.innerHTML = dataText[i][0];
      typeWriter(dataText[i][1], 0, function(){
       // after callback (and whole text has been animated), start next text
       StartTextAnimation(i + 1);
     });
    }
  }
  // start the text animation
  StartTextAnimation(0);
});

An initial idea for a "ticker" reinforcing the network Mission Statement.

Why proper research saves time.

The timeframe meant we didn’t have time for research on actual users - professionals within the network. Predictably - this meant I made a misstep with the aesthetic approach in the first round.

Clinical and professional was correct, but fundamentally the members are in the business of caring for other people, and my initial approach was too cold and corporate. There needed to be a more human element – more warmth.

ild-rejects

The initial round of rejected ideas that didn't quite capture the warmth of the network.

Setting up a drag and drop exporting system made it easy for the staff to generate images for the site.

A platform to help the time poor.

Each member would be responsible for updating their own information. The nature of their work means they don't have time to learn a complex system. The solution would need to be visual, intuitive and forgiving, but also something that could be picked up easily by incoming committee members. There was an additional headache of having to accommodate older browsers like IE8.

I used Wordpress's native custom post types to save the admin UI from becoming cluttered with 3rd party plugin interfaces. This brought the added benefits of following conventions the staff were already used to, and being much more predictable to style in the front end.

Adding images should be easy.

Another challenge was giving staff the power to repoduce the design's imagery. I'd used the hexagon as a reference to the logo, but also to hide the shortcomings of the candid, poor quality photos. I came up with a solution in Adobe XD that could be used to position, crop and export images that were the correct size to go straight into the site. Drag, drop and export – done!

ild-events-ipad-b@2x

From the outset I avoided using plugins which can make the admin area cluttered and disorganised. Using custom post types solved this problem, but also made styling the front-end much more straightforward.

Wrangling members and their resources.

One of the main draws of the network is the annual conference, where industry experts share their findings. Sharing these resources post-conference was a big problem. It was extremely difficult for the site admins to link to each individual, as at the time there were 200 members spread across the globe. Additionally, many speakers needed the option to keep their resources out of the public domain.

I designed and built a profile area for each member where they'd be able to organise and publish their own resources. This allows materials to be instantly available to subscribers after conferences. The network would also be able to push personal profiles as an additional benefit to being a member.

Project outcomes and conclusion.

It was tough going, but I managed to deliver the project on time and with a few extra sprinkles of functionality! A good takeaway was working on building up a design system on the fly, and I now adopt an approach similar to this in my own projects. The biggest success was our communication loop, which meant they didn't have to spend extra time travelling, and keeping in close contact with Julie kept surprises to an absolute minimum.

Copyright © 2017–2020 Paul Brophy