Spot A Parking
What is Spot A Parking?
Spot A Parking is a mobile application for university students, faculty and staff who wants to park in the campus vicinity. It will provide the real time availability tracking for parking lots, unlike reaching a parking lot and then searching for a spot. It will guide the user towards parking lots with empty spots, so she does not have to waste time driving to a lot that is full.
Details
Duration: 6 Months
Design team: Me
Research team: Ishani navle, Katie wofford and Me (every body participated equally).
Research methods - Observation, User Interviews and Surveys, Affinity mapping, Personas, Journey mapping, MoSCow method, Kano model
Prototyping- Sketch App, Invision Studio, Photoshop, Pen and Paper
Code- HTML, CSS, Javascript and Bootstrap framework
Background
Value Proposition Canvas
Problem: I had to pick a problem to solve, for learning how to solve a problem through design thinking. So, I picked the problem of parking around the campus because some of our classmates have struggled with finding parking spots around campus. They complained that parking space is limited around campus therefore they are not able to park quickly and rush to their classes. Which was the sole reason for coming to the university.
Me thinking - why they have this problem and how can I get rid of their problem. How can I make them reach their class on time? While making their process of finding parking smooth around campus.
I did not want to jump to a solution like designing an application and calling it a mind-blowing solution. Also, we are taught in the design school to not to think of solutions first. Famous scientist Albert Einstein has also quoted “If I had an hour to solve a problem, I'd spend 55 minutes thinking about the problem and 5 minutes thinking about solutions”.
We started with the 5 whys. To understand what the real problem is by discussing all the possible root causes for why students are not able to find parking to park their cars. Then further divulged into the "How might we" statement to think about all the innovative possible solutions that can be applied to the parking problem.
How I got there: Research and Research Synthesis
Double Diamond Theory_stock photo from wikimedia (https://commons.wikimedia.org/wiki/File:Double-diamond-process.jpg)
Design Thinking: While solving the course of the problem, I followed the double diamond theory which states that we can iterate while diverging the ideas during the research and prototypes and then converge on the single best idea. I started with research methods to understand the key user problem, then crafted the UI design starting with low fidelity design and getting iterations critiqued repeatedly. Finally, made the high-fidelity prototype and then coded the home page.
Affinity mapping
Interview Insights
User Research: Conducted surveys to know how the students, faculty and staff feels about the general parking experience. By using the service of Survey Monkey, we created the questionnaire and posted the survey on the college’s social media groups like What’s app groups and Slack.
After knowing that people really have trouble finding parking, I started to conduct the interviews to understand what they did when they were stuck with a parking problem and how many times it has happened etc. Additionally, we attended the parking committee meeting to understand the perspective of the authority on the parking problem.
The interviews and the college parking meeting gave us the adequate amount of information to build our persona on. User Persona is created to understand different user segments. UX Design personas are based on understanding the motivation, pain points and goals of a user. We created three user personas.
This page deals with the design process in entirety. Read more in detail about the research process and user testing here.
Research Insights: Parking at East Falls Campus takes up valuable time for students, depending on the time of day, generally taking more than 15 minutes. Needs of the User is to get to park quickly around the campus and register for permit easily
Designing an application for finding an empty spot may not be an only solution. There can be other solutions as well like having an application for integrating into the car play. So that the user can not have to use a mobile phone. Giving incentive to those who starts to use public transport could be another solution. But we wanted to learn about the dynamics of user experience design, so we chose to go for mobile application design.
What I did: Sitemap, Low Fidelity and High Fidelity Design
Site Map
Mood-board
UI Kit
App icon
Feature selection: Considering empathizing to the user needs first. Before I started with wireframing, I wanted to prioritize features of the application. I did that through the MosCow method and Kano model, which was taught in the class to rank features according to their importance and sequence in which features of the mobile application can be released like version 1, version 1.2 etc. This exercise helped me to identify the most important features for the user and which were the additional features that can be added to make the application delightful to use. So, for the first version I selected the most important features like a parking tracker for saved spaces and preference adjustment according to accessibility and the day of the week etc.
I then created the site map to try to place those important features in the application where the user can easily access them. Also making sure that users will not have to click many times. Therefore, I made my parking tracker as a homepage, because the user is ultimately coming to the application for searching available spots on the application.
Low Fidelity Wireframes and Rapid Feature Validation: Created the low fidelity wireframes with pencil and paper and collected feedback from the users. What I learned from the rapid validation is everybody has different schemas for perceiving the same information. For example, I had drawn a dial for showing the difference between empty and full spaces for a lot, but my classmates perceived it for the entire college space. Another insight that I got was my inputs methods for the preference page should be more developed to comprehend them. After getting the first round of feedback, I tested my wireframes with a few more of the students from both graduates and undergraduates background. I tested them on understanding the flow of the application and being able to read the screen quickly i.e. identifying what was on the home screen. After making the appropriate adjustments I converted these wireframes to digitized versions of the sketch.
Visual Design: I then wanted to add colors and style to my design so I created mood board to understand what visuals will be best suited for the project. Important considerations that I made while developing the visuals were
Typography has to be readable, since the driver would have peripheral vision while driving, so researched about the fonts that have better readability.
The research showed that Eido font, Open sans and Courier font have better visibility. So, I chose Open sans font.
Color contrast was important because of easy readability.
Jefferson style guide was also referred to.
Color and Type Kit
Wireframes
Built interactive prototype with Figma
Below is the link to Github repository for Spot a parking code.