Day 5: Building and User Testing
Chris Tetreault, Mariya Kopynets, Saveen Chadalawada, John Wishon, Eric Kingsley, Emily Small
Imagine this common scenario: you’ve been circling a parking lot for approximately 10–15 minutes and not a single car has even budged. You anxiously look at the clock to see how much time you have before a meeting or class starts. You start to pray that magical parking spot somehow opens up in front of you because at this point, it seems only divine intervention can save you. You exit the parking lot hoping for better luck at another lot just as someone enters the lot to get their car and leave. But unfortunately you miss them. The problem here is that if you had showed up to the lot 1 minute later, you would have gotten that spot. Our solution is Beep: an app that provides a way for drivers leaving their spot to communicate with drivers searching for open parking spot. This app doesn’t promise or guarantee the looker a spot, it simply provides information about where a spot might be. By using crowd-sourced information, the app doesn’t necessarily have to watch each and every spot and report if it’s occupied or not. It only reports changes over time which is more beneficial to users. Also, it prevents misuse of the app by using the averages of data collected rather than most recent reports.
Beep is the simple, fast, and secure way to find parking, buy permits, check out specific lot analytics, and even find your vehicle if you forget where you left it. Next time you find yourself on campus, don’t get frustrated with the horrible parking situation, just remember to BEEP: Be Excited and Enthusiastic to Park! So, stop wasting time and start parking with Beep: your handy parking companion.
Reflection on the Beep app development process
One hot summer ufternoon 6 strangers ended up at COGS 187A course. We all had different life and academic backgrounds, and took this course with a goal for learning information architecture techniques. None of us had a clear vision what the course might reveal.
During the next 5-weeks as a group we’ve experienced the Mobile app design process. The task was to identify a problem and collaboratively solve it. Our team of six decided to proceed with the concept of creating a mobile app that solves the hassle of parking at UCSD and other universities and institutions. The aim was to allow students, faculty, and staff to be able to search for parking spots throughout the campus. The process of identifying challenges served as an ice-breaker for our team and in a matter of few days the group was working smoothly together and effectively solving problems.
We interviewed 17 potential users, and identified six different persona types representing six categories of drivers: Student, Faculty, Staff, Motorcyclist, Disabled, and Visitor. We analyzed the data and identified most frequent concerns: (1) they wanted an app that’s simple and easy to use; (2) to monitor occupancy of the lots; (3) to purchase temporary parking permits and load funds to their account remotely; (4) to view on the map where their car is currently parked; (5) to monitor specific parking locations, such as Hopkins, Athena, Gilman, Regents, Equality & Voigt, East Campus 1 that they frequent; (6) to include visual indicators with distinct colors representing A, B, S, V, etc. parking areas.
During week 4 we created a low-fidelity prototypes of our app and proceeded to identify challenges that app users might potentially discover. We interviewed our classmates, and later performed Heuristic Evaluations following the 10 Usability Heuristics for User Interface Design by Jacob Nielsen. At this point our team was eager to finalize the app. With peer and faculty feedback, interviews, and heuristic evaluations completed, we were confident about how to create the final High Fidelity Prototype of Beep!
During week five we created an elevator pitch and presented our final high fidelity prototype of Beep app to evaluators & peers.
High Fidelity Prototype
We were entering the final stretch of development, and we needed to start wrapping things up. User testing had ended and we had finalized the heuristic evaluations. All that remained was to implement our final high fidelity prototype and pitch our app.
We convened a meeting to discuss the big questions. How would we implement the final prototype? What changes would we make to the app? What constraints would impact our app moving forward?
The first order of business was to settle on a UI toolkit. Since this would be high fidelity, it was no longer good enough to just have generic widgets; the app had to be polished. We decided to use a material design interface, and after much deliberation we agreed to use red and blue-grey color scheme.
Next, we needed to decide what actual changes we would make to the app. The first major change that was made to the initial prototype was the elimination of the found parking survey. It was decided that it would be a hassle for users to be presented with this screen when they park, and as a result they might just not push the “I parked” button. We decided that it would be enough that a person who is leaving a lot could do this survey, and if a person leaving a lot chose not to push the “I left a lot” button it wouldn’t leave any stale data in the system.
The next major change was a feature addition. Users felt that it would be useful to be able to use the app to remember where you parked, and we agree. We decided to add a feature to remember where the user parked, and this is integrated seamlessly into the map view.
With that settled we divided the labor and set off to work. We divided up the work and settled on a prototyping framework. We decided to go with proto.io for our prototyping framework, and this choice allowed us to create very attractive mockups. The proto.io platform also had a very compelling feature that allowed a prototype to be loaded up as a seemingly native app on a physical mobile device. The proto.io site offered a 15 day trial of their platform, and given the fact that the project was due in 12 days, this worked out perfectly for us!
Things we’ve learned in class:
- Creating personal portfolio websites
- Infographic design implementation in Resume
- The importance of user feedback
- Usability evaluation methodologies
- Parallel Prototyping & Design Confidence
- Heuristic evaluations of high and low-fidelity prototypes
- Working in a team/time management/coordination
- Group presentations and strategies for an effective funding pitch
- Resources: Slack, Medium, Balsamiq, Pixton, Proto.io apps
- HTML, CSS, Bootstrap, and JQuery
Things that were unique and surprising during the last one month:
- Creating an environment with live user testing and feedback to then gauge the accuracy and navigability of an application showed which parts are fine-tuned and which parts still need to be simplified/explained better. This was both unique and surprising.
- For our application specifically, it was surprising to see the number of students, graduates, staff, and faculty that were enthusiastic about our product. This goes to show how important need-finding is.
- It was a unique experience to develop a prototype using Balsamiq and Proto.io versus the more traditional way with wireframes and/or paper and pencil.
To conclude, this five weeks course was challenging, fast-paced and information heavy. Despite the challenges, our team gained a great deal of design, programming, and team-collaboration experience.
Thanks to Mary ET Boyle, Rahul Ramath, Kandarp Khandwala for all their feedback and support.
Read Previous BEEP Articles: Revised Prototype & User Feedback, Personas & Storyboards, Need Finding & Competitive Analysis, Team Building and Logo Design
References:
Klemmer, S., HCIOnline (2016, Apr. 11), Lecture 4.2 Design Heuristics (Part 1/3), Retrieved from https://www.youtube.com/watch?v=gSm6bOw-KcQ&list=PLNtQfKgd43l2ybf4ukgGz5513zKBXCMgM&index=2
Klemmer, S., HCIOnline (2016, Apr. 11), Lecture 4.2 Design Heuristics (Part 2/3), Retrieved from https://www.youtube.com/watch?v=Hi6YO1tTqTk&index=3&list=PLNtQfKgd43l2ybf4ukgGz5513zKBXCMgM
Klemmer, S., HCIOnline (2016, Apr. 11), Lecture 4.2 Design Heuristics (Part 3/3), Retrieved from https://www.youtube.com/watch?v=tLFrVe4o_98&list=PLNtQfKgd43l2ybf4ukgGz5513zKBXCMgM&index=4
Nielsen, J., How to Conduct a Heuristic Evaluation, 1995, Nielsen Norma Group, Web. https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
Nielsen, J., 10 Usability Heuristics for User Interface Design, 1995, Nielsen Norma Group, Web, https://www.nngroup.com/articles/ten-usability-heuristics/
Rosenzweig, E., Usability Testing, Chapter 7, Successful User Experience: Strategies and Roadmaps, 2015, 131–154, Print
