How might we streamline the process of paying to park?
The challenge
Parking kiosks are meant serve as a short-term parking solution, but most kiosks are confusing and difficult to navigate. My team was challenged with designing a solution that will simplify and hasten the process of paying to park by simplifying and clearly communicating the payment process.

My role
This project took place between October 2013 and December 2013. I led the interaction and UI design, and my team mates Jackeline Gonzalez and Isaac Chasteen worked primarily on the design and construction of the kiosk study models and prototypes. We all contributed equally to the generative research and the synthesis of that research.
Research and problem definition
The challenge started off pretty vague: redesign a parking kiosk. Our first priorities were to reframe our design challenge and define the scope of this project. We knew that human factors and ergonomics principles would really come into play here, so we decided to start there.

Setting boundaries
The discovery phase was a focused effort that allowed us to audit the existing structure, begin research into user behaviors and pain points, and identify some reasonable constraints.

We started off by pulling from our existing knowledge of human factors and ergonomics, and dove deeper by seeing if we could find any data that was specific to parking kiosks. We aggregated that information, and made note of some specific standards we wanted to be mindful of:
Site visits and observations
We then visited the site, documented the structural layout of the kiosk, and took pictures of the location of the kiosk in relation to the rest of the parking lot. As we were walking through the parking and payment process, some clear issues immediately stood out, the most notable being the fact that the parking kiosk was not ADA accessible. 

While we were able to determine that this parking lot must be ADA accessible, we were not able to find any standards for the accessibility of a parking kiosk and its surrounding area. We were, however, able to find some standards around access to public telephones and ATMs, so we used that information as our benchmark.

We spent the next few days doing some observational research and conducting field interviews, taking turns visiting the site in the morning (8 am - 11 am), afternoon (12 pm - 3 pm), and evening (5 pm - 8 pm).
We made note of behavioral details like people's posture. We also documented task-related details like the amount of time it took people to complete a transaction, wait time, line length, and the number of people who forgot their stall number and had to go back and check. After three days of observations, we reconvened, shared our notes, and came away with some key findings:
Distilling and modelling findings
As part of our initial audit, we performed a hierarchical task analysis to get a good understanding of the fundamental tasks users need to perform to accomplish their goal of parking and paying. 

We then used the HTA to craft a flow chart so that we could identify areas where we could improve the navigation of the parking kiosk interface, as well as the overall flow and physical interaction with the structure.
Based on our observations, interviews, and some demographic data on the university, we created a set personas that would serve as realistic representations of our user group. This helped us prioritize who we should be relying on to inform our design decisions and priorities. 
Based on our observations we identified Tessa as our primary persona, while Eric and Nate served as our secondary personas.
As part of the synthesis of our findings, we pulled some key moments that we photographed during our observations and used user flow diagramming techniques to visualize the primary tasks and scenarios, as well as make note of some user pain points and opportunities for improvement.
From here, we were able to refine our design challenge:
How might we take some of the pain out of paying to park?
We were also able to come away with a list of user requirements and design parameters that would guide our concept exploration:

1. Structure must be easy to identify.
2. Rely on memory recognition vs. recall.
3. Structure must be attractive and unimposing.
4. Allow for clear access for those in wheelchairs.
5. Provide adequate screen orientations for people of different heights.
6. Intuitive interface.
Concept generation and exploration
Taking these parameters, we spent some time brainstorming and writing down some initial concepts based on our research thus far: 
Ideation and prototyping
We quickly moved on to sketching and small-scale prototyping so we could visualize some of these solutions. During our sketching sessions, we started off by playing around with the idea of developing a kiosk with two screens in order to both accommodate users of varying heights, particularly those in wheelchairs, as well to cut down on time spent waiting during peak hours. 

To create visual interest and to make the kiosk seem more inviting and identifiable from far away, we opted for a structure composed of curved lines (Fun fact: people tend to prefer buildings and objects that have curved lines vs. harsh lines because the curves seem "safer" and are easier on the eyes). Stitching together some of our original drawings from our initial brain dump, Jacky and Isaac worked on creating three scale models out of chipboard:
As a group, we made some decisions about which scale model would be best to build at full scale, worked on refining the information architecture, and developed wireframes.
Concept 1 wires created by Isaac
Concept 2 wires created by Isaac
From here, we made some refinements, and I got started on creating a mockup for testing.

Getting some feedback
Throughout the project, we used the bodystorming technique for innovation to discover issues, evaluate concepts, build scenarios, and communicate developed ideas.

To get some feedback from actual users, we tested the physical structure and the interface together using paper prototypes, both in a “lab” environment, as well as at the actual site. We tried to find people who matched Tessa, our primary persona, as closely as possible. 
We used two different use cases to help us identify the pain points with the proposed redesign of the interface. These were based on two major issues that we noticed in our initial interviews and observations, as well in the user flow that we created earlier:

Task scenario 1: You have just approached the parking kiosk, but you have forgotten your parking stall number. Determine the correct parking stall number so you can complete the transaction.

Task scenario 2: You have started the transaction process and are about to pay for your spot but something has come up and you need to end the transaction.

We had each user work through one of the use cases. We made note of any questions they asked, any areas where they seemed confused, as well as their body language, posture, and positioning.
What worked: Interesting structure that was easy to spot from afar; two screens of different heights; intuitive interface vs. panel of instructions; improved user flow reduced confusion and need to recall information.

What didn't work: Structure was easy to spot, but "look[ed] like a chicken leg"; blue screen with grey text didn't offer enough contrast; some text and buttons were too small; screens can't be seen when approaching from the front, which could cause confusion.
Applying the feedback
Based on the feedback, we continued to iterate on the physical form, making sure that the angle of the screens stayed at about 30 degrees, +/- 15 degrees, which was the ideal angle of gaze that we identified earlier in our research. Quick, orthographic sketches allowed us to try out different curve radii and geometric shapes. They also made it easy to start exploring different ways that we could use light to indicate the location of the screens, while also creating interesting surface detail.

The interface also underwent several changes in order to increase legibility. As we worked out these changes, we checked in periodically with different users to get their preferences on color, button placement, and overall layout. 
First iteration
Second iteration
Buttons were made to look more three-dimensional in order to suggest clickability. Commands and layouts were simplified, and shortcuts were added to streamline navigation and to accommodate frequent users. A progress bar was added to keep users informed about where they are in the process.
Fifth iteration
I drew up some storyboards of our ideas to help visualize some of the more notable user interactions, as well as illustrate a few key contextual aspects of the user experience.
First storyboard: Full transaction w/ shortcuts
Second storyboard: Cancelled transaction
As a gut check, we referred back to our research on accessibility standards and to see how our redesign measured up. Doing this allowed us to call attention to some areas where we really excelled, as well as highlight some areas that could still use some refinement.
Closing thoughts
This was a fun and exhaustive crash course in inclusive design, industrial design, user experience design, user interface design, and copywriting. More than anything, I learned the value and importance of field work, ethnographic methods, and rapid prototyping, and that I love collaboration and working on a team.

It was fascinating to consider all of the moving parts that go along with designing products that are meant to respond to the needs of the general public. Seemingly dated design styles like skeuomorphism actually serve a great purpose here, as that design technique can often do a better job than flat design of communicating functionality and differentiating between interface components.  

If I were to revisit this project, I'm sure I could take it in a totally different direction. That being said, I learned a lot about different research strategies, prototyping methods, and communication methods, and I'm very pleased with the final outcome.

Back to Top