We're proud to provide Design services.

Expand
Improving the Drupal authoring experience.

Processes
  • Continuous Delivery
Team Leadership
  • Senior Producer
    Kelly Albrecht
  • Senior Architect
    Colin Panetta
  • Art Director
    Colin Panetta

In our engagement with Mass.gov, Drupal is essentially the product being developed and operated in.

So we had to ask ourselves, “In what ways can we make Drupal better for our customers, to give them a better experience, get better feedback from them, and build that relationship?”

The Commonwealth of Massachusetts embarked on a large-scale web replatform to modernize and make it easier to continuously improve the way the Commonwealth engages with and provides services to its constituents online. By improving the user experience for its constituents, and providing, as comprehensively as possible, a “single face of government”, Mass.gov® has become an essential platform in the Commonwealth’s ability to serve its constituents by delivering information and critical day-to-day social services to the Commonwealth’s 6.8 million people. With 15 million page views each month, the Mass.gov platform hosts over 400+ government agencies and content to support anyone who wants to move, visit, or do business in the state. All of which is fueled by the Commonwealth’s 600+ content authors, who have been able to use the platform to improve constituent satisfaction, making a noticeable positive difference on how the public sees their organization and the services they provide.

As early adopters of Drupal 8, Mass.gov and its ecosystem of web properties are the primary platforms for the delivery of government services and information in the Commonwealth of Massachusetts.   

Wicked awesome content

The Commonwealth of Massachusetts was faced with a difficult to use web experience that stood in the way of a constituent base that wanted to interact with government services through the web. The goal was set to create new primary face of Massachusetts government that was constituent centric to enable fast, easy, and wicked awesome interactions with state services.

Prior to the migration to Drupal 8, the Commonwealth’s antiquated, proprietary content management system reflected its internal hierarchical structure instead of organizing content in a way that made sense to its visitors. That meant, for example, that a visitor looking to start a business in Massachusetts had to visit four or more separate department sites in order to get started. The Commonwealth sought to improve the user’s experience by focusing on guiding the visitor through the various services the Commonwealth provides over helping them navigate the complexities often found in a massive state organization. 

Massachusetts Digital Service (MassGovDigital) had two core philosophies that drove their decision making: focus on the constituent experience and use data to support all decisions. They envisioned a unified user experience, where tasks like preparing to renew a driver’s license matched the ease of use of shopping on a major retail website. The MassGovDigital team was challenged to apply private-sector data analytics savvy, like defining and tracking constituent “conversions.” Gaining access to analytics at their fingertips was key for site authors to make fully-informed decisions to optimize their content for readers. A high-performing site search would ensure content findability. 

Last Call Media and the MassGovDigital teams worked together to improve the Drupal authoring experience in order to deliver the next chapter of the state’s digital future. The end result represents a significant leap towards the goal of a new primary face of Massachusetts government that centers on constituents—enabling fast, easy, and wicked awesome interactions with state services.

Improving the Drupal authoring experience

If you can improve the authors’ ability to create and improve content, then the constituents will be better enabled for fast, easy, and wicked awesome interactions with state services. For Last Call Media, improving the authoring experience meant a better interface for communicating data about each piece of content. This data was a mix of content scoring and direct feedback from constituents. For example, a site visitor submits the feedback form (available on any page) and says whether they found the page to be helpful or not (“Did you find what you were looking for on this webpage?”). The raw data goes into the calculation of their “grades.” The raw feedback comments also become visible in a tab in the editor interface, where the editor can focus in on what is or isn’t working well about the page. Surfacing this data, along with making the interfaces more intuitive and the content easier to add and manage, enabled authors to more rapidly improve their content in a more targeted way. According to ForeSee results, the release of the reimagined authoring experience directly correlated with a never before seen increase in Customer Satisfaction.


Retheming Drupal’s default admin site was a critical opportunity to improve usability for authors. With a pattern library, Last Call Media applied these improvements at a large scale without the prohibitively high effort of creating designs for every single page. Paying extra attention to vertical spacing intervals Last Call Media created a clearly defined page hierarchy. At the same time, flipping the brand color scheme provided a user experience that’s consistent with the main site, yet unique.

Screenshot of new branding guidelines being created
Admin theme branding guidelines in the program Sketch.

 

By using a shared design vocabulary, these ideas could be applied site wide—even the pages that weren’t yet designed—to start development and apply the broad strokes to the theme, while the design team focused on some areas of the site that required more attention for usability. Faced with the challenge to deliver complex content with forms assembled from a number of differently-styled modules, form elements became a focus area. In addition to a unified styling system to improve usability for all form elements, horizontal lines now mark the end of one form element and the beginning of the next. Vertical lines do the same for nested re-orderable elements.

A clear path to publish content 

Last Call Media also created a new and improved version of the Admin Toolbar to streamline navigation for content editors and creators. In addition to the Admin Toolbar module, a separate custom toolbar module specific to the Admin Theme was created to handle customizations. Now, buttons provide easy access back to the login page, with a separate button to return to the main site. A custom tab directs content editors to their most important pages.

