Mockups of Key Screens
The challenge:
Through the AIGA Mentor Program I had the opportunity to work with experienced Product Designers working in the transportation field. The focus of the project was to research, design and test a new airport parking feature for the existing SpotHero App using SpotHero data, design guidelines, and API restrictions.
The Problems:
How to solve for the following:
Create a new features so users can book airport parking in the same way they can currently book hourly or monthly parking via the SpotHero App.
Traveling can be stressful, and users want to be able to find parking spot details (like shuttle details, lot location, etc) in an easy and stress-free manner.
Users want to be able to easy get to and find their car once they have returned from their travels.
The Team:
Nick Heggestad
David Janke (Advisor)
Nik Payne (Advisor)
My Role:
Product Designer
Tools:
InVision (Prototype)
Sketch (Wireframes and Visual Design)
Pen and Paper (Storyboarding)
The Solution:
AB Testing for the Information Page.
While the solution was somewhat already dictated by the company (a new feature needed to be designed within the confines of the existing app), there was room within the guidelines to restructure, and add features if I could defend those definitions with data.
My solution revolved around two key findings during the research process.
First: Users wanted a clear and concise way of getting parking lot related information. While this seems a bit general, multiple users, at various points in the process made it clear that it was difficult to understand or find the information they were looking for. To solve this I created several versions of the Information Page, exploring UI as a way to better highlight the information. Using AB Testing, I concluded which one read the clearest, and ended up updated the entire information section using that format.
Second: User wanted to be able to easily get to and find their vehicle upon returning from their travels. For this solution I created an updated version of a Spot Hero Pass that would populate 24 hours prior to scheduled return. This pass would be accessible from the app’s homepage and would display the most pertinent information (QR Code, Lot Address, Shuttle Information). The pass would also show a photo of where you parked in the lot (provided the user took a photo upon initially parking).
Research and synthesis:
User Interviews:
To start the research journey, I interviewed 4 users, all of whom have used airport parking on a semi-regular basis. To conduct the interview I created a discussion guide, and asked questions about the following topics:
Frustrations associated with Airport Parking
Preferences regarding transportation methods
Average length of stay
Competitors/App Preferences
Emotions associated with Traveling
Group Affinity Mapping
“I hate the uncertainty of waiting on a shuttle. ”
Group Research & Affinity Mapping:
In my mentor group there were 9 other mentees working on this same project. After gathering our initial research we split into teams of 5 and shared all of our pieces of data. As we compiled and sorted the data, certain trends and insights emerged. We were also able to share interesting or key facts with each other. This step expedited the research process and I was able to move forward confidently, knowing that much of the research I gathered lined up with what others had discovered as well.
Insights Document:
Taking all of the data from the Group Research, I put together a document containing all of the pertinent data. I then divided the data into categories (trends), and then created an insight or two for each category. Having these insights highlighted would allow me to easily take the next step of developing design principles.
Insights Document
Design Principles:
How might we create a feature that allows users to easily be able to find their parking spot after they have returned from their trip, providing them the most efficient experience?
How might we ensure parkers will be aware of shuttle schedules and services providing so they can be ensured they will arrive at the airport on time and in an efficient manner?
How might we assist users in showing/determining the most convenient or most affordable options so they can feel confident in the parking they have selected?
I started to sketch out ideas to reach a solution. I started with a user flow and then started sketching wireframes based on that flow.
user flows & wireframe sketches:
A user flow sketch, showing the steps a user would take to book airport parking.
Sketches of some of the initial wireframe solutions I created.
Group Ideation Session:
Once again, all of the mentees in the group got together to share progress and help each other ideate on possible solutions. At this time David, one of my mentor’s, suggested I really focus in on how to display information in a way that (though perhaps different than the current display in the app) would make the experience as easy as possible. I started working on possible ways to display the information and decided an AB test would help indicate which direction to head in.
AB testing:
For AB testing, I used two similar, but slightly different versions of the Info Page. I tested 3 different users and then created a document to display the users responses.
AB Test annotated with the responses of the three users.
mockups:
At this point I took the results of the AB testing and combined the winning features into a single page. Using those style preferences, I started to build out the rest of the pages to follow suite. This led to the building of my final mockups, shown below.
Mockups for several of the pages for the Airport Parking feature.
key pages:
INDIVIDUAL RESULTS PAGE:
SPOT HERO PASS/RETURN PASS PAGE
Conclusion:
My design for the airport parking feature was well received. In an ideal world I would have conducted usability testing on my final set of mockups. Additionally, if I were to move forward with this project I would want to further explore ideas connected to:
Incentives
The decision making process (Rideshare vs. Parking vs. Public Transit)
The Return Pass concept
The AIGA Mentor Program was a fantastic opportunity for me, and I learned invaluable skills, concepts and made fantastic connections. Special thanks to David Janke, Nik Payne, and SpotHero. For more information on the Mentor Program click here.