spotme solutions

Helping SJSU students find parking the easy way

• Timeline: Spring 2018 - Spring 2019

• Role: Design Lead

• Skills: Brainstorming, wire-framing, visual design

• Tools: Sketch, Illustrator, Photoshop, InDesign, Figma

The Parking Hassle

We all know the struggles of parking. San Jose State University is known for its impacted student population and scarcity of parking spaces on campus. According to a survey, 62% of SJSU students who have a parking pass experience being late to work or class due to not finding parking. It’s expected to wait somewhere from 20 - 40 minutes to search for a single spot in the garages. Most students commute between home, school, and work so time and gas are precious resources. Spotme wants to reduce that amount of time and gas so students can arrive to their destinations on time and not worry about something as a simple as parking.

The Solution

Our app is a mobile platform that delivers real-time parking garage data to users. The app is sent information from a hardware sensor that counts the number of cars entering and exiting a garage revealing how many parking spots are left open. As the Lead Designer, I was responsible for forming the brand identity, revising business presentations, and designing marketing material and social media graphics. I worked with a small, dedicated team of engineers, graphic designers, and business disciplines to develop the user interface for the app release on Google Play and the App Store. Once we had a functioning prototype, we decided to enter competitions.

We placed as finalists the 2019 Paseo Prototype Festival and won the Honorable Mention Award at the 2019 Silicon Valley Innovation Challenge.

User Flow and Wire Framing

When I joined spotme, I was one of three designers recruited to work on the visual aspects of the parking app. For the first two semesters, we would meet weekly to discuss, brainstorm, and sketch out potential logos, color palettes, and user interface prototypes. After compiling research from SJSU students and competitors, we decided we wanted our app to be the parking “Yelp” of downtown San Jose. We sprinted through multiple renditions of the app design experimenting with colors, icons, and call-to-action buttons. Under our Design Lead, Daisy, we recognized the need for a simple web flow so our user can navigate the app with ease. Based off her wire-frames, I brought her ideation to life through Sketch.

Before this project, I had just started hearing the word Sketch be thrown around in the classrooms. I took it upon myself to download the free month trial and dive into the program headfirst. Honestly, the interface is so user-friendly that the transition from Photoshop/ Illustrator to Sketch wasn’t as daunting as I thought it’d be. I translated the wire-frames to low-fidelity prototypes so the team can visualize the project and start implementing the front-end and back-end work. Some features proved difficult to realize so we ended up changing certain aspects. Around this time, our design lead had already graduated so Steve, our founder, asked me to step up to the position. I took on the challenge and decided to initiate a rebrand in both identity and the UX before we launched our prototype in following competitions.

Redesign and Marketing

Fall was a semester of change. After talking to a couple of students on campus, I realized that most people thought our brand was about cars. Technically, yes, we are related to cars but our product was an app that would be primarily used on phones. I made a connection that icons and logos of cars are typically tied to the automobile industry where a person can literally buy a vehicle. So we opted for a different route with our logo and decided to just focus on the name, spotme. Inspired by tech companies, I chose the typeface Nunito, a sans-serif type with rounded edges. It gives off a friendly, bubbly energy. For the body text, I paired it with Open Sans because its family offers versatility when it comes to font weights. As for color, we pivoted from a pale teal to a reliable blue that is normally associated with tech and innovation.

When it came to the UX design, we scaled down our user flow so we can concentrate on the necessities: landing, home, and parking information. Due to upcoming competition deadlines, we wanted to revisit these core screens for our prototype presentation. We changed percentages to icons of checks and x-marks so it’s easier for the user to quickly read and click the button to access parking information. Different colors indicate different availabilities: red and orange equals high amount of occupied spaces while green holds low amount of occupied spaces and blue being the lowest and ideal for finding parking. At the top right of the interface is the navigation button to view settings and profile while the top left provides a button to refresh the app when searching for available spaces. This was our final design decision for our high-fidelity prototype.

Reflection

The prototype was received fairly well at both competitions but the attendees and judges were more impressed by how much content our team presented. There was a working app, a large monitor to introduce how the app works, a laptop presentation showcasing our process and team, and informational brochures. The spotme team doesn’t mess around when it comes to presentation!

Something I learned through this little start-up is that everybody starts from nowhere. None of us had prior knowledge to knowing how to create a product from start-to-finish. It’s amazing how this young and scrappy team of engineering, design, and business majors pulled together to make an app that our peers can potentially use. We all understand the struggle of parking so that’s what made working on this project more meaningful to us. Now looking back, there are some design choices that I would have done differently, but then I remember that failure is necessary for growth so I can learn from my mistakes and improve in the future.

Here are a couple of designs I did earlier before I took on the initiation to rebrand.