Solutions.

The Trayanova Lab of Computational Cardiology represented a rare intersection of art and science.

Discovery

During discovery, which consisted of an extensive on-site meeting, we learned a few important facts about Computational Cardiology that served as guiding lights for the design work we did with them. First, we learned about what they do. In a nutshell, Computational Cardiology creates virtual models of hearts that can be used for diagnosis or study. (Saving everyone the messy business of taking real hearts out of people’s bodies which can be, let’s say, not particularly healthy for the subject.) Here’s an Endgadget article about one of their recent studies.

Computational Cardiology uses design as a tool to set themselves apart from their peers and get attention drawn to their important work.

Our second big takeaway from discovery is that Computational Cardiology places a high value on design, a quality they told us can be rare in the scientific community. As such, Computational Cardiology uses design as a tool to set themselves apart from their peers and get attention drawn to their important work. And beyond just good design, they wanted a distinctive, exciting look. The leadership at Computational Cardiology has a keen eye for art and fashion, and they felt it was important that this sensibility be reflected in their identity. This was music to our ears!

Getting alignment

With all this in mind, we developed a few aesthetic directions that we could use to get creative alignment. These directions mostly represented Computational Cardiology’s identity using the bold, artistic direction they expressed to us, along with some more conservative elements to make sure a full range of choices was available for consideration. After quickly responding to some of the bolder directions, we selected the elements we thought worked especially well and went to work developing a unified direction based around them.

Our work has heart

One of those elements was a graphite illustration of Computational Cardiology’s computer models of hearts. That drawing would go through multiple iterations before taking the final form seen on the site, all of which can be seen below.

Designing a logo

Our Creative Director Nolan was able to quickly design a thematically dense logo in a very short amount of time. The heart icon, rendered with angles to reinforce the theme of technology, is surrounded by brackets, indicating that the heart is made of computer code. Those brackets also represent the two “C”s of Computational Cardiology and the negative space between them creates a cross, a symbol commonly used to indicate healthcare.

Building the site

Throughout the design process we remained aware that Computational Cardiology would be building the site themselves, and frequently checked in with their in-house developer to make sure we weren’t designing anything that would be problematic for them. After the designs were complete we provided them with the assets they’d need to build the site, which they did using the service Webflow. That the final, developed version of the site (which can be seen here) is so faithful to our designs is a testament to both their developer’s skill and the robust functionality of Webflow!

The project had humble beginnings. WPI had a lot of ideas, which they’d translated into a giant content model spreadsheet. We meticulously ensured that we understood it all, guiding a wireframe process in which we were able to make significant contribution to the decision-making that yielded a highly intuitive structure. We took each step iteratively, building piece-by-piece, soliciting feedback, and then building the next iteration. We facilitated a dialogue between administrators, college communications, their design department, their IT department, and Acquia to map the landscape of business requirements, organizational needs, and their desired design aesthetic.  

On the technical side, we reviewed their existing RedDot site, and built a ‘scraper’ to scrape select content out of it and import the data into its new structure in Drupal. We open-sourced the scraper, too. Next, we built a flexible layout system of building blocks that enabled them to build pages however they needed. We dubbed them “widgets,” and WPI called them “elements,” but they were central to satisfying their desire for incredible flexibility that allowed them to build unique layouts on any given page.

As part of the creative partnership, Last Call Media’s creative team worked closely with WPI to improve the look and utility of the Events Pages, the Calendar, and a database of accolades they maintain. The outcome was a set of tools that present information in simple and digestible ways. WPI’s communications team helped LCM fully understand their brand, which enabled us to showcase their identity as we applied it to the work product.

Every step of the way as we constructed functionality, WPI developers, content authors, and staff gave feedback on the project as fidelity increased from a rough, unthemed Drupal site, to a polished release candidate. At the same time, Last Call Media was enabling WPI Developers to be self-sufficient in Drupal so they could help build new functionality. Last Call Media also built a custom ‘faculty importer’ that synced data from their Ellucian Banner system into Drupal, greatly simplifying the construction and accuracy of faculty pages.

Because we were in constant contact, there were never any ‘big reveals’ for WPI leadership to react to that represented hours of work they had to wrestle with approving or sending us back to the drawing board - they’d been part of the process at two week intervals and on board with each decision as it was made.

