Author Archives: pjroller

CSA Connect Overview

CSA Connect

This mobile app is a recipe sharing resource and social platform for members of community shared agriculture programs. Through interviews and research, I discovered there is a need for CSA members to more easily find recipes for the produce they receive and connect with other members.

CSA Featured Image

Modern Language Association Website Overview

Modern Language Association Website

This redesign was a great opportunity to showcase the broad outlook and rich history of the company and to modernize the site by making it accessible and responsive. I worked with a team of thoughtful and diligent developers and content managers to give the site a complete visual overhaul, reorganize the content, and redirect the focus on the user. With the support of the team I was able to design every detail of the site for all screen sizes, from the login portal to the error message.

MLA Website

Style Center Overview

The MLA Style Center

This website was developed as a companion for MLA style products, specifically the latest edition of the MLA Handbook. In addition to its role as an official online resource supporting students and teachers learning about the style, the goals of the website are to increase sales of the book and extend the MLA brand. I worked with a small team to research our users, organize content, sketch, and mock up the site. We are currently collecting feedback and user data as we refine the design and add features.

Style Center Feature Image

MLA Handbook Case Study

MLA Handbook

Role: Visual Design

Overview

The eighth edition of the MLA Handbook takes a ground-breaking approach to academic style and simplifies the process of creating works-cited lists. To highlight the importance of this volume, I created a dynamic and engaging visual system to encompass the cover and interior of the book, marketing materials, and landing pages to capture lead acquisitions and promote sales.

Handbook-Overview

Visual Design

To determine the visual direction and promote consistency, I developed style tiles highlighting key graphics, patterns, the color palette, and typography. Covers of previous editions of the Handbook have featured a graphic rainbow treatment and the typeface Brighton, so this was the starting point in my exploration.

HandbookStyleTiles

From here, the focus moved to the book cover and interior design, including infographics and visual aids to help teach the new style. Knowing that eventually components of the book would be translated to a supporting website, I included icons in the design to add graphic interest and promote visual consistency with the digital tools.

HandbookCover

Marketing

To promote the Handbook, I led the design of direct mail pieces, print and digital advertisements, e-mail campaigns, and a landing page. The purpose of the landing page was to foster lead acquisitions, encourage preorders of the book, and announce the forthcoming MLA Style Center, a resource to support MLA style products and serve as a reference for students and instructors.

Handbook-LandingPageMarketing

Chicago Mobile Program Case Study

Chicago Convention Mobile Program

Role: User Experience, Visual Design

Overview

This mobile site was created to help the attendees of the MLA convention in Chicago access the list of sessions, general information about the convention, and maps of the meeting rooms and exhibit hall. I worked closely with a developer at the MLA to make it a useful resource that would be easier and faster to consult than the printed program.

Chicago Mobile Program Overview

User Experience

In developing the site, the third mobile program that we created in-house, we took advantage of the opportunity to improve on the design according to feedback from attendees of the previous conventions. Our goal was to increase the site’s usability.

To improve loading time, we decided to forgo a splash screen and instead launch the main program screen upon users’ opening the site. After users leave the program screen, the header and footer shrink to increase the area available for the main content area. Icons in both the header and footer make for intuitive navigation, and the touch target sizes are generous.

The user flow is designed to make it easy to add and delete filters as well as to navigate back a step.

Users can conveniently find sessions they are interested in, read the details and learn the location, and even share a link to the sessions on Twitter with the help of a button in the footer.

Chicago Mobile Program Flow

Visual Design

The color palette, fonts, and graphics pick up on the style of other convention materials, like the printed guides, brochures, and wayfinding signage.

Chicago Promo Materials

ADE ADFL Websites Case Study

ADE and ADFL Websites

Role: User Interface and Visual Design

Overview

I redesigned the Association of Departments of English and the Association of Departments of Foreign Language websites in conjunction with the MLA site. The goal was to have a clean, easy to navigate, and fully responsive template that coordinates with the MLA site and works for both associations’ content.

ADE ADFL Overview

User Interface Design

While the layout and navigation systems of the ADE and ADFL websites are straightforward, the functionality and display of each association’s online publications required a lot of careful planning. I took full advantage of the robust type stack I had created to organize the many layers of content in the archives.

I helped to visually organize decades of archived publications into user-friendly accordion menus, drawing on patterns that appear in other areas of the sites for continuity.

Bulletin Archive

Visual Design

I based the colors and typography of the site on the classic styles found in the associations’ publications. The content was broken down into levels of importance to determine its flow on differently sized screens. I worked to maintain the sophistication of the design while making it simple to navigate on tablets and mobile devices.

ADE Responsive

Music Festival Website Case Study

The Louis Armstrong International Music Festival Website

Role: Branding, Web Design, and Social Media Integration

Overview

I worked with a team of two wonderful designers to develop the branding and marketing materials for a music festival in Queens sponsored by the Kupferberg Center for the Arts. The materials we designed included the logo, website, postcards, posters, ads, signage, and social media pages.

Louis Armstrong Website

Branding

I designed the logo using playful variations in the letter weight to reflect Louis Armstrong’s personality and music. We took advantage of our access to an amazing stock of archival photography and paired iconic black-and-white images with pops of color and bold typography to create a vibrant suite of materials for the event.

Louis Armstrong Logo

Web Design

I built the site as a companion to the Kupferberg Center’s existing WordPress site so that it could be easily maintained by the staff.

The simple four-page design featured a Spotify playlist, Twitter feed, social media links, and Google map integration.

Louis Armstrong Website

Social Media Integration

Lively typographic treatments and photography made for a striking header image on the festival’s Twitter and Facebook pages. The bold type of the logo translated easily as a small profile image.

Louis Armstrong Twitter

Vancouver Materials Case Study

Vancouver Convention Promotional Materials

Role: Branding, Visual Design, and Motion Graphics

Overview

The MLA Annual Convention is the the largest professional convention in the humanities of over 7,000 attendees. For each event I develop a logo and branding system which is then applied to numerous materials including postcards, brochures, e-mail campaigns, wayfinding signage, a mobile website, social media assets, and a video display.

Vancouver Overview

Branding and Visual Design

The gorgeous natural landscape of Vancouver served as my inspiration for the logo, in which mountains meet the sea to frame the text. I chose Kabel and Garamond as the typefaces and a muted color pallette to support the selection of beautiful photographs I was given by the Vancouver Tourism and Convention Bureau. All of these elements came together and were applied to the entire suite of materials.

Vancouver Style

Motion Graphics

To promote the prizewinners and their works at the convention, I put together a video in Adobe After Effects. Below is a clip of the introduction; see the full video here.

Landing Pages

Landing Pages

These landing pages were key components of a marketing campaign aimed to increase sales of the MLA Handbook. We tracked the effectiveness of the imagery and copy through vigorous A/B testing.

Handbook Landing Pages

LRG Website Case Study

Literary Research Guide Website

Role: Branding and Web Design

Overview

After many years and five editions as a best-selling printed resource, the sixth edition of this classic title was published exclusively online in 2014. My goal in designing the online resource was to honor the printed book’s history while making it fresh and easy to read.

LRG Website

Continue reading