Over a period of 10 weeks we learnt about creating Single Page Applications for the web using the latest technology stack including Angular, Node, Grunt, Bower and SASS with DropBox as backend enabled by Prof. William Jones' itemMirror library. Our pitch video was acclaimed as the best video presentation by the top alumni of Information School.

Tripzza

Trip planning made as easy as planning a Pizza

Type

Group project with Gagandeep Singh and Varun D.

Project Aspects

Web development, UX/UI design, video creation, pitching

My Role

Designed complete UI, front-end implementation,  project demonstration video creation, presentation and pitching

Contributed to research, backend development and rapid prototyping

Timeline

May - June 2015 (10 weeks) | Coding- 2 weeks

The Problem

We often find it difficult to find the information collected during our research for various planning activities. Prof. W. Jones has worked on a framework called Keeping Found Things Found that helps in Personal Information Management. This concept is converted into a javascript library that could be used to store information, found over the internet with annotations and additional details, without having to download them or change their file structure.

Delivered Project Code

We love Open Source!

Github Link: https://github.com/UW-itemMirror-apps/Tripzza_SPA

Process

We learnt spent first 5 weeks learning about itemMirror library and principles of Personal Information Management.

Using eXtreme Programming  process, we developed initial prototype using the following User Flow:

  1. Decide a location

  2. Create a shared folder in DropBox (Planning a trip is better with friends. start collaborating with fellow planners)

  3. Search for different sources of information

  4. Save relevant content sources into the DropBox folder structure with descriptions

  5. Tag the saved content choosing custom color

  6. Revisit the stored links by referencing them using added context

  7. View content saved by your friends on the same shared path using Tripzza

  8. Delete irrelevant links at anytime

 

Vanilla Screens

Onboarding Screen

Dropbox login screen

Tripzza homepage

Redesigned UI

Onboarding Screen

 

Tripzza Homepage

 

Inbuilt Google Search on homepage

 

Feature 1: Saving the searched links

 

Feature 2: Adding context while saving

 
 

The use case is available in form of a video tagged See Tripzza In Action.

Final Thoughts

The feature list was deliberately kept simple because of the limitations of the itemMirror library's API availability and their scope. We hustled our way through the 2 week development grind and video production was done within 2 days for pitching. It was an exhausting yet rewarding experience.