03. Luxe Park - Empowering User Navigation
The Challenge
The goal here was to research a user problem related to the transportation industry, and design a mobile app to meet that need.
I focused my attention on users finding parking in urban areas. There are a number of apps currently available to assist with this, but I wondered what challenges may still exist, and how can assuage them?
Research
I began by developing my research plan. I wanted to focus on secondary research, competitive analyses, and user interviews to triangulate finddings and ensure I was dealing with a genuine problem.
Analyzing the Data
My work started with collecting knowledge from different research instiutions on commercial driving, parking, andurban traffic. Below are a few key findings relevant for our project:
FACT
​“As of 2019, around 11 billion U.S. dollars were lost in the New
York City urban area as a result of congestions. … Boston … recorded 4.1
billion U.S. dollars in congestion costs.” ​​​
WHAT THIS MEANS FOR US
Unnecessary driving and searching for parking exacerbate the congestion issues in urban environments and are worth researching further.
FACT
“During 2022, the number of passengers transported on the Massachusetts Bay Transportation Authority (WMATA) network amounted to approximately 214.5 million. Bus and heavy rail account for the largest share of passengers transported, each mode recording a ridership of over 80 million in 2022.”
WHAT THIS MEANS FOR US
It is also important to note that offering public transportation doesn’t solve the issue as may urban areas have extensive bus and subway routes already. Even with this high amount of public transit in Boston alone, the city still sees significant losses in congestion costs.
FACT
And as a matter of fact, even during the Corona Virus pandemic, 63 per cent of Americans stated their primary method of commuting to work was by car during that time period as opposed to 74 per cent before the pandemic.
WHAT THIS MEANS FOR US
Urban commuters are not terribly responsive to large, environmental changes in their preferred transportation methods. Exploring ways to make parking commercial vehicles easier may be the best way to ease urban congestion.
The Current Urban Parking Experience
While the data showed us urban congestion and commuting was a problem, I needed to see how real urban commuters and drivers felt about the matter. What were their commutes like? Did they struggle to find parking normally, or was it easy? Were there current products they used? What were those lacking? How were those useful?
​
​To get more insight, I interviewed five people that frequently drove private vehicles in east coast, urban areas. The below are my user interview guide and results.
Of all the insights obtained from those interviews, three stood out
100% of interviewees reported feeling stressed, nervous, and in many cases, frustrated trying to park in urban areas when they were traveling to an unfamiliar place.
60% of interviewees, however, reported feeling relaxed and confident when traveling to a destination they have been and have parked easily at before.
100% of interviewees expressed multiple factors they consider when commuting to a location including safety, traffic conditions at the time of day, other transportation methods, etc.
With these insights in mind, it became clear that the more knowledge and control users had over their commutes/parking experiences, the more pleasant they were. This led to creation of the problem statment below and subsequent brainstorming for solutions with "How Might We" questions:
After deliberating with implementing these solutions, I decided that the first solution I listed would best solve users' problems. Simply put I realized:
we need an app that makes it easy to compare travel methods & parking locations
Sizing up the Competition
Now that I identified the problem and a proposed solution, I wanted to understand how other, related products dealt with navigation and helping users park. A couple existing apps came up during my interviews such as Spot Hero and Google Maps, so I decided to review these along with a few others rated highly on the app store.
​
The below screenshots show current comparison methods Apple Maps and Google Maps have, and while helpful, I did see room for improvement.
Apple Maps
Google Maps
Most importantly, these products treated the comparison between travel methods as a side feature instead of a large part of the commuting process. My idea was to highlight this feature and allow users to compare multiple aspects of a commute type and parking type to empower them to make the best decision. To accomplish this, I wanted to ensure there were many filters and helpful visuals for users to see the differences easily.
​
To build a holistic product, I also wanted to include saved preferences to make searching for parking places easier, a saved parking place feature, and an in-app Pay for Parking feature.
Branding
It was at this point I started considering branding and tone for the app. For company values, I wanted to stress to users that they had control and power in travel. I also wanted to convey that this product provided more information to users than any other product available to them. To those ends, I chose purple for the app's primary color primarily for its ties to power and royalty. I brainstormed multiple names until I decided on "Luxe Park" which gives the impression of a deluxe or feature-rich product.
LOGO
Processes
I mapped out Task Flows and User Flows for the key features identified above. I paid particular attention to the "Compare" flow as that would be the largest feature differentiator between this product and others currently available. Within the flow, I wanted to allow users to choose which travel/parking types they would compare and the app would only show them options they were interested in seeing.
Sketches
With a lot of ground work laid, I was finally ready to start visualizing how the interface would look. I started with the home screen as this ould be the foundation for navigation in the app. I quickly sketched a few options to compare.
I opted for a similar design to Google Maps with the interactive map taking the entire background of the screen. Search and filter options would be positioned at the top of the screen for easily viewing the map below.
Favorites Screen
This screen can be accessed from the bottom navigation bar and lists parking locations the user previously identified as a favorite. This allows the user to quickly navigate to or pay for parking at one of their usual spots.
Parking Location Description Screen
I sketched two similar options for the location description page - that is - the view users have once they click on a parking spot or location. It immediately offers information identified as important by interviewees such as type, cost per unit of time, and safety
Compare User Flow
The below flow begins from a user searching for a location to travel to with date and time as well as various filters as initial inputs. By clicking on the "Compare" ICON after searching, the user can compare travel methods to that area. If the user clicks on a parking PIN on the map, the user can then click the "Compare" ICON to see parking place comparisons in that area.
Mid-Fidelity Wireframes
Once I decided which sketches I'd move forward with for each screen design, I started digitizing. I tried avoiding adding too much color at this stage, primarily focusing on layout, spacing, and hierarchy.
Account Setup Screen
Upon a new user downloading the app, they would be onboarded by answering a series of questions about their car, living area, and preferences for travel/parking.
The bottom Navigation Bar was changed to remove the "Compare" ICON and have it located as an option following a location search. It seemed more intuitive to have the compare feature represented this way rather than a separate page which may be confusing to users.
Payment Screen
During my initial interviews, 60% of participants reported paying for parking through an app was convenient, especially compared to those spots that require quarters since many people don't carry them nowadays. I decided to incorporate this for a seamless parking experience in those instances where the space or garage does cost money.
40% of interviewees reported stress regarding how much time remains on their meter when using this type of parking. Given stress was a common issue generally, I wanted to mitigate this by allowing users to remotely add funds to an existing parking spot and remotely track how much time remains on their spot reservation. This gives the knowledge quickly and easily to the users, so there's no need to worry about a meter potentially expiring and them receiving a ticket.
Favorites Screen
I digitized the favorites screen closely to how I mapped it in my low-fidelity wireframe. I did add two ICONs (Directions & Pay) so a user can quickly pay and begin navigating to the parking place right from this screen.
Location Description
I sketched two similar options for the location description page - that is - the view users have once they click on a parking spot or location. It immediately offers information identified as important by interviewees such as type, cost per unit of time, and safety
Compare Screens
I decided to create graphs to help the users visualize the comparisons. I provided two orientation options to consider, but in both cases, determined that the user would scroll to reveal more details/graphs.
To start, I began comparing travel cost, travel time, and then the average time it would take just to park (either a car, bike, etc.) The overall score would factor in these three to objectively rank each transportation type holistically.
Hi-Fidelity Wireframes
After working through a lot of the details, I brought the designs to a higher fidelity to get nearly completed versions.
Home
Compare
Preferences
Location Description
What do the Users have to Say?
I was finally ready to re-engage some users for testing. I created prototypes in Figma for three user flows: "Compare," "Add a Location to Favorites," and "SignUp" and again, scheduled separate interviews with five urban commuters.
Below are Key insights I gathered from those discussions:
60% of interviewees reported the Sig Up flow being too lengthy. Two out of five users actually stated they would abandon the Sign Up flow if required to complete it due to the length.
100% of interviewees, were confused on the meaning of some ICONs, especially the Compare ICON.
60% of interviewees expressed confusion on how to interact with the Favorites Tab and Compare Features.
40% of interviewees strongly called for simplifying the Compare charts themselves citing the current designs as overwhelming. One such user stated the below:
"I feel like I'm looking at a scientific paper..."
The interviews resulted in a good deal of feedback, so I began triaging different edits to provide the most value in my changes while still keeping on my 4 week deadline. I sorted the changes between those I would proceed with, and those I would not before analyzing the impact each change would make and the effort/time it would take to complete it.
Final Designs
The end result was the final MVP. Other changes were definitely on my road map, but were left to my future considerations for a following update to the app.
Sign Up Flow
The Sign Up flow was updated to make completing all information and preferences optional. This would allow more casual users to get right to searching/parking/comparing.
Favorites Page
A search bar was added to the Favorites tab as 40% of users believed there to be too much scrolling for users that had a large number of tags.
Compare Screen
Location Description
Purple backgrounds and labels were added to key buttons on this screen to help users understand which touch targets to interact with.
1 of the 5 users commented that the pins in the previous screen iteration were confusing - she wasn't able to tell where she was or what spot she was looking at. I updated the UI to have Pins for parking and a lighter pink pin to signify the address the user searched
Compare Screen
To make the graphs on the compare screens more visually pleasing and to lessen cognitive load when reviewing, I simplified the designs. The result is much easier to glance at, and is a simple way to make quick comparisons for users on the go.
Future Considerations
If time allowed, I would have liked to do a deeper dive into a competitor analysis. This may have led to inclusion of more features to create a more holistic product. This would definitely be on the agenda to assist with future updates.
To ease user acclimation and ensure users understand how to use each feature, I would like to design an optional tutorial.
Continued user research on the metrics most important them. Eventually, the app may allow for many more categories to be compared.
Component Library
