UI Breakdown: Making the Grade at MBA

BY Ethan Farmer

Get a behind-the-scenes look at how we learned to "Roll Red" during the design and development of an innovative history interactive for Montgomery Bell Academy.

To celebrate their 150th anniversary, Montgomery Bell Academy asked us to create an interactive exhibit that would celebrate the school’s rich history in the context of their vibrant present. This interactive experience would need to attract the all-boy student body by feeling modern, intuitive and familiar, without straying from the school’s brand standards–which are richly engraved, etched and inlaid throughout the school’s campus.

After a few initial visits with the MBA team, we knew we would need to explore a graphically rich user interface to create a powerful connection between the school’s digital archive and social media content. Let’s begin by reviewing the final, full-screen designs. Navigate through the screen captures below to see the attract loop messaging, main user interface, and entry screens as they appear in the final, delivered application.

[rev_slider mbauislider]

Process & Foundation

750x400-MBA-UI-Images

With the final designs in mind, let’s now go back to the starting point of the project. The UI design process began with multiple iterations of sketches. These sketches convey the foundational elements for the interactive’s user interface and user experience. During the initial phases of a project, we like to work in sketches. Sketching allows the Anode team to rapidly explore many different possibilities without investing too much time in any one concept. After a few face-to-face and online meetings with the MBA project team, a winning concept emerged. At that point, we moved on to establish the overall look and feel by producing detailed UI elements.

MBA-ColorsType

The color palette is drawn from MBA’s storied brand and campus. Deep, earth-tones complemented by the school’s dominant maroon red provide a more masculine, reserved palette for the primarily all-boy audience. The client requested that the user interface feel modern, yet call upon familiar classic tones and themes found throughout the campus. Sampling wood grains and textures we observed during a campus tour, we were able to create a fusion of modern and classic that is distinctly MBA.


Forming Connections Visually

MBA-UI-Link
In order to establish a clear user experience around the metaphorical link between past and present events, we created an on-screen visual system around a literal “link” icon. This link icon appears throughout the interactive, starting with the messaging in the attract loop animation. When the link icon is present, the user is aware that on-screen items are being connected through keywords and tags associated with each entry.
Linking the past to the present is manifested in the form of social media. Entries from the school’s digital archives are tagged and matched with live social media feeds. These links are displayed through recognizable iconography.
MBA-Link-Social

Additional examples of the linking metaphor throughout the user interface.

MBA-UI-Link-Examples


It’s All in The Details

The details of the user interface are essential to promote a richness, depth, and interaction that many studios overlook. Extreme care was taken in crafting each section, and no detail was considered too small. Shadows, textures, edges, and color were all used to bring the interface to life.

750x400-MBA-UI-Details

As mentioned above, finding inspiration from the physical space is also a crucial part of creating a unique interface that feels at home on the MBA campus. One example of this practice is the columns that animate on the lower left corner of the user interface. These columns were directly inspired by the actual columns found throughout many Montgomery Bell Academy buildings, like the one pictured below designed by Tuck Hinton Architects.

MBA_ColumnsInspire

Visit the portfolio page to learn more about how the Montgomery Bell Academy interactive kiosk links the school’s historical archive to their social media presence.

Scroll Up
 Previous  All works Next