Menu

Nicholas Fair

Connect

HUNT LIBRARY VIRTUAL BROWSE

INTERACTION DESIGN ・ WORKFLOW ・ ACCESSABILITY

July 2011 - April 2013
Direction: Shirley Rogers
UX Lead: Laura Teeples
Collaboration with: Jordan Lang, Yousef McCoy

image

BROWSING AROUND

The James B. Hunt Library is a resource and technology rich entity at North Carolina State Universities Centennial Campus. One of the biggest projects at the inception of the library was to re-invent how students at the library would interact with the books. Enter Virtual Browse: a system designed to re-create the act of physical book browsing in a digital space. Created to be used on tablets, phones, desktops, and on a massive touch-screen display outside of the Book Bot, Virtual Browse was a massive team undertaking. Initially led by Laura Teeples, then overtaken by myself, Virtual Browse (and later, the Book Bot) was pitched as a blue-sky design with few initial limits.

image

Before tackling the design, Laura led the team in creating a use map for all possible user interactions that Virtual Browse could contain. This was a huge information gathering process, but proved invaluable into giving insights into the parts of Virtual Browse that were an absolute must as we moved forward.

image

Team blue-sky brainstorming with lose paper and sharpies attempting to tackle the not-so-simple visualization of information. The abstract nature of discovery proved difficult to pin-down and would lead to the team splitting off to chase multiple possible venues of success.

image

In early iterations of Virtual Browse, the Book Bot had a personality and would interact with the user, like an AI avatar. These were some potential designs for the 'Bot that I developed, inspired by the then-recent Iron Man's 'Jarvis'.

image

One of the early 'blue sky' designs created with the book bot AI in mind was one I called "search orb" and saw the library visualized into a 3D "sphere" of limited scope that gave the user three-dimensional control of their browsing experience that would, in theory, never end. Guided by the Book Bot, they could save books in a taskbar for later analysis.

image

Another of my blue sky concepts was the library cube system- a more literal way to visualize the "library" in virtual space.

image

image

As we worked on concepts, programmers to create our visions were hired on and discussion with them tempered some of our ideas. This one was a reduction of the previous two designs, worked into a more manageable 2D space, where the Book Bot interface provided touch-type search functions to help you navigate and a "backpack" option for saving books. The library was partitioned off into different globes based on the book sections, like in a classic library or bookstore.

image

A breakthrough came with the change from 3D spacial searching to what the team called 'channel surfing'; a method by which you could browse the books infinitely in two directions, where each row or column would live-update you on related and "nearby" books. The rough mock-up on the left was one of my early attempts at conceptualizing the idea.

image

Always aiming to be accessable, the application was designed with ADA requirements in mind from the get-go; making sure all content would be usable from both low to the ground and high off of it (for people over 6' like myself!).

image

Rough wireframe refinements of how the channel surfing design would work that I outlined as I took the reigns of the project from Laura.

image

Refined user interfaces saw Virtual Browse take many forms, with many of my later designs aiming for less visual clutter and more focus on the initial task. Understanding that search would be the primary function to follow, and browse second, the project re-shaped itself into a side-bar of always updating books that would scroll forever based on search results, but a cross-bar of "related" books that were on the shelf of the currently selected novel or workbook. User testing proved it incredibly successful.

image

One of the last innovations was changing the screen to an "invisible" double-wide interface, where the workspace of the application would exist to the right of the browse function, 'off screen' until swiped to. This allowed for more of a controlled user flow through the app.

image

Virtual Browse's final beta layout as implemented, with a dual-screen form that allowed users to switch quickly between their bookbag and the act of organically browsing with the swipe of their hand.
Agency Acquisition Application
Agency Acquisition Application
Fate Foretold
Fate Foretold
Super League Gaming League of Legends City Champs
SuperLeague Gaming League of Legends City Champs
League of Legends All-Star Fire/Ice Trophy
League of Legends All-Star Fire/Ice Trophy
The Big Strong Arms: A Band You Can Trust
The Big Strong Arms: A Band You Can Trust
MTG World Championship Trophy
Magic the Gathering World Championship Trophy
Twitch Creative Trophy
Twitch Creative Trophy
Graphical Posters
Graphic posters
Publications
Books and Publications
Game Lab
Game Lab Digital UI
US EPA Digital Signage
US EPA Digital Signage
Cogwork Earth Series
Cogwork Earth Series
<br>
Apparel
Apparel
Oculus Speaker System
Oculus Speaker System
Skullcandy
Skullcandy POP Display
Album Art
Music & Album Art
FPS UI
SciFi FPS UI
Hunt Library Virtual Browse
Hunt Library Virtual Browse
Krispy Kreme Transformative Cart
Krispy Kreme Transformative Cart
NOL: The Pursuit of Knowledge
NOL: The Pursuit of Knowledge
Sanctum Headphones
Branding and Logos
Sanctum Headphones

Sanctum Headphones
Sesame Dishware Storage Kit
Sesame Dishware Storage Kit
Monster Supersplash Speaker
Monster Supersplash Speaker
Lycos @ NCSU
Lycos @ NCSU
Monster Sound
Monster Sound
Electrolux P.C.R.
Electrolux P.C.R.
VUSE
VUSE Counter-Top Educator
Hax Campsite Tool
Hax Campsite Tool
Miscellaneous Projects
Miscellaneous Projects
D-Vision 6 Internship
D-Vision 6 Internship