Northwestern University recently tapped Potion Design to create several unique interactive installations for their newest state of the art facility – the Walter Athletics Center. Comprised of two main areas - the lobby and the second floor, the space will be outfitted with multiple, large scale touch screens: the “All Sports Wall” and “Football Wall” which are located in the lobby, and and the “Hall of Honor” which is located on the second floor of the building.
The aim is for coaches to be able to bring recruits (and occasionally, alumni) to the space, wow them with impactful NU related sports visuals, and quickly access sport-specific content.
HALL OF HONOR
A trio of 8’ digital touch screens will be situated in between life size renditions of NU Wildcat football players. These screens represent three categories: NFL, Historic Wildcats and NU For Life (only the first two screens are shown in this case study). In its dormant state, the screens cycle through dynamic, animated sequences which tease its respective content.
If a user touches the screen (all screens behave similarly), the animated sequence stops and the experience launches.
If the animation sequence is “broken” (e.g. the screen is touched) during the NFL sequence, then the user will be taken to the NFL section. The same behavior holds true for the remaining two sections. Note: Each panel begins its animation sequence at different points. This prevents visual repetition while still allowing for three people to access the same content simultaneously.
We didn’t want to clutter the experience by including navigation or menus. So my challenge was to design a system which could be easily adjusted to fit the content while also allowing for quick access to the other two sections. My solution was to identify and name each type of content, design a modular template for each and create an affordance for swiping between sections. All content would live on one long “page.” Scrolling can be initiated manually or advanced incrementally through floating UI elements.
Due to the sheer amount of content in each section, it was extremely difficult to show design comps to the client in their entirety. This isn’t a new problem. Digital design is usually best viewed in a working prototype on a device. But what if your “device” is actually an 8 foot touch screen? Due to the scale and long scroll, a working prototype couldn’t be created. So, instead of waving our hands and pointing to demonstrate the subtle transitions that make the experience special, our team lead created the following motion study. Here, we show how the NFL screen transitions to the All-American screen. You can also see how the different content sections transition and flow on scroll.
ALL SPORTS INTERACTIVE WALL
The All-Sports wall is comprised of two mirrored, linear media screens which display content for all 19 teams. Each sport contains 7-12 customized story templates, some of which include: testimonials, photo/video galleries, individual player bios, current roster, about NU athletics and about Chicago/Evanston. Both media screens will include three persistent menus. This allows several users to access the same content simultaneously.
I wanted to create an eye catching, dynamic design which captured the energy and passion of NU’s sports programs. Subtle motion was something that I was very interested in experimenting with. And ultimately I opted to use silhouettes of players caught in powerful moments, backed by dramatic, moving cloud textures. The NU tri-branded stripe was interwoven across the panels in order to juxtapose the verticality of the columns. Finally, the names of each sport were placed at the top of the design so that they would be viewable at a distance and above user’s heads.
When a sport is tapped, the content panel for that section opens and spans two columns. The panel floats in the foreground, as the columns continue to scroll in the background. This ensures that the experience remains active. Consistent motion also invites additional users to interact with the wall.
In between pencil sketches and actual visual design, I created hybrid user flows/ux journeys for my concept. I had to think through every step of the experience, and allow for alternate solutions should my original not work, for whatever reason. Some considerations included, but weren’t limited to: button placement, menu behavior, scrolling behavior and gallery characteristics.
Motion Study: Brian Bowman