We used our expertise in Agile methodologies to bring order to complexity and the product to launch. We began by building and prioritizing a backlog of tasks, and getting high-priority tasks into a ready state by defining appropriate definitions of done. We focused on implementing strategies for limiting the work in progress present in the project when we started. We forecasted a few sprint goals, informed by our backlog development and resulting strategies, and quickly went into heavy development.

Immediate visibility for stakeholders into development progress became of major importance for their own ability to make quick business decisions concerning their investment. In order to maximize the value of the work, we adapted our initial Scrum iteration approach into shorter, one-week sprints of continuous delivery to get small groups of completed tasks out faster. This soon evolved into more of an ideal Kanban flow, allowing a continuous awareness and continuous delivery of the right value.

We developed a faceted search tool for their degree and certificates catalog to solve the challenge of drilling down through the options to get to a specific area of study. By structuring and categorizing the information of this catalog appropriately in the database, we were able to implement faceted searching functionality for the areas of study across Bachelor, Minor, Certificate, Master, and PhD programs.

Working with PVPC 

We took the project from initial discovery and strategy through information architecture, design, and development. We were able to deliver a compelling, modern, and effective design, with PVPC’s target users in mind. Our discovery and strategy informed a new design for improved site navigation and menu structure, re-working the existing navigation system to create a more fluid experience visiting the site.

LCM and Amherst College worked together with student advocates, Title IX, LGBTQ, and other campus offices and organizations to design and develop an iOS App that puts valuable information, from a Drupal site Amherst can administer, into the hands of students. The major feature of the app was to direct assault survivors to emergency contact information, help services, and other advocacy groups, anonymously and quickly.

Goals

We wrote a list of goals for our user testing that included learning about user behavior, whether the site was intuitive to navigate, whether free trials were easy to find, and what users thought about the new design. We worked with the team at Blackboard to define these goals and to ensure we were all on the same page about what we would hope to learn from these interviews. We then constructed our interview questions around meeting these goals, asking users to complete tasks that would ultimately give us the necessary insights for the next phase of work.

Testing setup

On-site at BbWorld, we used Formstack to conduct our user interviews. This gave us an adaptable setup that enabled Blackboard staff to conduct testing right alongside us, even though many of them had never done so before. Speaking directly to users about the site gave Blackboard staff a higher level of empathy with their users than if they had just read a report, giving them deeper insight into how users viewed the site. We also made screen recordings of our interviews, for later reference.

The BbWorld attendees we interviewed consisted of institution technologists, instructors, academic leaders, corporate partners (resellers, ed tech vendors), and trainers, mostly in higher education, as opposed to K-12, government, or business. Most were influencers or decision-makers when it comes to purchasing education software for their institution—a valuable perspective to be sure! In the end, we facilitated almost 70 total interviews over just a couple of days! 

There were a number of initiatives in place to encourage people to test the site. These included push notifications from the BbWorld app, a $15 Starbucks gift card that was given at the end of the testing, and an event-wide “passport” attendees could only complete by visiting our table. Most of the people we spoke to came to us for one of these reasons.

Learning about the old site

The majority of people we spoke to at BbWorld said they had used Blackboard.com before. We were particularly interested to hear from these experienced users, so we could establish a baseline experience using the old site, to later compare their experience using new site. Measuring these experiences against each other would tell us whether or not the restructure and retheme was an improvement. For example, if someone used the site for gathering specific information about Blackboard, did the new site make it easier or harder for them to do that?

Here’s what that baseline experience looked like:

• Half of the people we spoke to said the current Blackboard.com was easy to use, with a quarter each saying it was hard or neutral.
• Most common uses for the site included navigating to Blackboard’s Community site, reviewing the Higher Education section for language on products, or seeking help or support.
• Finding things or navigating the site were listed as the most common difficulty, although some thought it worked well!
• Opinions about the navigation were mostly negative.
• Testers felt that site was clean, but some thought it presented too much information.
• Most people said they access the site by typing the url in their address bar. (A sure sign of an experienced user!)
• Almost universally, people accessed the site from a desktop computer.

Learning about the new site

Moderated user testing is often the first time people outside of your team sees your product. While this can be daunting, it’s important to be open to constructive criticism big and small—after all, that’s the point of user testing! So while we were prepared (as always) for negative feedback, the overall response to the new Blackboard.com was extremely positive. Whew!

While we walked into testing thinking that, visually, the new theme was more of a small facelift than a full redesign, people were enthusiastic about the design of the new site. Before we could even ask about the design, many people immediately stated that they thought it was a big improvement, using words like “clean,” “modern,” and “professional” to describe it.

