Spot

A smart places suggestion app base on the task and mood you have. 

Introduction

Research has shown that environmental factors can largely affect one’s mood and productivity in task performance. In our everyday lives, while finding a spot to sit down and might be easy, finding an atmospheric friendly and suitable environment for your task might be quite difficult. Spot is a smart suggestion app. Based on the task you are planning or the mood you currently have, our App will sort out the matching nearby places for you that can help you finish your task in an ideal environment that correspond with your mood.

My Role & Contribution 

UX Designer - created storyboards prototyped and designed the core functionalities

Front-end Developer - coded the web-based application using HTML, CSS and Javascript 

Design Brief

Our app is designed around the idea of environmental interaction and focused on environmental awareness. The point of view here is to help people find the right place to go. So this app lets people better know about nearby places and let people know what are the places they can go to. Moreover, this also helps people mentally explore all the places and find a good place in the future.

The user base of this app is people who want to interact with the environment or places nearby but don’t know how and where. So our app provides a more convenient way for them to know if the places are really what they want to interact, before they physically interact with the environment.

Places are often categorized or memorized based on the task rather than the atmosphere there. The interaction between people and environment also depends on the task and mood of people. Therefore the core interaction for this app makes sure that the places people go can have the right interaction they want,  based on their task and mood.  Also, people can invite others to join the interaction and see how others interact with this place.

Design Process

Storyboard

We created three storyboards that envision scenarios in which people would use our app. These situations illustrate users' need, depict how users interact with the app and show what benefits users get from our app. The story below is one of the storyboards showing that user wants to find a place suitable for feeling down.  View all storyboards.

IMG_5574.JPG
IMG_5573.JPG
Prototyping

We then created two prototypes and had participants walk through several use cases on each one. Both our prototypes start with user selecting task and mood but in different forms. 

IMG_5595.jpg
IMG_5594.jpg
Wireframing

Next, we created wireframes to visualize and decide the flow of our app. The following figures are the initial screen design. 

The flow of this app is first selecting the task and mood and then choose the place you like from the suggestion. Then you will be directed to a detailed information page of this place where you can view more pictures and reviews. 

Screen Shot 2018-04-15 at 15.37.53.png
Screen Shot 2018-04-15 at 15.37.19.png
Screen Shot 2018-04-15 at 15.38.07.png

The app also has other features like favorite and search. You can also share the place with your friends and invite them to come with you.  

Screen Shot 2018-04-15 at 15.42.34.png
Screen Shot 2018-04-15 at 15.40.42.png
Screen Shot 2018-04-15 at 15.40.47.png
Screen Shot 2018-04-15 at 15.40.34.png

Branding and Final visual Design 

Our decision to go with a simple UI was made by the idea of environmental interaction, since we want users to focus more on the physical world. We incorporated orange and grey to set an energizing and caring mood that reflects the main goal of our app: find your ambience. 

With our app flow and branding established, we were able to start developing our HTML prototype. With the help of tools such as Node.js, CSS, JavaScript and Vis.js. We built a responsive and cross-browser compatible prototype. Over the next 6 weeks, we implemented core functionalities and refined our app using feedback from users. View our live prototype and our Github repository.

Presentation Slide.jpg
Special thanks to my teammates: 

Yuxuan Zhou

Marcus Buzette