California Polytechnic State University Art and Design Department ART 388: Interaction Design II Winter 2017 Professor Bruno Ribeiro
ParkMe Parking system which enables users to see and reserve available spots in the lot.
Sabrina Bezar Kayleigh Rago ďťżďťż
22 March 2017
2
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago ďťż
Table of Contents Introduction 3 Abstract 3 Schedule 4 Audience 5 Technical requirements
5
Research 6 Preliminary research design Findings from the research Personas 7 Goals 8
6 6
Competitive analysis 9 Parking meters 9 Ticket-based parking 9 Parking gate 10 Manned station 10 Sensored parking lot 10 Park Ya 11 Uber 11 Lyft 11 User interaction design Scenario 12 Sketches 12 Wireframes 13
12
Usability analysis 14 Usability analysis tests 14 Usability analysis results 14 Changes from the results of usability analysis User interface design Annotated layouts 15
15
Final product 16 Future enhancements 17 Presentation Poster 17
14
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago
3
Introduction Abstract The ParkMe applicaton allows the user to view where there is available parking in their city. It utilizes a “ticket system” similar to movie theaters where people can reserve their seat. People can check their smartphones to see which parking structures are full, along with where specific spots are available. They can also reserve a spot on the app before leaving their home. Upon arrival, the user may open the parking structure’s gate from their phone, and may also open the gate when they are ready to leave. This also allowed the user to pay using their credit card rather than cash. This product is unique as the “reservation” technology is not currently being utilized in parking structures. With this new application, people will no longer have to waste time searching for spots where there may not be any. The data on each parking structure updates immediately, so availability information is always accurate.
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago
Schedule Week 3: January 23–27 Compile interview data Create to-do list of constructible imagery Develop persona & goals Week 4: January 30–February 3 Work on sketching concepts Develop wireframes for all interfaces Week 5: February 6–10 Make scenario Create digital wireframe drafts Lay out testing in Adobe XD Week 6: February 13–17 First version of testable app Test & refine app, record Week 7: February 20–24 Work on high-resolution static mockups Continue to refine app Week 8: February 27–March 3 Complete functional mockups Finalize application Prepare presentation Week 9: March 6–10 Possible constraints Prepare presentation Practice speech Week 10: March 13–17 Prepare presentation Practice speech Make poster
4
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago ďťż
5
Audience This product is designed for anyone who drives on a somewhat regular basis. Specifically, it is for people who need to park in parking structures. For example, anyone in SLO who goes downtown will probably find themselves spending a decent amount of time searching for spots. We are trying to cut down this time so that parking doesn’t have to be a frustrating experience. Technical requirements ParkMe is reliant on technology that is able to track where parking spots are available in a lot. It also relies on technology that relays this information in real time to an application that is commercially available for smart phones. Lastly, it requires the ability to connect the application to the lot itself, so that a user may enter an leave the lot through their phone. This kind of technology is not commercially available yet, but may become avaiable in the near future. ParkMe would also need to rely on top of the line security. An app that connects your credit card information to a public parking garage can be risky if someone is able to hack into it and steal that information. On the one hand, being able to pay with a credit card instead of cash is more convenient for the consumer, but it does add potential security risks. ParkMe would likely have a section in its terms and conditions stating that we are not resposible for hacked or stolen information. However, it would reassure the user that the app makes use of high quality security technology to keep their personal information safe and secure.
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago
6
Research Preliminary research design In our interviews, our goal was to learn what people think of their current parking experiences. The questions we asked were: “What is your average experience with parking structures like?”, “Have you ever had to compete with someone for a spot? If so what was that like?”, “What is your opinion on payment methods?”, and “What would you like to see improve with parking structures?” These questions allowed us to understand what is it about parking that frustrates people. Findings from the research Kelsey: Parking structures are usually crowded. When it comes to competing for spots, people are often aggressive jerks. She doesn’t like having to pull out cash because it takes too much times. In addition, she doesn’t like angled spots and one way lanes. Kingsly: He often ends up parking near the top of the structure. When it comes to competing for spots he often allows the other person to have the spot to avoid conflict. He is frustrated with small parking spots and having to pay with cash because he doesn’t carry cash. He would like to see a more convenient way to pay and more general parking on the first floor (as opposed to staff parking/permit parking). Taylor: Parking structures are almost always full to the top floor. She will sometimes speed up to beat someone else to a spot. She finds it frustrating that the first floor is often permit parking/20 minute parking and feels like paying is always a pain. Jonathan: He always goes to the top floor to avoid dealing with annoying drivers/ pedestrians. He is frustrated with all the staff spots on the first floor, and feels like the payment procedure is a pain. He would like to see more parking in structures, so possibly more floors. Garrett: There is often no space on the first floor, and frequently ends up going all the way to the top. When it comes to competing for spots, he doesn’t usually fight for them but it is still very annoying. He finds it difficult to remember where he parked, and feels like the spots are often too small. He would like to have some way to remember where he parked and a way to know where spots are available so you don’t have to search.
7
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago
Cole: Doesn’t like fighting for spots, but will drive around the lower floors until he finds something. Spots are too small for his car and he gets annoyed if people park offcenter because of this. He’d like larger, more accessible parking. Greg: Will fight tooth and nail for a spot, feels it’s more fun that way. He doesn’t like how small the spots are but doesn’t mind too much currently. He doesn’t like it when people get out of their car to snag a spot for someone who is coming, respects car etiquette. He doesn’t like paying for his parking spots and thinks it should stay free, because he never has change on him. Lori: Fights for spots but doesn’t like it. Is bad at parking in small spots and hates oneway lanes for parking. Doesn’t like parking meters because she never puts enough time in, prefers paying by card or at a gate at the end of the parking lot. Wishes she could pay with her phone. Caroline: A really passive driver, is bad at fighting for spots. Will end up spending a lot of time trying to find a spot. Likes when parking lots tell you how many spots are on each floor but never believes it when it says a floor is full. Doesn’t like paying for spots but wishes she could pay with card if there is a gate instead of paying with change. Personas Emma is a 25 year old woman. She likes to go shopping on the weekends, and frequently runs into crowded parking structures. She doesn’t like spending a long time searching for spots, and she doesn’t carry a lot of cash. She thinks having to fight for a spot is stressful, and will often let the other person have the spot in order to avoid conflict. Emma drives a 2010 Red Toyota Corolla. She feels like the spots in a parking structure are often too small, despite having a regular sized car. She finds it frustrating when other people take up multiple spots with their car. “I wish I didn’t have to spend forever searching for a parking spot.”
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago ďťż
Goals Emma would like to be able to go shopping without having to spend a log time searching for a parking spot. Emma would like to avoid having to compete for spots in a crowded lot. She would also like to be able to pay for parking with her card rather than having to remember to bring cash.
8
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago ďťż
Competitive analysis Parking meters There are several types of parking meters currently in use. While some use only coins, many of the newer models allow the user to swipe their credit card instead. Parking Boxx is the popular brand.
Ticket-based parking Many existing parking lots require the consumer to go out of their car and pick up and purchase a ticket for an alloted amoutn of time before leaving the lot, leaving the ticket on their car dashboard. Parking Boxx is a common brand used.
9
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago ďťż
10
Parking gate Many parking garages start with a gate and punches out a ticket with the current time on it. The user keeps the ticket until they move their car out of the lot, where the ticket is looked at and the user pays for the alloted amount of money. Most parking garages only take cash, but a few do take credit, depending on the area and the cost of parking.
Manned station Many smaller parking garages opt to simply have an employee stand outside the lot to collect entry from cars looking to park inside.
Sensored parking lot Many parking lots are opting for this system to help consumers find their way around the parking lot without worrying about the number of spots. Although useful it does not help the users actually find spots. Popular brand is RedStorm.
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago ďťż
Park Ya Parking App that shows parking complexes, how close they are to the user, and how much they cost per hour.
Uber Rideshare app that shows locations of user and surrounding drivers.
Lyft Other pupular rideshare app that shows location of user and surrounding drivers, as well as predetermined pickup points.
11
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago
12
User interaction design Scenario Emma is at home on a Saturday afternoon. She decides she wants to go to the mall for some shopping. She pulls out her phone and opens up the ParkMe app. In the search bar, she types in the mall she wants to go to. The app pulls up a map of the area around the mall, displaying which parking lots nearby have availability. She selects a lot, then selects a floor, and finally, a specific spot. After confirming that she will claim that spot, Emma drives to the parking lot. When she arrives, she presses the “open gate” button on her phone, which then opens the lot gate and begins a timer. She drives to the spot, parks, and walks to the mall for some shopping. After coming back, to exit the lot she presses the “leave lot” button in the app. The gate opens, the app displays Emma’s total, and notifies her that her credit card was charged. Sketches
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago ďťż
Wireframes
13
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago
14
Usability analysis Usability analysis tests For our usability tests, we asked our testers to create an account, select a parking spot, pay for your parking and sign out Usability analysis results The “create an account” page was confusing for people because there isn’t a keyboard input feature in Adobe XD yet. People were unable to input their information to actually create an account. The testers also seemed to be confused by the map that displays the parking lots and their availability. Many people suggested some kind of legend or marker to make the map more clear to them. Finally, some testers were confused about which spots were available/ not available. They suggested using red/green instead of black/white to make it more clear. Changes from the results of usability analysis We added a “fake keyboard” so users can still create an account without being confused. We added a legend and some number labels to the maps to make the parking lots more clear. Lastly, we changed the color of the parking spots to red and green rather than black and white.
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago ďťż
15
User interface design Annotated layouts For this layout we tried a dark blue background with Helvetica Neue as the typeface. We also made the buttons rounded to appear more visually pleasing than the sharp corners.
For this layout we tried a gradeint blue and added icons to the bottom for navigation. In addition, we tried to make the map more clear for the users by marking the lots with location icons.
For this layout we got rid of the home page and instead allowed users to change their location while viewing the map. We got rid of the icons and changed the navigation to a simple forward and backward button.
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago 
Final product
16
17
ART 388: Interaction Design II Winter 2017 ParkMe Bezar Rago
Future enhancements Features that could be part of the ParkMe app in the future include a rewards program where users earn discounts through the product. The app could also give alerts when certain parking lots are free for a duration of time. Lastly, the app could have a “preferences” feature, where it gives suggestions on spots based on a user’s previous choices. Presentation Poster
Reserved for you
The pain-free parking experience
Sabrina Bezar, Kayleigh Rago
parkMe
Choose a lot
Confirm location
Pick a floor
Check in & out
The ParkMe app is easy to use and will make your parking experience painless. Before you head out, open the ParkMe app and input your destination. The app will display all of the parking lots near your location.
ParkMe app will display the number of spots available on each floor along with the hourly rate. It also displays the name of the garage and its address to make it easy to find.
After selecting a floor, the ParkMe app will display the lot name and address to help you find your way. The hourly rate will be displayed so you know before you get there.
While you are out having fun, the ParkMe app keeps track of how long you have been parked at your lot.
They are color coded by availability: a green lot is mostly empty, an orange lot is moderately full, and a red lot is completely full.
Once you arrive at the lot, press the check in button to open the gate. This button also starts your time at the lot and will keep track of how long you’ve been there.
Here you can add your credit or debit card information and the app will charge you automatically. You no longer need to worry about carrying cash with you to pay for parking. When you are ready to leave, simply press the open gate button. This will stop your timer and charge your card automatically.