Project development interactive timeline

An inter­ac­tive time­line show­cas­ing the project’s mile­stones is now live at time​line​.keyzz​.com. Check it out!

The time­line was cre­ated using Time­lineJS, a open source frame­work to cre­ate inter­ac­tive time­lines that can pull media from dif­fer­ent sources. It is also avail­able as a Word­Press plugin.

Photo Upload Functionality with HTML5

I imple­mented the upload inter­face for when users are list­ing a prop­erty. I decided to use a plu­gin that takes advan­tage of HTML5’s new File Reader API, the also new Drag & Drop API, and AJAX (with the addi­tion of binary data transfer).

The open source jQuery plu­gin is called File­Drop v0.1.0 and was cre­ated by Weixi Yen and can be found under MIT license at a Github repos­i­tory.

Visual Design Progress

The dash­board and prop­erty details over­all struc­ture and visual design is complete.

Here’s the evo­lu­tion of the design of those pages from wire­frame to final design.

Property-Details-Rates-Prototype8

Edit prop­erty rates page on 8th ver­sion of the wire­frame pro­to­type cre­ated with Axure

PropertyRatesEdit_prototype10

Detail of edit prop­erty rates page on 10th ver­sion of the wire­frame pro­to­type cre­ated with Axure

RatesPageFinal

Edit prop­erty rates page final design

Dashboard_prototype8

Dash­board page on 8th ver­sion of the wire­frame pro­to­type cre­ated with Axure

prototype10_dashboard

Dash­board page on 10th ver­sion of the wire­frame pro­to­type cre­ated with Axure

Dashboard_Final

Dash­board — Final Design

 

Dashboard_Exclusive_Hosting

Dash­board with exclu­sive host­ing turned on — Final design

Interactive Walkthrough Prototype Plan

I fin­ished the plan­ing for the inter­ac­tive pro­to­type that I will present on the Final Review on May 17th.

It con­sists of an inter­ac­tive walk­through with 4 sce­nar­ios and 16 indi­vid­ual tasks. It is divided in two sec­tions for the dif­fer­ent tar­get users: guests and hosts.

The users will be taken through the pro­to­type with popup guid­ing mes­sages made with jQuery. All the user have to do is fol­low the instruc­tions that pop up.

Click on the image to see the info­graphic (plan) in large format.

Interactive Walkthrough Prototype Plan

An independent competitive analysis

Matthew Nieder­berger pub­lished a quick usabil­ity com­par­i­son test in his blog Actu­alIn­sights* called Remote User Test­ing: Airbnb vs Wimdu.

He did a remote test using UserTest​ing​.com with 5 users and the goal of the test was have first time users analyse and com­pare their first impres­sions on both web applications.

The results are inter­est­ing and Matthew’s expe­ri­ence in the travel indus­try helped him pro­duce very smart insights. It was well worth read­ing the whole arti­cle. I got some good ideas and insights for the project.

I have been mean­ing to use UserTest​ing​.com for a while and thought I would finally be able to use it on this ver­sion of the pro­to­type (ver­sion 10), but after read­ing this arti­cle and watch­ing how UT works I had the impres­sion that it would not really work on a pro­to­type. I seems like a remote test­ing ser­vice more suited for live web­sites. At least that was my over­all impression.