vibe

Skills I used: user research, needfinding, competitive analysis, wireframing, interaction design, visual design

Collaborators: Jon Chan, Parker Bossier

Summary: Vibe is an iPhone application that allows people to experience the vibe of a cafe in real-time. It was created for mobile workers who need to find a cafe with the right atmosphere to do work during breaks or in between jobs. Both customers and business owners set the vibe of the cafe by uploading pictures and videos, and rating the vibe as “plenty of space,” “perfectly balanced,” or “bustlin’ and hustlin’.” The application fills a niche that social media and review sites do not provide–visceral and accurate customer-supported information about establishments in real-time. 

Final Screens

1. Main splashscreen.

vibe-01

2. Home screen shows the vibe of a cafe near you, with an option to navigate to other nearby cafes.

vibe-02

3. Use the search bar to be re-directed to a new location, or to find a specific cafe.

vibe-03

4. When a cafe has no data associated with it, users are encouraged to set the vibe.

vibe-04

5. Users can swipe left or right to explore other locations.

vibe-05

6. The bottom panel can be expanded upwards so the focus of the screen becomes the vibe rather than the map.

vibe-06

7. On a cafe’s profile page, users can approve or disapprove of media and set the vibe by uploading their own media.

vibe-07

8. Users categorize the vibe after uploading their media.

vibe-08

9. The application detects when customers come to a cafe based on the media you upload, and you are rewarded for being a vibe-setter with redeemable points at the cafe.

vibe-09

10. Vibe detects which cafe a user is currently inside, and suggests setting the vibe. If the GPS is not completely accurate, nearby locations are provided for the user to choose from.

vibe-10

Process
Interviews
We conducted interviews to understand the issues that mobile workers face. Specifically, we interviewed a campus police officer, an at-risk youth worker, a medical sales agent, and a real estate agent.

Synthesis and Ideation

affinity diagram of data
We organized our interview notes into an affinity diagram. Some prominent themes were: doing things within the constraints of a short break, staying in touch with others during work, finding a place to do work, and having reliable Internet access.

Concept Development and Evaluation

starbucks
We spoke with cafe managers about their willingness to share information about the real-time status of their cafe. Although people had different preferences, we found that most cafe managers were receptive to the idea of sharing information about the ambiance of their establishment.

Personas
We developed user personas for both a customer and a business owner, in order to design our system with their needs and motivations in mind.

Erin is a 25 year old living in Brooklyn, NY who likes to do work and respond to e-mails in between her three part-time jobs. Many of her favorite cafes are popular among young, urban professionals and she often spends a frustrating amount of time looking for a seat.

young mobile worker

Kurt is the manager of a popular cafe in New York City. He enjoys working in a bustling environment, but notices that many customers try to come by the cafe, but leave when they see it is too crowded. He would like to inform people of the cafe’s off-peak times, so that he can have a more even distribution of business throughout the day.

Wireframes
We created wireframes and showed them to others within the context of our personas acting out a scenario. After receiving feedback on the flow of our application, we iterated on its high-level design.

1. The home screen shows a stream of media about the cafes near you, with a map for easy navigation between cafes.
home screen

2. A profile page for each cafe.
vibe-wireframe-2

3. A profile page for each user.
vibe-wireframe-3

4. Users evaluate media to ensure accuracy.
vibe-wireframe-4

5. Users set the vibe of the media they upload.
vibe-wireframe-5

6. Users are informed if information is not updated, and are encouraged to remedy this by setting the vibe and uploading their own media. vibe-wireframe-6

 

Flow of Interactions

interaction-flow

 

Final Pitch and Video
We pitched our final design, accounting for business applications and practicality of use and made a promotional video to illustrate the product’s context of use.