Project Overview
This project was designed and developed for Shiraz municipality under the supervision of Shiraz University of Technology's Internet of things lab. For this Smart Parking project a pilot version of the project was installed in Hedayat Parking in Shiraz. The product used Internet of Things nodes to send and recieve parking spot data automaticallty in real-time.
As the UI/UX designer for the smart parking project, I successfully crafted a user-centric experience for an admin dashboard, customer parking spot reservation application, and product website.
Challenges:
User Accessibility: Ensuring a seamless experience for users with diverse technological backgrounds and varying levels of digital literacy posed a significant challenge.
Data Complexity: Integrating real-time traffic and parking data into a visually digestible format on the dashboard without overwhelming users with information.
Reservation Flow: Designing an intuitive reservation process that balances simplicity for users with the complexity of managing parking availability in a dynamic urban environment.
Solutions:
User-Centric Design: Prioritized user research to inform design decisions, ensuring an inclusive and accessible interface for a broad user base.
Visual Hierarchy: Implemented a clear visual hierarchy on the admin dashboard, highlighting critical data points while providing users with the ability to delve into more detailed information.
Streamlined Reservation Process: Utilized a step-by-step and visually guided reservation flow, minimizing user effort while maximizing the efficiency of parking spot selection.
Outcome:
The result of these efforts is an aesthetically pleasing and highly functional UI/UX design that enhances the overall user experience of the admin dashboard, parking reservation application, and product website. The solutions implemented contribute to the project's success in addressing key challenges and meeting the needs of both administrators and end-users in the smart urban transportation domain.
Role:
UI/UX Designer
Tools:
Adobe XD, Figma
Product Development Life Cycle:
Empathize
For the Smart Parking product, we extracted three main user-groups for. The personas below each showcase one of the user-groups for our application.
User Story
As a driver, I want toefficiently locate, reserve, and pay for parking spaces so that I can spend less time searching for parking
User Story
As a a parking administrator, I want to manage and monitor parking spots so that I can enhance operational efficiency, improve user satisfaction, and gain more profit.
User Story
As aa city government worker I want to use smart technologies so that I can create a smoother life experience for my citizens.
Define
Problem Statements
Arian Rezaie is a frequent urban driver who needs efficiently locate, reserve, and pay for parking spaces because he spends a significant amount of time driving, leading to reduced congestion, minimized search time, and an overall improved urban parking experience.
Esmaiel Nabavi is a Parking administrator who needs to manage and optimize parking space allocations because he needs to increase operational efficiency and enhance user satisfaction.
Esmaiel Nabavi is a Parking administrator who needs to gain insight into parking users' patterns because he needs to improve his business strategy to make more profit.
Mohadese Saffarzadeh is a City government worker who needs toenhance urban mobility and reduce traffic because she wants to improve the quality of life for her citizens.
Hypothesis Statements
If drivers in urban areas use Smart Parking App then they can efficiently locate, reserve, and pay for parking spaces, leading to reduced congestion, minimized search time, and an overall improved urban parking experience.
If parking administrators integrate Smart Parking, then they can effectively manage and optimize parking space allocations, leading to increased operational efficiency, reduced congestion, and enhanced user satisfaction.
If parking administrators use Smart Parking reports for analytics, then they can gain valuable insights into parking usage patterns, optimize pricing strategies, and make data-driven decisions, resulting in improved revenue generation and resource allocation.
If city governments adopt Smart Parking, then they can enhance urban mobility, reduce traffic congestion, and create a more sustainable and user-friendly parking infrastructure, contributing to a smarter and more connected city environment.
Value Proposition
For Drivers:
Convenience and Time Savings:
Easily find and reserve parking spaces in advance.
Minimize time spent searching for parking, reducing stress and delays.
Real-Time Availability:
Receive instant updates on available parking spaces.
Ensure a seamless parking experience with accurate, up-to-the-minute information.
Cost Efficiency:
Optimize budget by accessing cost-effective parking options.
Avoid fines with timely notifications and reminders.
Safety and Security:
Enhance personal safety with well-lit and secure parking areas.
Get real-time security alerts and emergency services integration.
For Parking Administrators:
Occupancy Management:
Monitor and manage parking space occupancy efficiently.
Optimize space utilization for increased revenue.
Data-Driven Insights:
Access analytics on parking patterns and trends.
Utilize data for informed decision-making and infrastructure planning.
Streamlined Operations:
Automate payment processing and reduce administrative overhead.
Enhance customer service with streamlined issue resolution.
Sustainability:
Support environmental goals by promoting efficient parking.
Encourage carpooling and reduce congestion through smart parking solutions.
For City Governments:
Traffic Management:
Alleviate traffic congestion with efficient parking solutions.
Improve overall traffic flow and reduce carbon emissions.
Revenue Generation:
Boost municipal revenue through optimized parking fees.
Leverage data for strategic urban planning and development.
Smart Infrastructure:
Integrate IoT technology for smart city parking management.
Showcase commitment to innovative urban solutions.
Community Engagement:
Foster a positive relationship with citizens through enhanced services.
Demonstrate responsiveness to citizens' parking needs.
Ideate
Competitive Audit
ParkMobile:
Offers mobile parking payment solutions, allowing users to find and pay for parking spaces through a mobile app.
SpotHero:
A platform for finding and reserving parking spaces in various locations, providing real-time availability.
ParkWhiz:
Enables users to find, book, and pay for parking spaces in advance, with a focus on both on-street and off-street parking.
Parkopedia:
Provides information on parking locations, pricing, and availability globally, integrating with in-car navigation systems.
JustPark:
A platform connecting drivers with available parking spaces, allowing for reservations and payments.
Smarking:
Focuses on data analytics for parking management, optimizing parking operations through IoT technology.
Spaceek:
Utilizes IoT sensors for smart parking solutions, helping users find available parking spaces and reserve them in advance.
During our research there was a gap in the Iranian market for smart parking solutions and there were no local competitors for our product.
Goal Statement
Our Smart Parking Application will let users choose and reserve parking spots in advance which will affect car drivers by allowing them to easily choose and reserve parking spots wherever they want to go and not waste time driving around looking for available parking spots We will measure effectiveness by the number of parking spots reserved every month.
User Flow
Product User Flow
Usecase Diagram
UML Activity Diagrams
Main User Flow UML Activity Diagram
User Authentication UML Activity Diagram
Reserving a Parking Space UML Activity Diagram
Navigation UML Activity Diagram
Payment UML Activity Diagram
User Application's Core Functionalities:
Display Active Parking Lots:
The system must present a list of currently active parking lots along with their specifications.
Show Parking Spot Status:
Indicate the status of each parking spot (occupied, vacant, reserved, unavailable).
Display Floor Status:
Provide the status of each floor within the parking facility, including a map of each floor with marked parking spots.
User-Driven Spot Selection:
Enable users to select parking spots based on their preferences and initiate the reservation process.
Reservation Operations:
Allow users to perform parking spot reservations seamlessly, including the ability to choose specific spots.
Notification for Reservation:
Implement a notification system to alert users when their reserved parking time is nearing expiration.
Paper Wireframes
ِDigital Wireframes
Design
Brand Identity
Logo Design
Our logo features a clean and straightforward design, emphasizing the letter "P" for parking, complemented by a pin icon denoting a specific location on a map. The simplicity of the design reflects our commitment to providing an uncomplicated and efficient Smart Parking solution. The pin icon represents precision and easy navigation, aligning with our goal of offering a user-friendly experience for both drivers and administrators. The logo aims to convey a sense of modernity and innovation without being overly boastful, capturing the essence of our practical and accessible parking solution.
Color Pallete
The chosen color palette for the Smart Parking app incorporates pale pink, blush, quicksilver, dark salmon, and green sheen, and here are the reasons why this palette is well-suited for the application:
User-Friendly and Approachable:
Pale pink and blush tones evoke a friendly and approachable feel, making users feel comfortable and at ease while interacting with the app. This is particularly important for a service-oriented application like Smart Parking.
High Visibility and Clarity:
Quicksilver and dark salmon provide a strong contrast, enhancing visibility and clarity within the app's interface. This ensures that important information and features stand out, contributing to a seamless user experience.
Symbolism of Green Sheen:
Green sheen is often associated with environmental friendliness and innovation. In the context of a Smart Parking app, this color can symbolize sustainability and the use of cutting-edge technology, aligning with the modern and forward-thinking nature of the application.
Gender-Neutral Appeal:
The combination of these colors creates a gender-neutral palette, ensuring that the app is inclusive and appeals to a diverse user base.
Aesthetic Harmony:
The selected colors complement each other, creating a visually appealing and harmonious aesthetic. This contributes to a positive overall impression, encouraging users to engage with the app regularly.
Stress Reduction:
The soft and muted tones of the palette, such as pale pink and blush, can contribute to a calming and stress-reducing visual experience. This is beneficial for users navigating parking-related tasks, which can sometimes be associated with stress and frustration
Core Functionality high-fi design screen-shots
Login/Sign up
The initial screen in our app is the login page, requiring users to identify themselves with their phone number or link their Google account. User data, such as reservations and car info, is linked to unique gmail or phone-based accounts. New users sign up with personal details, and password recovery is available for returning users.
Home
After logging into the app, users are directed to the Home page where they can see availabe parking establishments. They have the option to choose their suitable parking using several methods including searching directly for it, choosing on a map, or choosing from a list of close-by parkings or the parkings they had previously used.
User Profile
If the user navigates to their profile page through the menu, they can view and edit their personal information and their cars.
Parking List
Users can view a list of all available parkings and their information and availability status. To make the list more accessible for people with visual imairments like color-blindness there are visual clues as well as color distinguishment to let them see whether a parking establishment is open or closed at the time of their inquiery. Users can also filter parking lists based on their availability status.
Parking
In the parking page the user can view the parking information including the adress, map and working hours. They can also choose a floor of the parkign and see the status of single parking spots and choose their suitable parking spots in order to proceed with the reservation.
Reserving a parking spot
upon tapping on one of the parking spots, if the spot is availabe the user would be able to pick a reservation time and duration and reserve the spot by paying for it.
If they choose an unavailable spot, they will be notified of it and re-directed to choose a new spot.
Reservations
In the reservations screen, users can see their reservations and their status. They will be provided with count-downs showing them how long they have before their reservation is available, how much time they have left in a reservation and how much time has passed since their reservations have expired. They can book extra time and pay to extend their reservation. The user can also re-book a previous reservation upon availability with just one click.
Admin Dashboard - Government User
The government representative can view the status of all available parkings, their revenue and reservation numbers and analyze data and reports in order to strategize and plan for the city and allocate correct resources to reduce traffic and congestion in populated areas.
Admin dashboard - Parking Attendee
The parking attendee can view the status of parking spots on each floor, control reservations and activities, get revenue related reports in order to improve customer satisfaction and gain more profits.
Product info website
In the single-page information websites users can learn about Smart Parking product and its benefits, find a link to the application and find our company's contact information.
Users and administrators can log into their accounts directly from this website.
Figma Files
you can view all of the components and design pages for Smart Parking product in Smart Parking Figma link