Many people also liked the new navigation structure. Comments about it included “All the overwhelming links are gone. Now I can digest what the navigation is offering. It’s highlighting the important information,” and “Navigation is simplified and to the point. More intuitive and easy to navigate, it will take a shorter time to get to what I want.”

Despite having a high level of familiarity with Blackboard, two thirds of the people we spoke to said that they learned something new about Blackboard during their brief time on the new site. Blackboard is working to let the public know that they’re more than just an LMS, so we were happy to hear the site is now aiding in that. Blackboard’s recruiting, safety, and social media management services were among the things people most commonly cited having learned about. 

After performing a few tasks on the new site, half of the people we spoke to said the new site was easier to use than the old site, with a quarter each saying it was harder or the same.

But of course there was still room for improvement. Things that people thought could be improved included:

• Many people thought the site wasn’t doing a good job of explaining who Blackboard is and what they do.
• While the new navigation worked well for many people, some expressed confusion over the specifics of what it was presenting. Specifically, they were unsure what was a product and what was a service, and confused about the word “community” being used in two different places to indicate different things.
• Users would often miss the button for free trials, sometimes not seeing it at all until we pointed it out.

Results

The thing that gives our partners the most pause when pulling the trigger on user testing is that you don’t always know what the results will be ahead of time. How can you justify dedicating time and resources to something when you don’t know what you’re going to get? But that’s the point of testing—to find out things you don’t know. We’ve never walked away from testing without valuable insights that went on to inform the rest of the project, and our Blackboard testing was no exception.

One small but impactful result was that we changed the color of the free trial CTA. We made this pivot quickly in the middle of testing, which enabled us to gauge the impact immediately. People started noticing the button more, and thus the issue was resolved immediately — no muss no fuss! It was gratifying to have something so small make an immediate positive impact and we all laughed at how long we chatted about that button color prior to testing! Post-launch, this CTA is used six times more than it was before the redesign, and the page it links to is now the third most viewed on the site, leading more users to this essential content.

Following user testing we did an extensive redesign of the homepage, and the feedback we received stating the site should tell users who Blackboard is and what they do was our guiding light. The new Blackboard homepage is a top to bottom narrative that tells the story of Blackboard starting with a broad overview, then moves into some specifics, and then shows what Blackboard does in action. Post-launch, Blackboard has seen a decrease in the bounce rate of their homepage, meaning more users are engaging with it.

What we learned in user testing also informed the new site navigation. The site structure had been massively rearranged, shifting from being market-based to value-based. The feedback we received about certain parts of the navigation being unclear helped refine the language used. Post-launch, more Blackboard users have been getting to their destination in 0-2 clicks, meaning they’re using the new navigation to find what they’re looking for faster.

The insight that user testing provides can come in the form of reassurance. Since people were enthusiastic about the new site being easy-to-use, we could move forward with the confidence that there were no big missing pieces. Furthermore, since the new theme was so well received, we realized the visual changes provided a larger impact, shifting our perception of it from being a “facelift” to something closer to a redesign.

The twenty-fifth anniversary year is an important one for advancement activities. Alumni have generally attained career and financial stability by this time, and it is an important moment in which to encourage a lifetime habit of giving to Amherst College. Amherst needed an accessible and compelling visual that would explain a complicated funding program. Working within existing guidelines and style templates, we worked with the Annual Fund to build a tri-fold brochure that plainly communicated the benefits and procedures of giving during the five years leading up to and including an alumnus’ twenty-fifth anniversary reunion year.

Haverford didn’t need a redesign; their site looked great already. The biggest issue they needed to solve was not having enough time to do new feature development themselves. They were a smart and capable team and over many years had developed and maintained a large custom PHP implementation for college’s website needs. They were finding, however, that too much of their time was being spent updating pages for college members and groups. Their hope was for us to build them a site that looked and functioned like their current site, but built on a modern CMS with exceptional user management and publishing workflows.

Once we had alignment on their needs and a strategy for solutions, we built out a Content Model, Product Backlog, and Information Architecture. The project was completed with Drupal in steady collaboration with the Haverford Communications team, in 5 development Sprints, and launched on the Acquia Infrastructure.

The Haverford Team really jumped in and took off with it. It was really great!

You can read more about this project as LCM’s Acquia Certified Grand Master Developer, Jeff Landfried shares details of his experience here.