Rabbit Hole: A User Experience Case Study

Birdie Golden, Micah Darling, Steven RayUser Experience Designers/Developers

ENVISIONING

Where to begin… • The Bright Idea• Persona Development• White Board Sessions

Every project needs a starting point. Sometimes, this can be one of the most challenging parts of the process.

The Bright IdeaOur Concept

• Something Fun– Hasn’t been done yet– Provides entertainment

• Something Useful– Travel helper– Fixes boredom– Experience new stuff– Out of town? Encourages

getting away from hotel bar!

Persona DevelopmentUsers

Who’s using this thing?– Age– Pain points– Technical abilities– Business tripper– The family– Weekend adventurers

Persona DevelopmentMethod

• How do they use it?– Mobile and desktop– Wired in and on the go

• What is their Goal?– Easy to use– Provides entertainment– Experience something new– Road trip!

White Board SessionsStrategy

• Tailoring down a million ideas• Break up work– Envision– Design – Develop

• Driving factor - deadline

White Board SessionsCore Functionality

• Separating 1.0 from 2.0• What was vital in 1.0• What could make it by deadline

White Board SessionsThe Future

• More search filters• Saved to database itineraries• More transit options– Biking– Walking

• The ability to share!– Saved searches– Locations– Pictures

DESIGN AND BUILD

Build Process

• Early agreement on interface principles and technology foundation

• Middle-stage agreement on Phase 1 features• Build functionality POC concurrent with Design phase• Integrate functionality into final design• Complete buildout and UAT within final design

Modification and simplification of our client process

Wireframes

• Wireframes help us to:– Define layouts– Define placement of elements

• Content• Navigation

• Rabbit Hole wireframes:– Low-fidelity– Quick iterations

Interface principles

• Responsive website instead of an app• All one page• Platform agnostic• Mobile first

Technology Foundation

• Bootstrap 3• Jquery (with Sortable plugin from Jquery UI)• JSON to store/retrieve data• Font Awesome• Google Fonts• Google Maps, Places, Geolocation and Directions

APIs• LESS (CSS framework)• Modernizr, Touch Punch (Touch capability for Radius

slider and Itinerary sorting)• Bootstrap Validator (for validating Contact form)

Agreement on Phase 1 Features

FOR PHASE TWO:• Additional trip types• Search filters• Itineraries saved to database• Additional transit types• Ability to share itineraries

and searches

PHASE ONE:• Multiple search terms and

radius• Geolocation• Sortable, savable itinerary• Custom directions options• Site-related keywords to

generate additional searches

Build Proof of Concept (POC)

• Began building core functionality before design phase officially began– Scheduling– Work out technical issues– Inform design phase– Careful to work only on core functionality, with just enough interface to

make it work, to avoid wasted development time– Make functionality as modular as possible, so it could easily be moved

between interface elements

• During Design phase, constant two-way feedback between designer and developer

Designing for Multiple Devices

• Different screen sizes• Different types of interaction– Touch– Mouse

• Different connection speeds

Responsive Design

• Mobile first• Fluid layout• Media query breakpoint

changes

Designing for Simplicity and Usability

• Easy to use• Intuitive• Clear instructions• Tooltips• As few steps as possible• Fulfilling user expectations

Integrate functionality into final design

• Took less than two days to marry things up– Day for integration– Day for bug fixes

Continue buildout and UAT

• Rest of development took place within final design structure• Collaborative effort between developer/designer to solve

unanticipated interface issues• Detailed styling• Fine-tuning interface– Key commands– Contextual help– Minimizing clicks

• Merciless testing

Lightweight

• About half a second for initial page load• Only 19 HTTP requests outside of Google Maps’ internal requests• All later requests done asynchronously• Minified code• Only 5 images on the entire site, none larger than 4K

Links

• Bootstrap 3: http://getbootstrap.com/

• jQuery: http://jquery.com/• Font Awesome icons:

http://fontawesome.io/• Google Fonts: https://

www.google.com/fonts• Google Maps:

https://developers.google.com/maps/documentation/javascript/

• LESS: http://lesscss.org/• Bootstrap Validator:

http://bootstrapvalidator.com/

• Pingdom speed tester: http://tools.pingdom.com/fpt/

• Compatibility:– Modernizr: http://modernizr.com/– Touch Punch:

http://touchpunch.furf.com/

• Generators:– Font Awesome PNGs: http://fa2png.io/– Bootstrap buttons:

http://www.plugolabs.com/twitter-bootstrap-button-generator/

– JS minifier: http://javascript-minifier.com/

– CSS minifier: http://cssminifier.com/