Menu

Beach Bum

Home / beach bum

Beaches in San Diego are not only an integral part of the city but also a part of the culture. We love going to the beach, but very often we end up at an overly crowded beach, find bad surf conditions, or worse of all bad weather. Beach Bum is a class project that used the user centered design process to come up with a solution within a 10 week course. Here are some snapshots of our design process including competitive analysis, storyboards, user testing, prototyping, and a presentation in front of peers and judges.

Our application crowdsources information from users at the beach to our Crowd-O-Meter, Hottie Alert and Popular Activities page so other beach goers who want to go to the beach can check the status of each beach ahead of time. I got 99 problems but a beach ain't one.

Design Process

Over the course of 10 weeks, our team conducted needfinding research, created storyboards, developed both low fidelity paper and high fidelity Photoshop prototypes, tested its navigation flow with users, conducted heuristic evaluations and finally built a functional application supported through Heroku.

Storyboards and Competitive Analysis

Our app can be used by anyone in San Diego, from families, tourists to students. We conducted a competitive analysis to identify and evaluate applications with similar user groups. In our storyboard, we demonstrated how a family and a UCSD student would use different features of BeachBum..

Wireframes, Prototypes & User Testing

User Testing on Low-Fi Prototype

We created two versions of our paper prototype. One version focused on the ability to see live feeds of the beach condition. Our second version concentrated on giving users a customized experience on what their preferences are. We then conducted user testing with these prototypes to gain insight on how and what people would use our app for. Users really liked the ability to check the crowds and update crowd information.

User Testing on High-Fi Prototype

After our 2nd round of user testing, we decided to replace the real-time weather icons on the beach list page to real-time crowd icons. Users cared less about the beach weather and more about the ability see real-time beach conditions like the crowds and activity pages. As a result, we changed the focus of the app from weather to crowd conditions.

User Testing on Functional Prototype

We further refined our design through Google Analytics and A/B testing. We used A/B testing to test different versions of our activities page. We wanted to figure out which design was more intuitive. As a result, we changed the voting process of the activities page.

The Result

Live Demo

At the end of the quarter, we presented the application to judges and our fellow peers, participated in a poster session and gave demonstrations.

"I was Cindy's TA in a course called Intro to HCI cogs 120. I had the chance to evaluate her work and speak with her each Friday in the studio portion of the class. She was a regular contributor to class conversations and provided well thought out criticism of her classmates' projects. The class is project based and her team was consistently turning in work that was focused on creating experiences for their users as well as providing an aesthetically pleasing medium for these experiences. This class requires students to use the latest technology for building mobile web apps while also constantly iterating their product design to be aligned with their results from user testing, usability studies, AB testing and both peer and instructor criticism. Cindy and her group were especially open to feedback and would provide data on why they made certain changes when doing their weekly presentations. While I've never worked with Cindy directly in a professional sense, this class was designed to provide the deadlines and demands that industry places on designers. Her interest in the field of HCI and UX as well as her general thoughtful and pleasant attitude would make her a great member of a team."

-Adam M.