Park Smart, Stress Less — A JAPA UX case study
Design Interactive Spring ’20 Cohort Project.
What is JAPA?
Park smart, stress less.
JAPA is a free mobile guidance app that provides access to accurate real-time parking availability, parking lot information, and policies. The free app allows users to view spots ahead of time to plan out their parking experience before leaving the house.
JAPA installs parking sensors in parking lots that allow a parking lot manager to view different metrics about their lot, and that allow users to view real time parking availability through their app. Their motto is “Park Smart. Stress Less.”, which is something that has guided our design decisions through this whole process.
Contributors
Roles
Edward Chew: Ideation Lead
Kiara Cowderoy: Mid/Hi-fi Prototyping Lead
Miranda Wong: Lo/Mid-fi Prototyping Lead
Briana Omori: User Research Lead
Scope and Constraints
The JAPA app redesign took place over 5 weeks, from user research to our finished product. Throughout this process, our team met multiple times a week over Zoom to bounce ideas around and discuss the next steps in the project. We also met with the JAPA’s CTO weekly to present the week’s work and gather more information about JAPA’s vision for their app and any technical limitations.
Understanding the Problem
Some of the broader issues we found were that it is slow, there’s a lack of direction — a user does not know what to do in the app — and that many visual elements are unintuitive and lack meaning.
Our solution is to create a mobile application with an intuitive, seamless parking experience that saves time and money.
Context Setting
Who are our users?
Beginning to understand the commuter/parking lifestyle, 2 prominent user groups we talked with were individuals that worked on corporate campuses and students who attended universities. Talking with both parties revealed that most, if not all, lead busy lives (e.g. working and going to school or working in the city) and constantly have to check multiple parking lots and structures due to overcrowdedness. In addition, many city folks described public transportation as often unsafe and slow in reaching their desired destination; even when taking the safer route by commuting using Uber or Lyft, it was usually quite expensive.
How and why would they use the product?
Since a majority of our users were having a difficult time navigating through the app, an Onboarding window was designed to inform users of the usability and functionality of the JAPA mobile application. In addition, we designed 7 new features where users have full control of the app and would be dependent on their set preferences. This way, users can reduce unwanted time friction while increasing productivity so that they can reach their destination quickly and easily.
Understanding Our Client and Their Users
As a growing start-up, JAPA knew what audience they wanted to target but they had yet to get to know them personally. To understand and genuinely empathize with users, we utilized different strategies, including user task analysis, user interviews, and user surveys. These research methods revealed qualitative based insights using the three learning styles: kinesthetic, visual, and auditory to obtain a well-rounded perspective on our users’ thought processes.
Business to Human Questions
To harness multiple and relevant perspectives, we utilized this method of reframing business questions as human questions. This allowed us to negotiate the needs of the business and the customers and to find a common thread that generated shared value for both sides.
User Task Analysis
In the user task analysis, we had different users use the current JAPA app to complete a series of tasks, including locating lot information and finding an available parking space. We were then able to observe the pain points in the current app and the thought process users would have when approaching the task in the app.
We began to understand what thought processes and other factors drive user decision making. By using a user insight matrix, we found that users wanted a guide to help them understand the app and a search bar to easily find parking lots within their area.
Competitive Analysis
We researched a variety of direct and indirect competitors. We gained valuable insights to understand different user flows and common themes within mobile architecture to see where JAPA stands within their competitor pool.
Talking to Stakeholders
To gain a better sense of empathy for the user’s experience with JAPA’s mobile application and to directly interact and engage in user perspectives to reveal their needs, goals, and emotions when commuting or traveling to dense areas with high volumes of traffic.
Offering Feedback Surveys
To pick up on any feedback that users would feel more comfortable telling while being anonymous or any other feedback users forgot to mention.
So what were the main takeaways and what did we learn?
Based on our research, stakeholders talks, and observations, we identified the main characteristics and needs of our audience and broke them into 6 points that we wanted to reflect in our app design:
- Budget Friendly
- Convenient + Consistent Usability
- Safety + Comfort
- Simple, Intuitive, + Accurate Navigation
- Recognition for Customer Loyalty
- Effective Time Management
Identifying New Opportunities
After completing our research, we needed to break down what the problems were and how we could solve them. Our team employed a handful of strategies to synthesize the research and come up with solutions.
The Golden Path
One of our top priorities in the redesign of the app was maximizing efficiency, which made it vital to minimize the number of screens a user needed to go through to complete their task. The Golden Path, also known as the Key User Journey, is a set of steps that would lead the user to find their ideal outcome. We used this to identify the essential screens within the app and how we could optimize the flow from one screen to the next.
Defining Key Features and Solutions
After synthesizing all of our research, we wrote out different “How Might We?” questions to identify issues in the app. We then organized these into categories to find the broader problem spaces to focus on, such as navigation or the parking layout feature. Not only did this help us identify the necessary features for the app, some questions served as goals for the whole project: maximizing visual appeal, making the app recognizable to users, and the focus on efficiency.
With the list of design issues in hand, we prioritized them based on the insights gained from our user research. We brainstormed answers for these questions, some drawn from our competitive analysis, and discussed and voted to select the ideas that could most effectively solve user problems.
Preliminary Sketches
Wireframing and sketching allowed us to develop our ideas further without the constraints of following a design system. We were able to discuss how the screens would interact with one another and refine certain ideas before moving into the prototyping stage.
Turning Ideas Tangible
Our weekly team meetings with the client helped us to pinpoint areas that need attention and further development. As a team, we analyzed ideas that would further the user experience and with that feedback, would iterate our respective categories until we received positive feedback from both the user and client.
Improving Upon Feedback
We conducted a brainstorming session, narrowing down specific tasks for users. That was followed by developing a script as a consistent talking guideline to lower the chances of inaccurate results. Once these were completed, each team member selected 2 users from our desired user groups and tested our design through each task.
Quick Look to List View
We created a quick look/list view feature in order for the user to easily identify the main information of a parking garage such as cost, location, and distance. The problem was how the quick look feature (with map) transitioned to the list view (without map).
Through usability testing, we noticed that it wasn’t intuitive for the user to tap on the quick look information box to get to the list view — a problem of visibility. With the information gathered, we developed a way for the user to simply scroll down to see the list view utilizing intuitive indicators.
Parking Layout
Users expressed that the “Level 1” title was a button and tried to click it because we consistently used this pill shape throughout the rest of the app. We also noticed that most users didn’t try to click on the parking layout cards because there was nothing to indicate that it was clickable.
To improve upon these areas, we turned the “Level 1” title into a button that allowed users to hop in between levels more quickly and added a magnifying glass icon in the bottom right corner of each card to indicate that they could zoom in to see the level more closely.
A/B Testing
To find out what was more easily understood by our users, we conducted A/B testing. In our initial designs, we had used a muted red color to indicate an unavailable parking spot and an “R” symbol to indicate a parking spot with special restrictions.
Although the red hue still communicated unavailability to our users, it wasn’t as noticeable.
We changed the red parking spot icon color to a more vibrant and bold red, which more quickly identified as an occupied space.
We found that users thought the “R” meant reserved.
To help our users understand its actual meaning, we replaced the “R” with a star icon and added an explanation of what the star meant to clarify its meaning even further.
Bringing It All To Life
Sign In/Sign Up
After opening the app, new users are prompted to create an account by entering their phone number, name, vehicle information, and preferred payment method. This serves to make all future parking experiences simpler, such as paying for parking and identifying where they last parked.
Onboarding
To highlight features of the app and convey the goals of JAPA, a brief set of onboarding screens appears after the first sign in. Users can swipe through the information, or skip it should they prefer to explore the app on their own.
Map Screen and Quick Look
Users can identify parking locations in the area, filter options to their situation, and quickly access information such as an address, cost of parking, and distance. This new workflow and structure allow for easy scalability and gives more control to users.
Parking Lot Layout
Users have the ability to check parking spot availability on multiple garage levels. They can easily decide which level to park on based on the color-coded parking spots.
Lot Information and Navigation
Next is the lot information page, which comes up after a user clicks into a particular lot. Here they can add the lot to their saved lots, see all the details about a parking lot — including the availability of different types of parking spaces — and they can get navigation to the lot without ever leaving the app.
Saved Lots
Users can save their frequented lots/garages to check parking availability quickly without having to search for the location. They can also delete any locations they no longer visit.
Profile and Payment
Users can access their payment information through the profile. This allows for future integration of in-app parking payment and efficiently organizes their transaction history.
Challenges
Design Consistency
When we began wireframing for the project, parts of the app were divided up among the team to work on, but this eventually led to inconsistent visual styles across the screens. By creating a design guide, we were able to edit our work and ensure brand consistency and corporate style across all screens.
Designing for the User
At the start, there were quite a few usability issues with the JAPA app. With this foundation, we had to identify ways to create a seamless experience and advocate for the user during client calls. This was difficult at times, but through consistently referring back to our user personas and utilizing data collected from research, our team ensured we kept the user first throughout the design process.
Working with a Client
Doing work for a client was relatively new to many of us. From information we gathered in our discussions with the client, we had to determine how to best design for the needs of the client’s product and what they envisioned the future of the app to be. We were able to tackle this by being in constant communication with the client and getting feedback frequently
Our team followed a firm design sprint schedule in order to produce a final product at the appropriate deadline. With this, it was a bit tough when it came to rescheduling meetings and readjusting our timeline. We worked through this issue by reorganizing our workflow to be flexible and convenient for our client.
Remote Collaboration
Working amid a pandemic, all work had to be done remotely. While scheduling the many Zoom calls and communicating ideas would sometimes be difficult, we were able to stay organized and make things work.
Looking Back At The Journey and Towards The Road Ahead
What Would We Do Differently?
Although we conducted various qualitative research, we’d love to tackle on conducting more quantitative research such as eye-tracking, card sorting, and tree testing. Furthermore, we want to understand how design and the technical side work, hand in hand, which includes logistics, analytics, and shareholder input to name a few.
Did we achieve our goals?
Looking at our goals and final outcome, it seems that we were successful in creating a time-efficient and accurate parking experience based on feedback from our client, users, and our mentor.
The JAPA team was impressed with the design and they plan to eventually implement our design. While we won’t have the metrics of the app’s impact until features are fully implemented, we hope we’ve helped make finding parking a little easier.
