ParkIt by Team RockIt

teamrockit
COGS 187A Summer 2016
14 min readAug 6, 2016

Team Members: Cherin Kim, Kyuheon Lee, Christopher Jordan, Koji Kameda, Nick Kelly, Yubin Cho

Written By: Kyuheon Lee

Every group member has different educational background. We will be using this aspect to create something creative and productive. Our goal for this project is to make something that is useful so that everyone around us could use.We will rock this project. We are Team RockIt.

Logo Design

During our first week, we decided to make a logo that represents our team. The logo has to be related with our team name and also the project that we are going to do. At that time we had bunch of ideas, however, we didn’t know which one to pick. In addition, some new ideas might come out.

IDEAS!!!!!!!!!!!

As a result, we all agreed that the logo should be as general as possible. In order to come up with an interesting logo, we all had to come up with at least three logos for our team. We tried to put everything in one pile and looked at each logo one by one. Each logo had unique feature that the other one lacked.

In the end, everyone had to vote two logos that he/she liked. We tallied the vote and found two most favored logos among the members.

In order to make those logos more appealing, we tried to mix those two into one. While doing this we didn’t want the logo to be too crowded so we tried to remake the logo as simple as possible. We also tried to use various colors so that we could pick the best color for our logo.

Possible Colors

As a result, our first version of our team logo was created. Designing of our logo is still an ongoing process. We will be changing the logo a little bit later.

We now have a logo that represents who we are. The next step to this 5 week project is to come up with an idea. Let’s rock!!!!!!!

Week 2: Needfinding

Written By: Cherin Kim

Team Rockit has been launched for needfinding! After our creative progress with the team logo, we began to brainstorm for our project, interview different groups of people, and analyze competing apps to further continue finding people’s needs.

Brainstorming

Now that we have more of our own team’s identity, we processed onto find out what kind of projects we want to tackle and solve. Brainstorming the ideas was definitely one of the hardest yet one of the most interesting time to spend. As designers in the process, we basically threw a bunch of needs around us. As we can see on the photo below there are diverse fields of ideas that could be referred for our project. We did not want to deny anyone’s ideas because all of them could be improved by readdressing with reasonable needs.

Ideas in various fields

After thoroughly examining all of the ideas, we narrowed down to top 3 choices by voting and came up with CSO walk, opponent finder, and house manager. We, then, discussed pros and cons in each ideas and thought about what could be provided to improve those issues.

Getting down with pros and cons

After a great amount of time discussing different points of views, our team voted to eliminate one of the choices and continued on with two ideas. We spent more time with pros and cons with those two ideas. HOWEVER, while narrowing down to a final decision, another idea came upon our team: valet parking! After we continued talking about the new idea, we decided that valet parking would be our final decision.

TADA! Small yet so bold

Interviews and Competitive Analysis

Taking our ideas out to the real world, in order to figure out our realistic needs and personas, we went out to interview different groups of audience. We encountered with professors, faculty members, students, and visitors to ask them a few questions about their parking experiences at UCSD. As Patnaik and Becker mentions, it is important to set yourself out there and truly figure out people’s needs by actually studying them and their routines.

Overall the interviews displayed how most of them have hard time finding parking spots, which also makes them harder to manage their schedules. In addition, we asked them whether they would use valet service if it was available on campus. Mostly students would like to use the service if it will be at a reasonable price and said that it would be really convenient when they are in a hurry. In addition, the faculty members and professors showed positive responses if the valet parking would be cheaper to replace their parking permits. It is understandable. No one would want to spend double money in doing so.

In addition to our interviews, we also analyzed the competing apps. We explored each of their features and their strengths and weaknesses to further take in what kind of services are provided and what can be improved for the better.

As our project is valet parking, we searched and came to find Valetanywhere, Luxe, Flash Valet, and Uber. Each of us examined the features of each service and came up what they already have implemented and what they lack of. Overall, all of these existing apps have several different plans for their customers and serve great purpose in providing them with valet parking. However, they are positioned in certain locations, not being able to provide them to UCSD specifically. Because our general target audience is drivers that park at UCSD, we want to hone in on our own idea with features that solve our needer group.

Seriously analyzing competing services

As we came up with analysis and interviews, we will considerate the results to further discover different needs in each personas and continue with our process of needfinding. As we are still sharpening down on our needer group, we are looking forward to start our storyboards for our next phase!

Week 3 : Personas and Storyboard

written by: Yubin Cho

Team Rockit is now ready to start our next mission! From last week, we brainstormed our project and discussed ideas to find people’s needs. We analyzed three most voted ideas by listing their pros and cons. Our team agreed on most exciting and useful service, the valet parking. In order to design the project that is value to users, knowing our target persona is vital and the best and easy way to do this is to create a storyboard.

Personas

In last week, our team interviewed various people who can be our target users, UCSD students, faculty members, professors, and visitors. As we organize our findings from interviews, we could see some patterns. We found that all these people had same frustration when finding a parking spot, no matter what kind of parking permit they have. No one wants to waste their time for parking.

Based on our interviews, each member in our team created one persona that best represents the target user.

We first gave name to each persona to make a prcoess simple and clear and focused on describing user’s profile, goals, needs, and frustruations. To make a good persona, we maintained that our persona is realistic and reflects patterns from interview. As a result, we came up with total 6 personas: 3 students, 1 faculty member, 1 professor, and 1 visitor. Each persona is distinct and memorable. If we say one of name of our personas, we can recall that person and able to represent him/her.

Since we created our personas, now we can apply them to user-center design process and begin to ask question such as “Stacey would love to use this feature, but would Alan use this?”

Storyboard

We created personas and now it is a time to bring life to them. Storyboard is basically an user story. By making a storyboard, we can visualize how users are going to use the app that we designed. Through this story, we, as designers, can have better insights of users.

Our team created multiple scenarios based on the goals and frustrations of personas.

The story begins with user encountering the incident. The user struggles and ends up with using the valet parking app and guess what? Problem resolved. Finally at the end, we show the changes in the user’s life. It is simple as that! While making the scenarios simple and easy to follow, we had to make sure that we focus on real users in real contexts. This is not a science fiction or magical story with broom and frog.

Let’s take a look at more storyboards.

For the scenarios, we tried to think of various but possible stories that could happen to our personas.

Our storyboards are based on the personas. We discussed each persona’s personalities and behaviors and imagined what kind of conflict would they encounter. For example, Kristy is a night time person. So she would often wake up late and use this app to be on time for her classes. Alan prioritizes efficiency. So he would use this app rather than waste his time on finding for empty parking spot.

In this week, our team finished making personas and storyboards. Our next mission will be prototyping for better design result. Let’s keep moving on!

Rapid Prototyping

by Christopher Jordan

With our materialized user personas and app storyboards, we began discussing how to best provide a valet service application to satisfy our user’s parking needs and greater goals. This was achieved by conversationally sharing our individual ideas and thoughts for how we envisioned general usage of the application. The team agreed the service would start with the user requesting a valet, the user would drop their car off at the valet driver’s location, and would be able to request their parked car at a later time. With dry-erase marker, we began translating our storyboards into application screens and transitions.

The conception of the ParkIt user experience

From here, each individual team member was tasked with creating their own mock-up of the full user experience. With our individual contributions, we were able to compile an early prototype. The prototype covered the necessities for account sign up, login, requesting a valet, and retrieving a parked vehicle.

Let’s take a look at that compiled prototype:

First prototype of ParkIt by Team RockIt

To validate and improve our UX, we printed out each of the possible states of the prototype to facilitate initial user testing with our peers. We sat down some potential users and had them literally use our application by pointing and “clicking” on the paper screens, dispensing the correct screen as they progressed. Notes were taken as we watched our peers interact with our design.

A peer using our prototype

Additionally, we helped some other teams with their project by providing feedback for their designs. Seeing the successes and problems of other designs allowed us to relate similar usability experiences to our own design. From a total of 4 peer evaluations, the team gained some insight feedback to help us further construct and tweak our design.

Features to add based on initial feedback

The main flow of our interaction was validated, and we were able to uncover some potential sources of confusion. Through interviews with our testers, we discovered information that the testers felt was missing from the experience, including their valet driver’s info & the location and status of their car throughout the service. This feedback was compiled and we generated a list of features to add to our next prototype iteration.

To really get a feel for the direction we needed to take our prototype, the team performed heuristic evaluations of our initial design. We did this by first listing out each of Jakob Nielsen’s 10 Usability Heuristics for UI Design. Underneath each heuristic, we listed all the elements of our app that the heuristic touched upon. For example, for Nielsen’s Error Prevention heuristic, we listed the possible errors the system could encounter, and began to think about the best way to prevent these errors:

Potential errors the system could encounter

With this evaluation, the team was able to begin thinking about changes that could be made to our initial prototype to provide the highest level of usability. Here are just some of the final design changes we ended up making to our prototype, along with the affected usability heuristic and reasoning behind the design change.

