Course: Human-Computer Interaction - Wellesley College
Partners: Asiya Yakhina and Amanda Foun
Studyspot was a semester-long app building project spanning the entirety of my sophomore spring semester (January 2015 - May 2015). This app implements HTML5, CSS3, jQuery Mobile, and Google Maps API. Designed for Apple's iPhone 5. Currently fixing domain issues and will have a link to the application up shortly.
01 / PROBLEM
Wellesley's campus offers a lot of different places to study, yet many students either don't know about them or don't realize what would be a perfect study spot for a particular situation
02 / SOLUTION
Our app resolves this problem in that it suggests a perfect study spot based on the user's personal preferences.
03 / USER TASK ANALYSIS
We interviewed multiple students to determine what factors influence their choice of a study place. We found that users care about the type of space (study area for better concentration or lounge for a more social and lively experience). Some other common decision factors were the sound level in the space, available resources, space capacity, a sense of novelty or food availability.
Based on the interviews, we’ve come up with potential tasks that users might have. This is a Hierarchy Task Analysis diagram of one potential task. The task is focused on finding a study spot for several people who want to work on a group project and need large tables and white boards for brainstorming.
To understand the relationships within the task domain, we’ve created this Entity Relationship Diagram to show how the user’s demands can be translated into input and interpreted by the application:
04 / WIREFRAMING
Having analyzed users’ desires and the task domain, we started wireframing. We came up with two designs. Both designs include an optional filtering option that contains specific preferences that some students might have.
Design #1 presents the user with three starting questions (space type, noise level, and hunger) and allows to add more preferences under the “More” button in the lower left of the screen. The app then generates one location that satisfies the selected preferences. From there, the user can either choose to navigate to the given location or press the “Refresh” button to see another suggestion. This design would might appeal to users who prefer to receive a single suggestion, instead of a going through a long list of options.
Design #2 has only two starting questions, asking the user what type of space and what noise level do they prefer. The filter button appears on the search resul screen together with the list of generated suggestions. This design appeals to users who want to have more control and prefer access to more information.
05 / STORYBOARDING
These storyboards illustrate how the user would complete the same task with two different design versions:
06 / PAPER PROTOTYPING - A/B TESTING
We tested both of our designs with the users and found that:
- Users had an easy time entering preferences based on the given tasks
- Users preferred to have more study space options to choose from, instead of just one suggestion
- One user thought that the “Filter” button is a label
- Some users haven’t even noticed the “Filter” button
07 / PROTOTYPE ITERATION
Having considered the results of A/B testing, we adopted design 2 with the following modifications before we began to implement our designs with coding:
- The “Filter” button should be in bright distinctive color
- The label of the “Filter” button should be more descriptive of its function. For example, “Filter your search” or “Add filters”
08 / IMPLEMENTATION
After running user-tests and improving our designs, we started the front-end implementation. I took on the developer role and was responsible for most of the implementation and putting all snippets of code together. These are the screenshots of finished front-end of the app built with HTML5, CSS, and jQuery: