Bored in Isla Vista

As students at UCSB my friends and I found it difficult to figure out where the best happy hour deals were. Isla Vista, California is a quirky town with quirky businesses, so learning about and taking advantage of all of the numerous deals organically was difficult to say the least.

Our solution was to build an iOS app that lists all of the ongoing drinking deals in Isla Vista (IV) so that users could easily plan going out with their friends. I focused on creating a human centered experience that displays all of the  pertinent information in one view. 

Bored_in_IV_grid

Constraints

Our first task was to establish constraints so that we could build an MVP as quickly as possible. We decided to focus solely on IV and not the entire Santa Barbara area to simplify initial research. We also had inherent technological constraints as we were both new to iOS development. There were multiple instances of us being unable to code what we envisioned, which helped to both simplify the app as well as teach a valuable lesson in the power and importance of iteration.

Our Users

I developed a few user personas based on research with friends, neighbors and local business owners. Using interviews and journey mapping, I created use cases and developed a product roadmap. Our users fall into two buckets: students & owners.

BoredInv_wireframes_shadow

Initial brainstorming wireframes

Building the best use cases

Based on our user personas and use cases, we chose to build a page based app. In the first iteration each bar had it's own page with it's deals by day, and swiping left and right switched between days.

With hifi interactive prototypes in hand I brought friends and neighbors over to test the design. I had people explore the app and attempt various tasks, and it quickly became clear that the key to the app was simplicity. It also became clear that there was a desire for location based services, so we integrated Google Maps to provide proximity based deals.

Biv_Initial_Mocks

Quick and easy medium-fi mocks used for initial click testing

As we iterated, the design adjusted to more closely match users' mental models of physical sidewalk deal lists and signs. Selecting which details to show without making the UI overwhelming became challenge. I used subtle variations in typography, color and spacing to keep the UI understandable.

UIProgression

Various UI iterations

User testing revealed that the homescreen didn't reveal enough information, as people did not want to have to open the app and then click through to each bar. In addition, users suffered from cognitive overload and struggled to remember the various deals between bars. They could not easily determine the best deal in the moment, so the new summary homepage aimed to solve this problem by giving users a consolidated page that surfaced the most important information.

I created a quickly scannable list to represent the deals, as they were all homogenous content with few user actions. The early insights into summarization and simplicity were instrumental in shaping the rest of the project.

 

Bored in sb screens

The revamped UI