The Yale Entrepreneurial Institute sought a design and technical implementation partner to assist with the redesign of their website. As YEI grew in size and scope, it wanted to project an image more consistent with an entrepreneurial spirit, as opposed to its former, more academically-focused website.
The Yale Entrepreneurial Institute was at a crossroads when they reached out to Last Call Media for a rethink of their web presence. Having previously based their identity around their position as an organization inside Yale, they were looking to transition to an identity that embraced the wider culture of young professionals. Last Call delivered a site design that achieved this through an open layout and bold color and font choices. We also worked with YEI to strategize a smooth user experience despite a complicated site structure, and a system of landing pages that deliver custom content based on user persona or interest.
We delivered a round of style tiles to YEI depicting three potential aesthetic directions for the site. The first was conservative, being subtle in tone. The second was the boldest, utilizing a bright purple overlay on the hero image. The third was a medium between the first two, utilizing some comparatively moderate, punchy colors against an open layout.
The aesthetic in the third style tile is what wound up being selected, which we then applied to a full round of designs as shown below on the Homepage design.
Last Call Media created an open and engaging user experience that communicated YEI’s vibrant personality while being an efficient tool for users to interact with and learn about YEI.
NERD has used the Lil NERDy character for a long time, but we felt the character could use a little refresh for the 2020 NERD Summit. We wanted to bring a warmer more illustrative tone to Lil NERDy, and give the event a unique theme that helped to express the values and mission of NERD.
We brainstormed several ideas but landed on a theme around cooking and food. This theme is rich with metaphors about working together, each ingredient adding to the final result, and a robust menu of content for attendees. From there we started sketching layouts. It turned out that Lil NERDy looked really cute in a chef’s hat!
We tried to produce images that spoke to the metaphorical meanings of the theme. NERDys sharing food, cooking together, or adding lots of ingredients. We also created some custom images, such as the call for volunteers, and hackathon email images.
Remixing an existing character was a challenge, because it had to remain true to the feeling of the mascot, but also be refreshed enough that it was clear 2020 had a unique look and theme. We had to establish rules, such as the eyes always being darker than the body color, to make sure they looked cheerful and lighthearted, and hands and feet being simple shapes.
Another element we brought to this theme was patterned backgrounds. We illustrated foods and cooking tools, and added them behind event collateral, to add another dimension to the illustrations when used in emails and on social media. This added depth to the imagery, and consistency to event collateral.
We were able to create a library of Lil NERDys, supplemented by two patterns, that tied into the theme and were informative in the event marketing materials and collateral. NERD Summit had to make a quick pivot due to Covid-19, and was a remote event. We were still able to utilize Lil NERDy across many digital assets and bring some warmth to a then-unfamiliar new event type.
In order to provide access to additional course book material, LCM worked together with the Press, to introduce a consolidated course book and user management platform. This new platform allows instructors, teaching assistants and students to seamlessly create user accounts with different privilege levels and quickly gain access to gated resource materials to supplement their course book purchase. It also provides the Press with meaningful data about their users to support more customized user experiences and targeted marketing efforts.
With ambitious goals, a finite budget and tight timeline, we worked collaboratively with the Press to get alignment on a prioritized backlog of business requirements for this new business tool. This approach allowed the development team to deliver the features of highest impact and value first.
Before this upgrade, the Press managed over 50 disparate sites with no central reporting system.
As multidisciplinary business partners, we worked with the Press to first understand their business requirements through a review of their internal pain points, future goals and the needs of their users. This information, combined with our existing knowledge of the project, informed our approach to building the new platform.
The primary goal of this project was to provide students, instructors, and teaching assistants with access to the ancillary materials for a course book. At the outset, the resources were spread out among dozens of different sites, which made updating the resources and tracking their usage impossible. The types of resources the Press had available for each book varied from book to book, but included PDFs, videos, quizzes and other interactive content. Further, some resources for a book are only appropriate for instructors or teaching assistants, and it would be detrimental to the Press if these items were made available to students or anonymous users.
We approached this problem by first determining what each group needed to be able to access. We fleshed out the concept of a resource, and built an admin interface to create resources attached to a specific book, group them, and manage the access level.
Next, we determined how they would access it (the signup workflow for each type of user). For example, students could be granted immediate access to a book’s resources as soon as they requested it as long as they were able to answer a verification question, while instructors needed additional manual verification and administrator approval, and teaching assistants would be granted access immediately by an existing instructor. We built out three distinct registration and access request workflows, and tested them rigorously to make sure they made sense to nontechnical users.
Before this upgrade, the Press managed over 50 disparate sites with no central reporting system. This fragmented infrastructure prevented them from gathering any meaningful information about their users, was leading to missed opportunities at the Press.
Advanced reporting and analytics were introduced to support the goal of better defining and understanding the Press’ audience. Common questions they faced included: Who is utilizing our material? What do they find useful? What items don’t get used as frequently? To answer these questions, we worked with the Press to codify the most important data they were interested in knowing about their customers, and built a system to capture that data at key moments during the user registration workflow. On the admin side, we created a unified reporting experience that allows Press employees to manage users and obtain report data about their users through a single, powerful interface. For content usage reporting, we leveraged Google Analytics to capture segmented traffic data. The level of reporting that is now possible on the platform has helped inform critical business decisions at the Press.
Lastly, we digitalized an existing labor intensive and inefficient paper process at the Press to allow instructors to be able to request desk and exam copies of course books through their existing account. The platform replaces lengthy paper forms that had to be faxed to the Press with a digital version that prefills information based on the book and user and can be submitted easily.
The Press’ course book web presence was a scattershot of materials on several domains and on varying platforms. In order for the Press to expand, these items needed to be centralized with better organization and improved accessibility. Customers of the Press now have easier and faster access to more resource material than before, and the Press has the data it needs to support marketing efforts and future business decisions. Significant cost reductions were realized by taking advantage of consolidation and automation.
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.
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.
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.
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.
Wentworth Institute of Technology is a technical design and engineering university in Boston, Massachusetts. Wentworth is continuously investing in creating transformational educational experiences for its students and embracing a culture of innovation and creativity.
The goals of the institute translate directly into the digital experience they need to provide to visitors of wit.edu, their current and prospective students, as well as faculty and staff. Last Call Media has been a close partner of Wentworth for years, helping them accomplish important milestones and solve challenging problems: to create an inspiring and meaningful user experience, develop a seamless process for hundreds of content authors, and finally, tackle inefficient development processes.
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
Through a refreshed online presence, the new wit.edu represents Wentworth’s commitment to creating transformational educational experiences for students, and a culture of innovation and creativity. Wentworth is now able to provide site visitors with a more accurate picture of what Wentworth is really about to help them decide whether they can see themselves or their child succeeding at Wentworth.
Last Call Media is proud to have been Wentworth’s partner in improving user experience, creating a seamless process for making content changes for hundreds of content authors, and modernizing development processes.
Working with the International Land Coalition gave us another opportunity to use our agile design process, generating ideas and a few unique solutions.
ILC has a lot of work going on around the world and we wanted to give users a way to explore the content on the site about each specific project that’s going on and the members involved.
Our approach was to focus in on the exploration aspects. What would give users the best sense of context of these global projects? How do we give attention to the members involved? What’s the best experience for sorting through the variety of project categories, subcategories and locations? And how do we present all this information without overwhelming the user?
How We Did It.
Building a relationship at the start
It was crucial we let ILC know that this is a journey we’ll both overcome together and they have our full support, as well as expertise with regards to questions or insight. They had many different goals for the project, but with the specifics undefined, we worked with them to help figure out the details and create a fully-realized vision.
The project’s dynamic was healthy constant dialogue between our creative team and everyone on the ILC team. We listened to their insights, we heard the things we needed to consider and the parameters we should work within. As things progressed, we started checking off the points on everyone’s checklists in order to be confident about the direction we were going.
First problem: Tools for finding relevant content
As mentioned before, ILC has many internal organizational projects. We needed an experience that helped users easily find content relevant to them. We mocked up a few ideas for a filter mechanism then iterated, each time pointing out the pros and cons then making changes specific to the drawbacks. This was our solution:
The thought process behind it was pretty straight forward. Present a lot of options and information without overwhelming the user, make it accessible while browsing and allow some filter terms to tell their own story on hover. It took a few tries to get here, but we believe it accomplishes those goals.
Second problem: The Map
I mentioned context earlier, during the project we decided a map did a great job of showing the global reach of ILC. We utilized the core framework of an existing map on their website but completely redesigned the visuals and added a little more functionality. On first load, we show users the globe with a few markers showing the number of their members. Users from there have the ability to zero into an area or region of interest, finding which member(s) are doing work and what the projects going on in those areas are. Here’s the break down:
Our work was well received by the ILC board and our solutions for giving their site users the best sense of context of resource content from all over the globe was deployed on time and budget. Site users are now experiencing new ways to learn about ILC members through new ways of exploring a variety of categories and locations.
This summer, Last Call Media teamed up with Blackboard to build a new customer-facing site, using a component-based design system that could afford content editors novel flexibility while still reaping the benefits of a content management system.
In building out Blackboard.com in Drupal 8 this summer, we found a fresh opportunity to position Blackboard as a user-friendly, customer-focused, and modern brand — the big idea was to introduce subtle elements of motion design into the theme in order to create a more engaging user experience.
So, once we’d built out the new site architecture, components, and theme, we shifted our focus to visual refinement; our goal was not only to guide users through their experience through the use of animation, hover effects, and motion design, but also to delight visitors in subtle, unexpected ways by thoughtfully introducing some of these elements into the theme.
The main goal of this effort was to liven up the site and encourage users to interact with elements on the page. As an unintended consequence of implementing a highly flexible component-based theme — in which pieces of content could be mixed and matched in basically unlimited ways on any given page — the overall look and feel had come out very clean and organized, but at the same time more boxy and “dull” than we’d anticipated! Alongside this, there was also the challenge of giving the theme an institutional, educational feel that still felt friendly and helpful instead of overly corporate and austere.
The first step in the process of adding microinteractions was to make sure the interactions were unified in their intent. For example, a rise on hover means the item is clickable, and if implemented on something that doesn’t click, would confuse the user.
Hover is a near universal sign for “this is clickable”, so we utilised a hover effect with shadow for the menu. For buttons, we opted to change from a simple color fade on hover, to a left to right swipe to change the color. This is more engaging than a simple color change, but it isn’t distracting from what the call to action is asking the user to do. It also matches the movement exhibited in the menu when items are hovered over. This addition of motion design to the menu helps users better understand where they are in a detailed navigation, and have a stronger understanding of the menu and product hierarchies.
Some other elements of movement added, purely for aesthetics and to engage the user, were a hover effect where the background shapes move behind a product shot when moused over. This added interest to otherwise somewhat repetitive images of computers, and hopefully caused the user to take a second look. Another was a fade and slide in of images, from the side the image is on. This creates a very welcoming feeling as you scroll down the page. In addition, we added a video background to the banner area of the homepage, tinted Blackboard blue so as not to distract from the text and call to action button over it.
In order to maintain our accessibility standards we had to think about users that may not be comfortable with the video at the top of the homepage, so we included a pause button to stop it from playing.
The team at Blackboard is happy with the results of this effort, and it brings a really fresh engaging experience to the site. We would love to do another round of user testing (link to solution story about that) to see how or why these additions add to the site for users.
Microinteractions are a great way to engage the user, and add a wow factor to your site. However, we believe that handling these specifically and thoughtfully is the only way to achieve an effect that really makes sense to the user, rather than just a decoration. This means that every movement and reaction should be consistent and rational, with a meaning and result that are predictable to the user after a short period of interaction. We look forward to bringing what we learned here to anything we work on to add another level of sophistication.