Decked-Out Dorms and Office Artifacts Design

ashley@lastletterdesign.com (Ashley Kolodziej) — Fri, 16 Oct 2020 21:00:39 +0000

Live links

Decked-Out Dorms Story with hotspot interactivity

Office Artifacts Story with hotspot interactivity

Visual Goals

The BU Today team requested a new look and feel for their Decked-Out Dorms and Office Artifacts series, as well as an updated method of adding hotspots to images that took less manual work than before. Part of what struck me about this series was how creative students got with decorating within university constraints - very punk in my mind. I chose a chunky typeface, angled alignment, and SVG animation to breathe life into the dorm tours.

Design portability

I purposefully designed this to have a consistent look and feel across the Office Artifacts series as well, which showcases faculty and staff offices. Both use similar SVG treatments and the same codebase.

Editing experience

Because of budget constraints, I was unable to build a custom Gutenberg block for this series. However, I did want to make sure that the interface was still somewhat easy to edit for the staff at BU Today, who have some comfort with coding. To do this, I created a JSON object to hold structured information on each hotspot. When the page loads, I used JavaScript to pull in this information and generate the hotspot and lightbox for each hotspot when the user clicks. Some technical challenges here included adding event listeners to dynamically generated content, animating the SVG banner image, and creating an easily editable interface for highly variable content on a minimal budget.

Boston University College of Arts & Sciences Impactx2 Campaign

ashley@lastletterdesign.com (Ashley Kolodziej) — Mon, 12 May 2014 21:00:00 +0000

Impactx2 was a campaign for Boston University’s College of Arts & Sciences which strove to inform donors on the differences that the school makes worldwide, and support the larger Campaign for the College of Arts & Sciences. Among the sites provided for inspiration for this project were The World Needs to Know and the 2013 Dining Sustainability Report.

One of the key goals of the project was to use storytelling and quality content to drive key impact points home to donors. To support this, I began by matching photography which showed human emotion and told unique stories with each impact point’s content. Each point has a separate color to help make it clear to the viewer that they’ve changed sections.

As each section changes, content is animated in dynamically for a smooth, single-page experience. The browser history updates seamlessly, and each section can be individually linked to. If JavaScript is not enabled, the website functions normally, with all sections expanded and a persistent navigation which links to each section as a page.

These sections expand to reveal content which supports the Impactx2 concept—Our Impact, and Your Impact. From there, a potential donor has a clear call to action to donate, and can see a story about how Boston University had a personal impact on a student, faculty member, or staff member.

All of this leads to the final call to action to site visitors to match the impact that the students, faculty, and staff of the College of Arts and Sciences have already had by giving back to support future impacts—Impactx2.

The Impactx2 website was recognized with a Gold, Websites: Fundraising (Annual, Special Campaign) | 2015 CASE District I Communication Awards by the Council for Advancement and Support of Education.

javascript on Ashley Kolodziej - Boston Freelance Web Designer

Decked-Out Dorms and Office Artifacts Design

Boston University College of Arts & Sciences Impactx2 Campaign