Design to turn a vision into reality

We began by really thinking outside the box of what a college website “should” be. The institute was looking to showcase their commitment to innovation, diversity and inclusion, as well as exceptional educational experiences. Last Call Media collaborated with the Wentworth team to create their new branding direction and to turn this vision into reality. The Last Call Media design team created a fresh, vibrant new look for wit.edu to capture the attention and excitement of the school’s two key audiences: prospective students and their parents.

After translating existing static graphic designs into UX/UI prototypes with an eye towards accessibility, we introduced the Wentworth team to a new and improved method of designing and site-building by utilizing a design system, so that the site could be built in a systematic way as opposed to every page being conceived of and built individually. This way of building the Wentworth site would set us up to create a great-looking site while having an efficient development phase, and playing to Drupal’s strengths, flexibility and customizability.

A consistent, sitewide visual language

To avoid the need to uniquely design and theme every element on every page, Last Call Media created a maximally efficient workflow for Wentworth. We created a consistent sitewide visual language that becomes more intuitive the more users interact with the site.

We implemented a design system-based strategy for the redesign, defining a number of styles and components that would be reusable throughout the site. It included:

• 40 styles (for things like colors and text styles),
• 50 elements (which can range in scope from things like buttons to entire sections of pages),
• 10 fully-responsive page designs—many of these involving multiple design iterations.

Authoring experience for hundreds of content creators

Within an organization like a college or university with often hundreds of content authors, it’s key to remember that site and content changes will often be coming from multiple people throughout the school, who all have varying levels of experience and comfort working within a CMS. This was absolutely the case for Wentworth, and so we varied the flexibility of each content type based on who would be building them. Content types that would be handled by the more experienced members of Wentworth’s web and marketing teams were allowed maximum flexibility—they can essentially put any component on any page they want, in any order they want. Content types that would be used by a wide array of authors with inconsistent levels of technical expertise offered a more structured layout, in order to minimize complexity and maintain the integrity of the website’s information architecture and UX/UI.

The impact of continuous delivery and maintenance

Over the years, we’ve worked with Wentworth to implement industry best practices in terms of programmatic coding, database architecture, and staged deployment and automated testing workflows. Our first engagement with Wentworth involved completing a large set of outstanding updates, setting up Single-Sign-On with Shibboleth, configuring Apache Solr with multicore for development along with boosted “more like this” search results, and other search enhancements.

Our Core Services team was also able to complete Wentworth’s site migration to Pantheon on a tight timeline of less than a week, prior to the school’s Thanksgiving holiday in 2017. This has led to significant cost savings for the school, and provided a clearer path to empowering their small internal development team; the workflows on the new platform were easier for Wentworth to manage, and they benefited greatly from the multidev environment feature.

Our work with the Institute has spanned everything from regular core and module updates, migrating their site to a new hosting platform, to refactoring user groups, URL structures, to accessibility updates and SEO best practice improvements. We maintain a close working relationship with Wentworth in order to continue offering advice and guidance on how to make the most of Drupal

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.

Discovery

The success of Mass.gov hinges on getting the right feedback from constituents to site authors. Our first step in overhauling the way Mass.gov collects feedback was to define what we needed to know about each page in order to improve it, so we could design the feedback component around that. It consisted of the following:

• Whether or not users found what they were looking for, and what that was.
• Contextualize the above by knowing how satisfied users are with the page, and what they came to the site to do.
• Very detailed feedback that could only be provided through their user panel, a list of nearly 500 constituents who have volunteered to test new features for the site.

With our broad goals defined, we wanted to make sure the feedback component was working on a more granular level as well. We conducted a series of interviews with site authors asking how to best reach their users, and gained some valuable insight. Here’s what they told us:

• Too much information in the feedback form would scare users away.
• Feedback was being submitted with the expectation of a response, and organizations wanted to be able to respond.
• But, not all organizations would be able to respond, so a variety of contact options needed to be available to them.

Strategy

We combined what we learned above with our best practices to make a set of requirements that we used to define a strategy. It was immediately obvious that this feedback component needed to do a lot! And like site authors told us, if we showed that to users all at once, we might scare them away.

So to maximize the amount of responses we’d get, we decided to lower the effort for submission by presenting these options one at a time, starting with the step that takes the least amount of commitment, and increasing with each step. So users can submit a little bit of feedback, and then opt into submitting a little more, and then keep going.

Designing the feedback form

With a clear strategy in place, we designed the following component.

On first load, the component is very simple — it’s only asking users if they found what they were looking for.

Once users have made a selection, the component expands with fields asking them what they were looking for.

Site authors have the option of including an alert here that tells users this form is not for urgent assistance, and directs them to a better place where they can do that.

In the above example, the organization who is responsible for this page is able to respond directly to feedback. So if users say they would like a response, a form opens up for them to enter their contact information. If the organization was not able to respond directly to feedback, a brief explanation of why would appear there instead.

 After submitting, users are thanked for their feedback. 

Seen above, organizations are given the option to link to their contact page. This is commonly used if the organization is unable to respond directly to feedback.

Users are then given the option to take a short survey, where they can provide more detailed feedback.

After submitting the survey, users are given the opportunity to join the Mass.gov user panel. This is the largest commitment available for providing feedback, so it’s at the very end!

So that’s how feedback is collected on the site. But what happens to it after that?

Displaying feedback to site authors

Feedback submitted through the site can be viewed per node, i.e. a site author can go to a specific page through the backend of the site and view all the feedback submitted for that page. But a lot of feedback can be submitted for a single page, and on top of that, site authors are often responsible for multiple or even many pages. Combing through all that feedback can be a prohibitively daunting task, or simply not possible.

To help with this, we designed the “Content that needs attention” panel for site authors.

The “Content that needs attention” panel appears on the welcome page on the backend of the site, making it one of the first things site authors see after logging in. It displays the page titles of their 10 pages with the lowest scores from users, sorted by page views. By showing site authors their content that’s seen by the most people first, we’re helping them prioritize what to work on next.

We’re giving site authors additional information about the content right in the component, helping them make decisions at a glance. In addition to the aforementioned page titles, scores, and page views, we’re showing them the content type (since some titles can be very similar on this site), the date they last revised it (in case that helps them know how badly this content needs attention), and something a little surprising… a “Snooze” button!

We put a snooze button in because once site authors make an improvement to content, it’s no longer helpful for them to see it here. So, the way it works is that they make an improvement to content, then hit “Snooze,” and it’ll disappear from this list for one month. At the end of that month, one of two things will have happened: 1) the content will have improved enough to no longer appear on this list, or 2) the content needs more improvement, and will appear back on this list.

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!