Design decisions we made & why we made them

At this point, we had a solid idea of how our app was going to function from requesting a valet to retrieving a parked car and completing the service. The team used Balsamiq to quickly and rapidly create a clickable PDF prototype of our application based on our initial feedback & heuristic evaluation. It was quite satisfying to be able to use our UI and see where things would and would not work. Here are some shots from our final Balsamiq PDF prototype:

You can take a look at our initial clickable prototype PDF here. With this tangible draft of our full user experience, the team will be able to begin implementation of the application. This step in the creation process of ParkIt will prove incredibly useful, as referring back to our low-fi prototype will simplify the task of implementation immensely.

Final Prototype Implementation

by Koji Kameda

After final user testing, our team came up with a set of revisions that were common among the suggestions received. As we brainstormed different methods to implement the revisions, our team ran into one particular issue — weighing tester feedback versus business practicality and design implementation. While initially choosing to implement a user-submitted rating system for the valet drivers (due to popular demand), we eventually decided against the idea for a couple of reasons:

  1. Rating systems indicate a variable quality of service. Unlike common app-based taxi services, our valet parking service does not present an “experience” from which one would be able to evaluate an employee’s rating. Catching a cab involves the user’s physical presence for an extended period of time — a scenario that can easily be experienced in positive or negative manners. Much like how one would not give a scalable experience rating (i.e. star rating) to a coat check employee, our valet service would not have a practical use for a scalable rating system (N.B. here we are only discussing the efficacy of a scalable rating system, not the efficacy of general feedback).
  2. Allowing users to rate our valet drivers gives the impression of a business powered by crowdsourced amateurs. While that particular model may be tremendously effective for a app-based taxi service, a valet parking service needs to be solely comprised of professionals. Potential users would be easily deterred by the notion of a poor driver handling one’s precious vehicle.
Revised set of design changes — removed employee rating system

We then continued the final implementation process. After discussing potential color schemes, our team decided on a combination of teal, yellow, and different shades of grey. In addition to being “easy on the eyes”, this particular color combination instills feelings of freshness and trendiness. As a service aimed towards a technologically able student and faculty body, “fresh and trendy” fits perfectly with our valet service — providing a fresh escape from the hells of campus parking, as a growing trend towards supporting student needs.

Teal, yellow, and shades of grey. Fresh AND trendy!
Sofia Pro, Quicksand font examples

As for fonts, we decided on a combination of SofiaPro for general text, and Quicksand for the all-uppercase text to be placed on buttons. Advertised as a feminine typeface, SofiaPro’s minimalist design was the exact clarity and conciseness we were looking for. Quicksand presents itself as a more rounded, softer version of popular label fonts such as Arial or Monsterrat, tying itself neatly within our chosen design scheme.

Using Adobe Illustrator to produce our finalized screens, our team completed the revisions through several collaborative sessions of content production. Thankfully, the Invision App was a much more powerful and user-friendly tool than Balsamiq. Allowing for overlaid image transitions, our team was able to model our final prototype much more closely to an actual code implementation than before, as Balsamiq had required tedious workarounds to achieve the same effect.

Let’s take a look at a few of the overlay revisions:

Left to right: help screen overlay, updated “request valet” screen, driver information/car location overlaid on map

Satisfied with our resultant prototype, Team RockIt is ready to blast off with the ParkIt valet service. In an effort to eradicate extensive parking fees and general inconvenience, Team RockIt aims to facilitate the day-to-day livelihoods of its clients, trapped in an otherwise unwinnable scenario.

App Description & Takeaways Summary

by Nick Kelly

ParkIt is a valet parking service for UCSD students. It allows its users to drive to central hubs on campus and then have their car driven off campus and parked for them. The car will be driven back upon the user’s request, thereby providing an alternative to the abysmal student parking.

Individuals in our team have specifically mentioned how they learned the following:

  1. The relevance of logo design with regards to advertising.
  2. Value of needfinding
  3. Value of parallel prototyping
  4. Value of Lowfi prototyping before implementation
  5. Value of Heuristic Evaluations
  6. Drawing the logo/concepts out on paper before finalizing it
  7. Researching our need and target audience in details lead to better understanding in how to create our app
  8. Careful planning is crucial before actually implementing the design
  9. User testing allows the developers to see their project from different view.
  10. Team members need to adjust to other people in order to work as a group. Communication is the key

Ultimately, as a team we learned how to take a concept and walk through the stages of design necessary to arrive at our product.

--

--