The Mass.gov Admin Theme homepage
The final “home page” of the Admin theme for Mass.gov.

Before, there was no direct way for authors to quickly access their top two pages: the page to add content and the page to create new documents. To balance that functionality with a slim line top bar experience, buttons were added to those pages right to the tab menu. Last Call Media built a custom “Add Content” page with attentional experience in mind; Mass.gov, at the time of this project, had about 35 content types for an author to scroll through. 

Screenshot of filtered "Content Add" screen
Using the search box, content editors can filter the types of content they want to add.

A faster and easier authoring experience has allowed authors to keep improving and adding to their content. This keeps constituents in the know and continues to grow Mass.gov as a single source of all the information they need to interact with government services. Read more about how Last Call Media did this here.

Outcomes

  • Leading the Way Among State Government Websites: Mass.gov placed 3rd nationwide in a review of 400 state government websites by ITIF and was recognized for performance in page-load speed, mobile friendliness, security, and accessibility.  
  • Constituent-Centric UX: Produced 23 content types using structured content to ensure consistent and constituent-centric UX.
  • Huge improvements in both the front and back end performance: We achieved a 50% overall improvement in the back end performance, and a 30% overall improvement in the front end performance all while maintaining content freshness.
  • Empowering Content Authors With an Improved Drupal Admin UI: Updating, adding, and reviewing content moved from requiring technical expertise to being open and usable to non-technical subject matter experts. Now, hundreds of users login to Mass.gov each week to update, add, and review content performance to support the services their organization provides to the people of the Commonwealth. 
  • Streamlined on-boarding with guided tours: A series of guided tours support a refined publishing process, which accelerated on-boarding new content authors. 
  • Collecting Insights from User Feedback: Verbatim content feedback from constituents is now available to authors, and feedback helps create content performance scores in an improved Drupal admin interface. 

Key features and functionality 

Reimagined authoring experience

  • Content Categories: Content types were organized into categories and jump-links to them can be found on the “Add Content” page.
  • A Deeper Search: Custom search functionality sorts through both the content type names and the description text.
  • Clear Visualization and Direction: A “thumbnail” example of each content type shows authors a sample preview. Cleaner and more strategically-positioned description texts give easy-to-follow direction.
  • Extra Guidance: Links to Mass.gov’s document site provide additional information about each content type, including how it’s used, tips for creating new content, and links to live examples.

New welcome page experience for authors


Key Drupal Modules

Why these modules/theme/distribution were chosen

Flag: Used to notify editors about content updates. 
Paragraphs: Used to guide authors in creating structured and reusable content.
Tour: Used to improve the authoring experience by introducing them to the functionality of their content types.
Tour UI: Used to assist Product Owners and Customer Success in tailoring Tours as needed, based on customer feedback, minimizing the interruption to the feature development work stream.
Pathologic
Redirect: Having migrated from a very large legacy site with a long history, Redirects were a critical consideration.
TFA
Password Policy
Metatag
Seven: Hooking in to Seven, a Drupal 8 theme, provided a base that is maintained and receives security updates from the Drupal community. One of the main challenges in building an admin theme for Drupal are the number of modules that require different user interfaces; some modules make minor tweaks to the UI to meet their needs, but some create their own from scratch. It’s very difficult for an admin theme to support all of these use cases without something breaking, let alone making the UX cohesive. By creating the theme from Seven, Last Call Media ensured that it wouldn’t unexpectedly break module UIs for modules that we hadn’t even anticipated needing yet, and it makes sure not to be breaking anything that’s already there.
 

Final Thoughts

Currently, Last Call Media is a leading digital agency working to transform Mass.gov’s digital platform and strengthen government-constituent interaction. This provided technical architecture leadership to develop and support the new digital platform, by working closely with the MassGovDigital internal team and several other vendors. 

Over the past 12-months, by relying on constituent feedback and analytics and a commitment to collaboration and flexibility, the teams have been able to improve constituent satisfaction with Mass.gov month over month, according to data collected by Foresee.
 

Expand
Branding and print design.

Services
Processes
  • Continuous Delivery
Team Leadership

As part of an effort to support local commerce and community, Last Call Media partnered with the Downtown Northampton Association, an organization in LCM’s home city that seeks to improve the business and cultural strength of the downtown area through investments in programming, beautification, and advocacy.

How we did it

We joined the effort, bringing our expertise for a more beautiful downtown. In partnership with the DNA’s Executive Director and a board of local luminaries, Last Call Media helped brand the organization with print materials, signage and digital media, creating a universally recognizable identity for the organization, assisting with fundraising efforts, and sparking demand for co-branding materials from downtown businesses.

logo

collateral

brochure

Brochure detail

logo alts

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

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
Building the new WPI.edu.

Processes
  • Agile/Scrum
  • XP
Team Leadership
  • Senior Producer
    Sean Eddings
  • Senior Architect
    Jeff Landfried
  • Senior Development
    Jeff Landfried

