Natty Boh Drupal Drop

“There aren’t enough words of thanks for Colin and Last Call Media. Amazing site design, fabulous t-shirts, awesome stickers!”

Liz Lipinski, Baltimore Drupal Camp
More Stories

Selected Work Examples

Expand
Enabling continuous improvement by listening to constituents.

Processes
  • Agile/Scrum
Team Leadership
  • Art Director
    Colin Panetta

Feedback is of the utmost importance to the Commonwealth.

The highest priority of the Commonwealth of Massachusetts is serving its constituents as best it can. Essential to that is feedback—hearing directly from constituents about what they’re looking for, how they expect to find it, and where any improvements in that journey can be made.

We partnered with the Commonwealth to design a component for Mass.gov that would gather useful feedback from constituents, and another component that would display that feedback to all 600+ of the site’s content authors in a way that maximizes their ability to make improvements.

Watch Collecting and using feedback on Mass.gov, a session about this project presented by Colin Panetta of Last Call Media and Joe Galluccio of Massachusetts Digital Services at Design 4 Drupal below, or scroll down for our written case study about it.

Getting feedback from constituents to site authors.

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.

A sketched figure in an unsure pose stands in front of a tall stack of blocks, each labeled with a step in the feedback process.
Too many steps at once can be daunting.

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.

Blocks of increasins size are lined up to form steps. Each block is labeled with a step in the feedback process. A sketched figure climbs the steps.
A step by step approach can make large workflows more palatable to users.

Designing the feedback form

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

Feedback box asking users is they found what they are looking for. After question is yes/ no radio button and submit button.

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.

Feedback form asking users if they found what they were looking for, with a larger text field below asking them what they were looking for and a radio button asking if they'd like a response, followed by a submit button.

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. 

Website component thanking users for their feedback, offering them a link to contact the RMV, and asking if they would like to take a survey.

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.

Survey asking for more detailed feedback from users.

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!

Component thanking users for submitting their survey, and giving them a button to press if they would like to join the user panel.

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.

Website component titles "Content that needs attention," with description area explaining component to users, and a table displaying a list of content.

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.

This feedback component collects around 30,000 pieces of feedback in a single month. Issues reported by users include missing or hard to find content, mistakes, or issues with the service itself. That feedback is used by Mass.gov’s 600+ site authors to continuously improve the delivery of their vital services to the constituents of Massachusetts.

Expand
Branding Computational Cardiology.

Processes
  • Agile/Scrum
Team Leadership
  • Senior Producer
    Colin Panetta

Telling the story of the personal virtual heart.

Last Call Media partnered with the Computational Cardiology Lab at the Institute for Computational Medicine at Johns Hopkins University to establish a unique and approachable identity and website design for their very technical work. This work was completed in only two design sprints.

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.

Three aesthetic directions designed for this project.
The three initial aesthetic directions we mapped out for this project.

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.

Three early iterations of the heart illustration used in the site design.
Evolution of a heart.

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.

The final logo design for this project.

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!

Driven by the need to have a compelling presence in place for the year-end graduate student application season, Last Call Media worked within a tight timeline to design a new logo and a distinctive and approachable visual experience that showcases the lab’s groundbreaking work with illustrations that were drawn by hand in-house. The project completed in two agile design sprints.

Expand
Fun and impactful design for inclusive tech event.

Team Leadership
  • Senior Producer
    Kelly Albrecht

The New England Regional Developers Summit (NERDS) came to Last Call Media for a site design that would support their inclusive, educational agenda for their upcoming 2017 event.

Strategy

Last Call employed a few different site strategies in order to best serve NERDS and their users. First, we boiled their content down to short bursts that either told site users everything they needed to know or linked them to where they need to go to complete an action (like signing up for the email newsletter or submitting a session).

We then decided to present each of these pieces of content in a slide of their own, leveraging this modular strategy to organize content depending on audience. We made sure that each slide was flexible and could be updated as needed as the event draws nearer (as “Submit a Session” turns into “Session Schedule,” for example).

Lil NERDy

To give NERDS an immediate, personable (and literal) face, we decided to develop a mascot. The feel of the NERD logo evoked the 70’s to us, and we decided to use Mr. Men, one of that era’s most famous cartoons, as inspiration. The result was Lil’ NERDy. Lil’ NERDy is memorable and adaptable, meaning she can be used in a variety of ways at any size to instantly remind people of the friendly and inclusive nature of NERDS.

Round, green cartoon character with glasses.

 

Site Design

Using Lil’ NERDy as an asset, the site strategy was then implemented to produce a bold, fresh site design. The design uses strong typography and bright colors to create an impactful and informative experience.

NERDS Homepage design.

 

NERDS walked away with a fun, efficient site that keeps users informed and delighted as their event draws closer.

Expand
Branding and design for site and event collateral.

Processes
  • Continuous Delivery
Team Leadership
  • Art Director
    Colin Panetta

Last Call Media makes it a priority to give back to the Drupal community, so we were excited when the nice folks at Baltimore Drupal Camp reached out to us for branding and design.

Getting alignment

For the discovery phase, we had some in-depth conversations with the team at Baltimore Drupal Camp about design trends on the web, and which ones we wanted to explore for this project. We decided that the designs should express both the historic and the punk sensibilities of Fells Point, the neighborhood the event was to take place in, while also paying homage to Frederick Douglass, as the venue was the great Frederick Douglass-Isaac Myers Maritime Park.

Drupal Boh logo

Baltimore Drupal Camp had in previous years done a few mash-ups of the Drupal and National Bohemian logos in previous years (the National Bohemian logo being the unofficial logo of Baltimore), and we were excited to try our hand at it. We produced a clean, durable logo that was used in all our subsequent material and that the Baltimore Drupal Camp also adopted for use across their social media platforms. Baltimore’s own Not Mr. Boh even gave it a shout-out on Twitter.

The Drupal and National Bohemian logos combining into the Drupal Boh logo

Illustrations

In order to capture the historic and punk aspects of Fells Point that we discussed during discovery, we produced a series of gritty, vibrantly colored illustrations for use as visual assets on the site.

Illustration of a raven holding a feather in its mouth

Illustration of Fells Point

Illustration of a historic shipSite Design

Taking both the direction we established in discovery and the assets we generated, we produced a design deliverable for the Baltimore Drupal Camp website. Because the site would change so much as the event got closer (and “Submit Your Session” became “Schedule”, among other changes) we needed to deliver a wide-ranging design that would account for multiple versions of the site.

Designs for the Baltimore Drupal Camp site

Portion of Baltimore Drupal Camp site design that includes Frederick Douglass
We included this powerful quote from the great Frederick Douglass in the site design.

We worked with the team at Baltimore Drupal Camp while we created the designs and formatted them for handoff, enjoying a productive information exchange about tools and process while we were at it.

There aren’t enough words of thanks for Colin and Last Call Media. Amazing site design, fabulous t-shirts, awesome stickers! You are Drupal!

Liz Lipinski, Baltimore Drupal Camp

Event Material

We were thrilled to see the aesthetic and assets we generated for this project in use on event collateral on the day of the camp itself. Congrats to the Baltimore Drupal Camp on a successful 2016!

Baltimore Drupal Camp stickers with Drupal Boh icon

Baltimore Drupal Camp shirts with historic ship drawing

Room at Baltimore Drupal Camp with sign

Birds of Feather sign at Baltimore Drupal camp with raven illustration

Get in touch!

888.788.7177 | Join our team