Welcome Kiosk

Overview

Brief: Design a user-friendly, stand-alone kiosk to be put in the lobby of a newly constructed computer science building at the primary campus entrance. It should assist anyone who has a reason to be in the building -- students, professors, and visitors alike.

Our 3-person team collaborated throughout the entire UX design process, bringing this product from ideation stages through paper prototyping to a final high-fidelity prototype (built with HTML/CSS/Javascript) via rounds of design critiques and user testing.

User Interviews

At the beginning of this project I was concerned about the idea of a kiosk, something I saw as a kind of gimmicky or outdated tool. I was determined to make this project actually useful, and not just a class project that shows off your skills but would be silly in the real world. What would people genuinely use a kiosk for in this building?

We interviewed nine people (three each) about how they interact with the new building -- what they use it for and how often they're there -- and any pain points they have trying to access the events, amenities, or the building itself. We interviewed campus visitors, graduate and undergraduate students, and professors. From these interviews we created 4 user personas and 7 task scenarios.

We discovered some things that spanned all users, like finding directions and looking up room numbers, and many more things that individuals suggested as exciting features. We also recognized that every end-to-end user task employed multiple modules, so easy flow between features needed to be a priority.

Low-Fidelity Prototyping & User Testing

Using the insights we got from the interviews, we created a first attempt mockup. Initially, we decided to keep most of the features generated throughout the ideation phase, thinking that they could be there for people who wanted them and those that don't won't have to use them. (Stay tuned to find out how this really played out.)

Our mockup included a fairly flat home screen, with options for all of the different features and shortcuts to what we thought would be the most used actions -- finding a room for a meeting or an event.

Seeing this on paper made me think that more features had been the wrong decision, and guerrilla user testing confirmed that -- there was too much going on, and users were overwhelmed by some of the features that really were just gimmicky. It turned out that the most useful AND usable features were those we developed from exploring users' pain points, and not those we developed from interviewees saying "this could be cool!"

Moreover, this was a good lesson in the power of information hierarchy and in the power of paper prototyping. None of us realized in the ideation phase just how cluttered our product would be with this many offerings, and we didn't take info hierarchy too seriously. When it came time to produce, though, we saw that this wide, shallow hierarchy was just too much to make sense of and created a huge cognitive load for the user.

Redesign and High-Fidelity Prototyping

In a design critique it was suggested that we think about adopting a tab format, which solved a lot of our info hierarchy problems. Before, we forced the user to remember all of the home screen options whenever they clicked into a single one of them, and they had to return to the home screen first in order to use any other feature. Designing based on a tab format meant that users could always see all of their top-level options and flip between them easily. The only question was how to pare down our features to fit in a tab format.

To do that, we analyzed the user testing results and the design critique from our low-fidelity prototype and went back to our user interviews to see what was most important to the interviewees. Our final product focused on 5 main sections: a home page, an events calendar, maps & floor plans, a directory, and a room reservation tool. The horizontal prototype can be seen below.

We designed these pages from scratch using HTML/CSS/Javascript, and one of the other group members taught us the basics of Bootstrap so that our visual design would be consistent.

I was responsible for designing and implementing the at-a-glance page and the event calendar. I was also the one to prototype for end-to-end user tasks and create intuitive pathways between the features. I was determined to limit the amount of backtracking and manual navigation users needed to perform, and make it impossible for a user to make a "mistake" or get stuck.

At-a-glance

The at-a-glance page provides:

a calendar of upcoming events
a computer science news reel
suggestions for things users can do with this kiosk, such as exploring building information or finding a room

Every section is clickable: clicking on an event will take you to the information page for that event, clicking on the news story will pull it up in a pop-up, and the buttons take you to the appropriate kiosk feature. Overall, this is not a vertically deep page, but it interacts a lot horizontally with the other tabs and features.

In terms of visual design, this page has substantially better grouping of elements than our initial low-fidelity home page, done through a better use of white space and color blocks. Throughout the kiosk we made sure to put visual cues for clickable buttons and tabs as well as providing visual feedback when things are tapped. Moreover, putting the buttons in context and using targeted labels increases intuitive understanding of their actions.

Kiosk home screen

Events

The events tab opens to the most commonly wanted screen, the page for today's events. Users can also navigate to events for previous or future days by using the arrow buttons or can see a monthly calendar by clicking "See Event Calendar". For each event, users can also see more info (usually provided by the speaker ahead of the talk) and can navigate to the event space.

In general, users won't be using the kiosk to peruse CS events; that is mostly done on personal computers or phones. This page is most useful for quickly finding the location or timing of a specific event. Thus, quick info and quick directions were prioritized in this feature. I increased scannability by using recognizable icons as buttons instead of text.

Daily events, event information, and calendar pages for the Events tab

End-to-End User Experience

In addition to these two features, I put extra time into creating smooth and intuitive end-to-end experiences for users. For instance, the events page, as well as the directory & search and room reservation pages, is integrated with directions such that users do not need to remember the room number and then go search for it separately. This removes cognitive load, time, and number of clicks for the user. In testing, users remarked that the intuitiveness and ease of this process made the kiosk enjoyable to use.

I also carefully combed our prototype to find places that users might get "stuck", to provide exit routes and detours without frustration for the users. For instance, we found that many people would navigate to "Maps and Floorplans" in search of a particular room rather than going to the "Directory". I added a button at the bottom of this page to redirect these users to the appropriate feature without making them feel like they made a misstep. In testing, this reduced user's frustration and annoyance with the kiosk.

Sketches of the main horizontal screens for the initial app pitch

Final Eval & Takeaways

By focusing on user pain points and building out a few features to be robust and intuitive, we ended up creating a product that would actually contribute to the building and to visitors' experience. The functionality provided here does not exist elsewhere -- like the UMD Computer Science website -- even if most of the information does. This only happened because we weren't afraid to totally redesign our product in the middle of development and because we continuously came back to focus on user testing and outside design critiques. The additional energy put into learning Bootstrap also paid off; the visual design and clarity are hugely important to the usability of this kiosk and to user's general feelings of enjoyment.

Personally, this project taught me the importance of paper prototyping at early stages and the power of having a good information hierarchy. I learned that I really enjoy thinking through user flows and interaction design (a term I didn't know at the time), and gained experience with prototyping in HTML/CSS/Javascript, rapid user testing, and working through design critiques.

jackie.

nelligan

Iribe Welcome Kiosk

Want to know more about this project?

Other Work

Yext Coverage Tracker

Candidate Application

Android App: Planter