B-Storm

B-STORM — A REAL-TIME WEB APPLICATION FOR QUICK TRIP PLANNING.

Most planned trips do not happen because of the indecisiveness and a lack of communication among a group of friends. Planning a trip should be fun, informative, organized, and easy.

I created an online application along with 2 other teammates for our COGS 120: Human Computer Interaction class back in Spring 2017. I marked this as the first iteration. After the course ended, I continued to update our project so that it became more complete. I will be going over what I did during the Spring quarter of 2017, and then writing about how I improved this application.
ROLE


User Interface Design, User Testing, Web Developer
TOOLS


Balsamiq, Sketch, Adobe Illustrator CC, HTML, CSS, Angular 2
ITERATION #2 LIVE WEBSITE


https://tripfeels-v3.herokuapp.com/
TABLE CONTENTS


  • 1. Overview of final product
  • 2. Design Process
  • 3. Potential Improvements
  • 4. Recap
THE CHALLENGE


To make a simple trip planning web application that is also mobile responsive.
It is important to make the trip planning process as quick and as efficient as possible. Here are some points kept in mind while designing the application:

the interface needs to allow quick decision making to limit indecisiveness
Users should be able to input their ideas quickly as a brainstorming application.

- users need to be able to share their summarized plan to others

An example of conversation between friends who start to throw ideas out on group chat.
THE STORYBOARD


Friends find a way to vote on a destination quickly in an organized

DESIGN PROCESS


The ones listed in yellow are the ones applied to this application
DISCOVERY


INTERVIEWS


I interviewed 10 college students (ages 18 to 22)and 5 older adults (ages 25 to 32 ) about their trip planning frustrations. A few mentioned that they were "annoyed that only 1 person would end up as the designated trip planner." Everyone who I asked answered that they use Google Docs or Sheets as their trip planning method. None of the people found a visually appealing way to trip plan.
DISCOVERY


CURRENT COLLABORATIVE PLANNING APPS


The main competitors of the product provided a collaborative mind mapping tool, however the different versions were too generalized for any use case. The main intention of B-Storm was to be a collaborative decision planning application for people who wanted to plan trips specificially.
    Main Competitors include:
  • - Group Map
  • - Mind Meister
  • - Stormboard
  • - Bubbl.us
In order to understand some of the painpoints within the website, I observed users interact with the current collaborative web apps. While observing users, users interacted with inefficiency as they were unsure how to use the interface quickly.

I noted several pros and cons of each web application.

PERSONAS




ITERATION #1 SKETCHES


Collaborative sketches with teammates for the first prototype.
ITERATION #2 SKETCHES


Collaborative sketches again after feedback from different classmates.
ITERATION #3 SKETCHES


This is after the class project ended.
WIREFRAME#1


2 high fidelity wireframes
PROTOTYPE #1


PROTOTYPE #2


SITE MAP


TESTING


CONSTRAINTS


  • - The limited amount of people and time to test this application
  • - Inexperience in making a high fedelity prototype
TAKEAWAYS


  • - Take in account user retention since the application only has one purpose currently