VISTAS iPhone App

Elevator Pitch

Vistas is a brand new way to experience San Francisco's natural side. Gorgeous trail sights with interactive audio tours reveal valuable trail information and enhances your experience. Trail alerts keep you informed of hazards during your trek. Vistas also encourages you to collect badges through trail check-in’s. Earning accomplishments is a fun way to experience nature while surrounded by San Francisco's beautiful scenery. Are you ready to explore Vistas?

Roles:

  • Interaction designer
  • User Experience designer
  • Front-end designer
  • Design Researcher

Technology:

  • Bootstrap 3
  • CSS3
  • HTML5
  • Grunt
  • jQuery
  • JavaScript
  • JSON
  • SASS
thesis three-shot perspective

Abstract:

  • Utilization of web tools to simulate application design
  • An iPhone app utilizing device hardware:
    • Accelerometer
    • Barometer (elevation)
    • Healthkit
  • Rich interaction
    • CSS animated map markers
    • JavaScript animation
    • Audio tour
    • Gamification
  • Over 30 competitive analysis reports
  • Unique & considerate features

Research:

  • Primary Research: Interviews, Surveys, Observations
  • Secondary Research: Studies
  • Over 100 user tests

Customer Journey Map

customer journey

Problems

  • Hikers need a system status
  • Hikers can't find the trailhead easily
  • Maps don't show enough information
  • User engagement needs improvement
  • Hazards need a system
  • Information hierarchy needs organization
thesis three-shot perspective

Process Sketches

Trail trail

User user

Maps trail

Maps: Sights trail

Apple Watch apple watch

Wireframes

User user

Trail activity trail

Maps maps

IA (Information Architecture) System Design

  • User research determined the terminology for the navigation structure
  • Research sessions with users decided the page hierarchy within the app
  • To be sure user language was being used over internal system language

Vistas IA Sitemap

Research Techniques

  • Card sorting to understand the user's mental model
  • Paper prototyping for initial concept validation
  • Iterative wireframe prototype testing

association

table