The overall objective of the ParkWhiz redesign initiative is to align with mobility rivals by enhancing brand image and user experience, ensuring consistency between the app and web interface, implementing a design system, and laying the groundwork for future iterations such as EV charging and operator loyalty programs, all while maintaining some current functionality.
As for the My Parking and Parking Pass screens' redesign specifically, the aim is to improve the consistency and experience.
.png)
Across the various types of parking passes within the My Parking experience, the same information is handled inconsistently. Experiences in this state make it difficult for designers to improve on, engineers to build on, and QA to test. Improving cohesion and design elements across My Parking and the Parking Passes would greatly enhance usability and establish a strong foundation for the ongoing redesign efforts.
.png)
On event days, venues offering onsite parking may mandate specific colors for their parking passes, so it's important to discover how best to include color while also aligning with accessibility standards.
ParkWhiz has numerous reservation and onsite based purchasing flows. Each of these flows handles pass information in a slightly different way, so our goal is to understand the needs across each of these use cases to inform a simplified experience that leverages the same design system components and patterns.
The ParkWhiz redesign project is a significant and time-consuming endeavor, and its extensive documentation of past research and ongoing efforts will serve as a valuable resource for informing designs created here for My Parking and Parking Pass screens.
As we completed this analysis, we wanted to explore mobility platforms, what information they include in item previews, how the content is organized or prioritized, and the terminology used for organization.
.png)
As we completed this analysis, we wanted to explore how other platforms present passes with QR codes and how competitors present their monthly passes compared to their standard ones.
.png)
This flow considers different states of passes and how we might organize them given the variety of passes.
It was important to take a step back and understand the journey across all pass variations and the functionality and options offered throughout.
One of the four primary screens in the ParkWhiz app, the My Parking screen features previews of all available and expired parking passes, designed to surface the most important details about each pass, allowing users to quickly identify and select the pass they’re looking for.
To effectively present all critical information in a readable format, we needed to identify a presentation style that would enable users to quickly skim and gather information from the list.
To create a clear visual hierarchy that guides users through the preview and highlights specific information in a particular order while enhancing readability, we needed to determine the optimal use of line order, bold text, and color in a small amount of space.
.png)
Given the range of passes that may need to be displayed in a preview, it is crucial to consider the variations among passes and how they can be organized in a preview. Developing a layout that can accommodate diverse pass types and various states or status variations is essential.
The parking pass itself, existing in multiple versions, serves as the central element of the parking pass screen. Its meant to be easily identified, quickly read, and swiftly used at parking facilities.
As equally important when designing a pass preview layout, it is crucial to keep in mind the variety of passes when designing the pass itself. The layout should allow for flexibility while still maintaining consistency among passes.
Allowing the passes to be adjustable depending on the status of the pass or parking session, like whether the pass is expired or the session has started, could provide users with additional information about the pass upfront without disrupting the general layout.
Given that the incorporation of various colors in parking passes has been previously explored and is deemed necessary to continue with a new set of colors, it is important to discover the optimal approach when including color.
To ensure visibility, the particular color should be apparent, but excessive use of large, bright color blocks could be overwhelming or occupy too much space on a small screen. Therefore, we needed to make adjustments to the color area to achieve an optimal balance between visibility and screen real estate.
Given the importance of a pass color, it is crucial to take into account individuals who might have difficulty identifying the color. To address this concern, it may be necessary to include descriptive text or a pass name that represents the color of the pass.
The delivery of communications to users varies based on the intended goal, and is presented in different ways depending on the user's state or specific action taken.
Categorizing and assigning custom characteristics, like icons, color, or placement, to each communication based on the importance of the information may help to bring urgent information forward while less important messages can still appear in proximity without causing any distraction.
Creating adaptable design patterns that can be reused in various contexts can foster familiarity and, ideally, generate new components for the design system.
Implementing these proposed solutions for the My Parking screens and Parking Passes can facilitate the ParkWhiz redesign and implementation of the new design system, enhancing design elements and ensuring consistency, improving the overall user experience.
.png)
Introducing these new flows would help support consistency between different passes, actions taken from parking passes, and payment flows.
.png)
.png){kind=small}
