If you’ve ever lived, studied, driven through, or worked in RI, you’ve likely seen their billboards or come across their drives. If you’ve never ventured to the land of Coffee Milk and Del’s Lemonade, it’s worth knowing that RIBC is the only organization collecting life-saving blood and blood products in the state of Rhode Island. Their life-saving collections are distributed widely, to New England hospitals and leading national institutions like Walter Reed National Military Medical Center.
This project’s scope was massive – we were tasked with completely redesigning a website that had been built for a different era of the internet and bringing it up to a new, modern standard that would supercharge collections. It’s not every day that our web development projects actually save lives, so we’ll freely admit that this challenge did cause our blood pressure to rise (get it?).
It was from this basis that we set off on a 5-month journey to bring RIBC into the 21st century. The process proved to be very fun and extremely rewarding. For a project of this size to go well, it’s all about the team. In this we couldn’t have been luckier – Kara, Kathy, Matt, Scott, Dave and the rest of the team at RIBC were amazing partners through thick and thin.
Phase 1. Discovery
We knew that a thorough discovery process was essential to successfully redesign the user-experience and architecture of RIBC.org. RIBC is a complex organization serving a wide range of audiences including donors, hospitals, health systems, governmental agencies, other blood centers, and more. To ensure that we got the experience right for all of these audiences, our discovery included:
- Key stakeholder interviews
- Industry/peer audit
- Ideation exercises
- Audience persona identification & prioritization
- Technical project assessment
- Content audit
- Content strategy discussions
Phase 2. User Experience & Content Architecture
With discovery in hand, we had all of the information that we needed to begin architecting the user experience. We began by developing an updated sitemap that made the content user-friendly, and provided for easy navigation for the all of the website’s audience personas. Our user experience and content architecture steps for this project included:
- Sitemap redesign & content architecture
- Storyboarding – two days of in-person whiteboard sessions where we built the storytelling and content flow for each page of the site.
- Interactive wireframes – using UXPin, our preferred UX/wireframe building tool, we created wireframes for every page of the site based on the storyboards. We gave Kara, RIBC’s marketing manager, access to UXPin where she was able to see the page layouts, add content and make comments/requests right in her browser.
Phase 3. Design
With final, approved wireframes in hand, we designed two visual concepts for the site, different “skins” for the approved wireframes. From these concepts, the final direction was chosen by the RIBC team and we proceeded into development.
Phase 4: Development
We audited and considered 4 CMS options for this project: WordPress, ExpressionEngine, Drupal 7, and Drupal 8. We performed a comprehensive assessment of the comparative strengths and weaknesses of each CMS for this particular project, and eventually determined that Drupal was the best fit for 3 reasons:
- Drupal boasts a superior back-end user experience that we knew would be great for a hands-on client
- Drupal is an open-sourced platform that is supported by the world’s largest active developer community
- Drupal offers major security advantages over WordPress
The Final CMS Decision – Choosing Between Drupal 7 and Drupal 8
Once Drupal was selected, the last remaining technical decision was which version to choose – Drupal 7 or Drupal 8? We chose Drupal 8 because we felt that the benefits of the latest Drupal architecture and the totally responsive back-end CMS experience were too important to pass up for this project. Our Drupal developers were also excited to start using Drupal 8’s new developer tools, including object-oriented coding principles and the Twig templating system. Given these benefits and our excitement to get our hands dirty with the new Drupal, we proceeded with Drupal 8.
After the CMS decision was complete, we were ready to start building.
Building a custom Drupal 8 API integration with eDonor
One of the most challenging aspects of the project was designing and implementing a new appointment booking functionality for RIBC, one that would display real, up-to-date drive information directly from eDonor that would allow donors to select and book an available appointment. This was something that RIBC had never offered donors before on their site.
This eDonor API Integration would streamline appointment booking and dramatically improve the donor’s experience, hopefully resulting in more appointment bookings!
After months of hard work, we launched the newly redesigned RIBC.org website on March 28th. Within just a couple hours of launch, users were already booking appointments, which was extremely exciting for all involved! So what are you waiting for? Make an appointment today to donate blood!
To talk to us about building a custom Drupal 8 website for your organization, email firstname.lastname@example.org