Clinically speaking, our recent work with Worcester Polytechnic Institute is a testimony to Last Call Media’s approach to the initial project phases of Discovery, Strategy, and Information Architecture. That said, the most important part of this story is how our flexible and adaptable work process embraced by both the WPI and Last Call Media teams resulted in a process and a final outcome that meets WPI’s stakeholder needs. Strong partnership-building was the goal from the outset, and it paid off in strong relationships and expectations satisfied.

Project Goals Last year, WPI embarked on a Discovery and Strategy phase with Last Call Media in order to:

  • Improve performance
  • Increase engagement
  • Reduce technical debt and operating costs

Thanks to WPI’s commitment to collaboration, the redesign of wpi.edu represents one of Last Call Media’s most comprehensive involvements from start to finish of any project to date. We acted as more than designers and developers, but instead as all-encompassing strategic management consultants, working with WPI to organize multiple stakeholders toward the realization of stated and unstated goals.

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.

Today, the ability of the various administrative and academic departments at WPI to use the site is unparalleled in Last Call Media’s experience. The partnership enabled WPI’s content developers, in-house communications staff, designers, and developers to fully leverage the new wpi.edu. As a result, we’re seeing profound stakeholder use of the tools we collectively built. WPI embraces our approach and recognizes the value in the systems our working partnership designed. Such engagement is the dream of every project, and we’re proud it’s being realized at Worcester Polytechnic Institute.

We continue an ongoing relationship with WPI providing support and strategic counsel as necessary. What can Last Call Media do for you?

Expand
Consortium Assault Services app.

Processes
  • Continuous Delivery
Team Leadership
  • Senior Producer
    Kelly Albrecht
  • Senior Architect
    Rob Bayliss
  • Senior Development
    Rob Bayliss

In response to growing concerns and attention around Sexual Harassment and Assault Nationwide, Amherst College needed a tool to serve students of the Five Colleges with rapid access to Title IX office information and emergency services.

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.

The app was announced to all incoming and returning students during new school year orientation. Information about the app has been circulated through the Five Colleges on promotional materials and “get help” brochures and posters.

Expand
Annual Fund’s 25th Anniversary Campaign.

Processes
  • Continuous Delivery
Team Leadership

The Advancement Department of Amherst College needed an updated brochure to support their efforts of encouraging donations to the Annual Fund’s 25th Anniversary Program campaign. Last Call Media was excited to build upon our technical experience migrating Amherst to Drupal and in building the Title IX iOS App with a project that could showcase our marketing strategy and design talents.

How we did it

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.

brochure 2

brochure

Staff reported that the leave-behind brochure was incredibly helpful for both their volunteers and donors, and twenty-fifth anniversary giving broke fundraising targets and records in 2015 and 2016.

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
Healthy U Portal app.

Processes
  • Continuous Delivery
Team Leadership
  • Senior Producer
    Kelly Albrecht
  • Senior Architect
    Rob Bayliss
  • Senior Development
    Rob Bayliss
  • Art Director
    Colin Panetta

Cooley-Dickinson Hospital offers an incentive-based healthy lifestyle program to their employees. As employees participate in exercise activities, healthier eating habits, and education classes to learn life-enhancing techniques, they gain points— which translate to greater discounts to their benefits contributions. CDH was tracking this participation program on paper and in Excel for over 1000 employees. Last Call was hired to transform the program into an interactive digital experience to increase participation and automate much of the workflow of managing the program.

We provided an easy-to-use interface to minimize the barrier of entry for users. Maximized by a Mobile First approach, we condensed how much information was presented to allow users to quickly access the main features of the program, which included entering exercise activity. While also accessible through desktop and laptop computers, the primary use case for the app was on the go, from a mobile device, for a user to track their progress. LCM went further, implementing QR Code functionality, allowing CDH to post flyers notifying staff of special activities. Scanning the QR Codes on those notices would transition the user’s experience to the relevant area of the app.

Things went really well with the program, it met all of our needs really well and the employees loved it.

Sam Blasiak, Cooley Dickinson Hospital

The program has been met with amazing reception both from administration, and employee participation. The program is being further expanded and developed to be modular and rapidly deployed at partner healthcare facility partners.

Expand
Redesigning the College of Biological Sciences.

Processes
  • Agile/Scrum
Team Leadership
  • Senior Producer
    Kelly Albrecht
  • Art Director
    Colin Panetta

Developing a digital media strategy with measurable results.

Challenged to increase enrollment, the College of Biological Sciences at the University of Minnesota looked to Last Call Media for ways to develop a digital media strategy with measurable results. Last Call Media focused on increasing engagement with CBS’ primary audiences— prospective and current students— by implementing fresh designs with improved pathways and navigation. LCM also coordinated the final migration and deployment of the site to the University’s Acquia platform.

Working with CBS, we took the project from initial discovery and goal validation through information architecture, design, and development.

We were able to deliver a compelling, modern, and effective site. With CBS’s target users in mind, Last Call Media improved site navigation and menu structure, re-working the existing navigation system to create a more fluid experience visiting the site.

The site was launched in summer, in time to function as an active recruitment tool for the school year. After receiving consistent positive feedback, CBS and LCM received an award for the design and functionality. The CBS team has continued to add and manage new content on top of the sound foundation built by Last Call Media.