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/