GREEN P CARPLAY APP
A car infotainment parking system case study
Project Type: Course Assignment
Time Period: March - April 2018
My Role: Low-Fidelity Prototype Sketcher, User Researcher, Prototype Designer (Mid- & Hi- Fidelity)
Worked in team of 5 (including myself)
Tools Used: Balsamiq Wireframes, Figma
OVERVIEW
Problem Description: The premise of the group assignment was to design the companion CarPlay app for the (at the time) current version (2.1.7) of the Toronto GreenP parking mobile app. Using a Lean UX approach, we needed to deliver a high-fidelity prototype of the first Minimum Viable Product (MVP) release to GreenP.
Assumptions: With a Lean UX approach, we created our problem statement, business and user assumptions, hypotheses, and a proto-persona.
Prototyping Approach: Lo-Fi Sketches -> User Testing -> Mid-Fi Prototypes -> User Testing -> Hi-Fi Prototypes
Hi-Fi Storyboard: We created a storyboard of the hi-fidelity prototype to provide a walkthrough of the use of the app.
Learning Outcomes: Main takeaways I took from working on this project were the importance of conducting user tests and designing for safety for something like the CarPlay infotainment system.
ASSUMPTIONS
Problem Statement: The current state of Parking Apps has focused primarily on mobile apps only.
What the existing solution fails to address is the need for a hands-free, more contextual solution for finding parking.
Our product will address this gap by integrating a parking app (Toronto Parking Authority) with a car infotainment system.
Our initial focus will be creating a GreenP parking companion app for Apple CarPlay.
Business Assumptions
1. We believe our users have a need to: find parking spots at the start of their journey, and receive directions at the beginning and during their journey. They also have a need to specify parking time and pay for their parking at the end of their journey. All from their Apple CarPlay system.
2. These needs can be solved with: a Green P Toronto Parking Authority app for CarPlay that allows them to find parking spots, navigate to them through the Apple Maps app, and pay for them using the account information from the Green P mobile app.
3. Our initial users are (or will be): car owners with CarPlay and the Green P mobile app from Toronto.
4. The #1 value a user wants to get out of our product is: convenience.
5. Our users can also get these additional benefits: ease of use, no safety risk when driving,
ability to plan trips based on available parking, ability to easily specify parking time and
pay while in their car.
6. We will acquire the majority of our users through: advertising within the Green P app
and on popular social media sites.
7. We will make money by: users adding funds to their Green P accounts and paying for
parking. Users need an initial minimum of $20 to activate their mobile accounts. Mobile
funds carry over to CarPlay.
8. Our primary competition in the market will be: parking apps/ability to find and pay for
parking developed for other car infotainment systems.
9. We will beat them due to: ease of use and seamless integration with both the Green P
mobile app and Apple maps in CarPlay.
10. Our biggest product risk is: redundancy with the mobile app; a small market share of
CarPlay users.
11. We will solve this through: making the integration with CarPlay and Green P seamless
and integrated within the context of driving and searching for parking, and by combining
parking features with navigation.
12. We will know we are successful when we see the following changes in the user
behaviour: more users downloading the mobile app; more parking tickets paid for through CarPlay.
13. What other assumptions do we have that, if proven false, will cause our business/project to fail: we are assuming CarPlay will grow in popularity and expand to new car companies and models.
User Assumptions
1. Who is the user: Toronto car owners with Apple CarPlay.
2. Where does our product fit in their work or life: While in the car, before starting their
journey, they can find parking easily, get directions, and then pay when they are parked,
easily, right from their dashboard.
3. What problems does our product solve: Users won’t have to fumble for their phone to
find parking before setting out. Hands-free, phone-free navigation to their destination is another advantage - as navigation to parking is done through CarPlay’s Apple Maps. When they arrive at their destination, again they will not have to fumble for their phone, and can specify time and pay for parking right from their dashboard.
4. When and how is our product used: Before driving (finding the spot), while driving (navigation), and after parking (specifying time to park and paying).
5. What features are important: Finding a parking spot, navigating directly to it, and paying for parking from their dashboard. Safety is also a crucially important feature. Users will not be able to interact with the app while they are driving and will have to pull over if they wish to make changes to their parking destination. They will also not be able to specify time or pay for parking while the car is in motion and will have to be fully parked (with car in “P”) in order to interact with that feature.
6. How should our product look and behave: Friendly, easy to use, shallow navigation hierarchy, helpful, convenient and well-integrated with CarPlay and the Green P Mobile App. Additionally - safe. The app will not be distracting, it will not provide excessive notifications while the user is driving, or allow interaction while the user is driving.
Proto-Persona
Bill Fox
55 Years old
Successful CEO
- Bill drives to work in North York, where he has a designated parking spot. But otherwise, Bill needs help finding parking!
- Because he grew up in the suburbs, he’s a big car culture guy and drives everywhere. He loves his new Jeep (with Apple CarPlay). He also has a truck that he drives up to the cottage on the weekend, and his wife has a cute little sports car that they take for weekend drives.
- Bill has the Green P app on his phone, but frequently finds that when he gets in the car, his phone is in his briefcase or pants pocket where he can’t reach it - it would be great to find parking, navigate, and pay right from his dashboard!
- He drives his kids to their volleyball games after work, and they are often in unfamiliar neighbourhoods at other schools where paid street parking is the only option. The kids have a lot of volleyball gear with them, and he doesn’t want to have to walk far (because he always ends up carrying their gym bags).
- He drives from his home in Hoggs Hollow when he goes downtown for dinners and baseball games, and often gets lost trying to find parking
- He always has the latest iPhone - though he might not be a power user. He relies on his kids to show him features that are less discoverable. He can’t be bothered to spend a lot of time figuring out how to use a new app.
Needs
- He doesn’t know the city that well despite growing up in nearby Oakville so he needs assistance navigating to different places
- A way to find parking close to his kids’ volleyball games because he’s got so much gear to lug
- He doesn’t want to look for parking when he gets near his destination because it’s time consuming, so he needs to have a good idea where he is going to park ahead of time
Desires
- He wants a way to pay for parking before he even leaves his car, especially in the winter, because it’s cold outside and time-consuming to search for a meter, a parking kiosk, or even his phone deep within his coat pockets!
- He loves his car and can’t stand TTC so he wants to be able to drive and find parking wherever he goes
- He wants a way to find a parking spot quickly when he’s running late for a dinner reservation or baseball game - his clients/friends are super important.
Obstacles
- He has trouble navigating around downtown Toronto so he needs assistance finding his way around - especially in finding parking spots
- His lack of tech-savviness means that any Green P CarPlay app will have to be easy to use, with the main features/functions “up front” and easy to discover!
Feature Hypotheses
1) We believe that a 15% increase in Green P app downloads will be achieved if Bill Fox can quickly and easily enter his destination, and see parking options within a 500 ft. radius of his destination with the “Finding a parking spot by entering a destination” feature.
2) We believe that a 15% increase in Green P app downloads will be achieved if Bill Fox can quickly select from a list of recently used parking spots with the “Finding a parking spot by selecting a recent parking spot” feature.
3) We believe that we can achieve higher user commitment to parking spots once selected from the app and a 10% increase in use of Green P lots if Bill Fox can quickly scan his destination and parking information and feel assured he will be navigating to the right place with the “Confirming destination” feature.
4) We believe that we can achieve higher user commitment to parking spots once selected from the app and a 10% increase in use of Green P lots if Bill Fox can safely navigating to the correct destination with the “Navigating to a parking spot” feature.
5) We believe that we can achieve a lower error rate in specifying time when compared to Green P parking kiosks if Bill Fox can successfully add the correct amount of time to be parked with the “Specifying time” feature.
6) We believe that we can achieve a 10% increase in Green P profit/revenue if Bill Fox can quickly and easily identify which vehicle is being parked and which credit card he wants to charge, then successfully completing the transaction with the “paying” feature.
Hypothesis Table (Scroll Through to See More)
LOW-FIDELITY SKETCHES
To ensure an optimal design, my group first studied the functioning of the GreenP parking mobile app. To do this, one of my group members downloaded the app and explored some of its features. For our assignment, there was an outlined set of functionalities our CarPlay app had to provide:
-
Entering a destination
-
Displaying GreenP parking options
-
Selecting a GreenP parking option
-
Navigating to the GreenP parking
-
Parking at the GreenP location
-
Entering time parking details
With our low-fidelity sketches, my group's goal was to make sure we provided these functionalities in our design. Initially, we all sat down and individually drew sketches of our imagined screens for the app. Then, together we talked through our ideas to decide which screen designs we wanted to keep to test with users. Below is our finalized sketches we chose for user testing, click the arrows to go through each screen and hover or click on an individual screen to view details. I drew screens nine, ten, and eleven.
Here the user can enter their destination or choose a recent one
Here the user can use the virtual keyboard pop-up to enter a destination
Here the user can enter their destination or choose a recent one
User Testing Lo-Fi Sketches: By testing our low-fi sketches, we wanted to see if users found any obvious issues with our initial design that would impede their ability to use the app smoothly. After testing our low-fi sketches with users similar to our proto-persona (e.g. drives a car, uses the Green P app, etc.), we used their feedback to inform our design for our mid-fi prototypes.
MID-FIDELITY PROTOTYPES
As a group, we created our mid-fi prototypes using Balsamiq Wireframes, an online wireframing tool. Below are the finalized prototypes we chose to user test, click the arrows to go through each screen and hover or click on an individual screen to view details. I mocked up screens nine, ten, and eleven.
User Testing Mid-Fi Prototypes: After testing our mid-fi prototypes with users similar to our proto-persona (e.g. drives a car, uses the Green P app, is not overly tech savvy, uses a Car Infotainment system, etc.), we used their feedback to inform our design for our hi-fi prototypes. For example, we made license plates more obvious on the “select a vehicle screen”.
HI-FIDELITY PROTOTYPES
As a group, we created our hi-fi prototypes using Figma, a cloud-based screen design tool. Below are the finalized prototypes. I designed screens eleven, twelve, and thirteen. However, before submitting our assignment we collectively edited the hi-fi screens to make final changes and touch-ups.
User can enter a destination or select a recent location here
HI-FIDELITY STORYBOARD
Part of our assignment's requirements was to submit a high-fidelity prototype of the user interface arranged in a storyboard. I annotated screens eleven, twelve, and thirteen in my group's hi-fi storyboard and edited the storyboard for grammar and consistency in terms of formatting. To view our storyboard, please download the file from this link:
LEARNING OUTCOMES
-
User Testing is Extremely Important: When I was drawing my assigned screens for the low-fi sketches, I wanted to make controls different from what was on the Green P app (refer to sketch #10). This was to give a bit of variety to the interface, however, when we tested the low-fi sketches with users, it was clear that it was difficult for them to understand what the controls correlated with. I found this reinforced that though there are times we think our design is intuitive, we never really know how it will play out for users until we ask them. It is key then to user test from the get-go so we can ensure our design is user-focused before going through with completing the interface and then realizing.
-
Working on the CarPlay App showed the seriousness of safe design: It was imperative that the design of the app be one that ensures the safety of users above all else. For example, we tried to design the app in a way that would not cause our users to be distracted when their vehicle is in motion and also possible to quickly navigate. I found this to be a good exercise to practice designing for a real-world scenario.