The document details a user experience case study for a project called Rabbit Hole, focusing on developing user personas and core functionality for a travel helper application. It emphasizes a responsive design approach, collaborative development, and iterative wireframe designs to ensure usability and functionality across devices. Key features include itinerary planning, saved searches, and a strong technical foundation with various web technologies.

1. Rabbit Hole: A User Experience Case Study
Birdie Golden, Micah Darling, Steven Ray
User Experience Designers/Developers

2. ENVISIONING

3. 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.

4. The Bright Idea
Our 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!

5. Persona Development
Users
Who’s using this thing?
– Age
– Pain points
– Technical abilities
– Business tripper
– The family
– Weekend adventurers

6. Persona Development
Method
• 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!

7. White Board Sessions
Strategy
• Tailoring down a million ideas
• Break up work
– Envision
– Design
– Develop
• Driving factor - deadline

8. White Board Sessions
Core Functionality
• Separating 1.0 from 2.0
• What was vital in 1.0
• What could make it by deadline

9. White Board Sessions
The Future
• More search filters
• Saved to database itineraries
• More transit options
– Biking
– Walking
• The ability to share!
– Saved searches
– Locations
– Pictures

10. DESIGN AND BUILD

11. Build Process
Modification and simplification of our client 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

12. Wireframes
• Wireframes help us to:
– Define layouts
– Define placement of elements
• Content
• Navigation
• Rabbit Hole wireframes:
– Low-fidelity
– Quick iterations

13. Interface principles
• Responsive website instead of an app
• All one page
• Platform agnostic
• Mobile first

14. 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)

15. 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

16. 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

17. Designing for Multiple Devices
• Different screen sizes
• Different types of interaction
– Touch
– Mouse
• Different connection speeds

18. Responsive Design
• Mobile first
• Fluid layout
• Media query breakpoint
changes

19. Designing for Simplicity and Usability
• Easy to use
• Intuitive
• Clear instructions
• Tooltips
• As few steps as possible
• Fulfilling user expectations

20. Integrate functionality into final design
• Took less than two days to
marry things up
– Day for integration
– Day for bug fixes

21. 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

22. 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

23. 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/ma
ps/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/