Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DDVE design class. Example project

Jaanus Kase
December 12, 2011

DDVE design class. Example project

I presented this material with my colleague Priidu Zilmer as part of a two-day design workshop for Tartu University’s Design and Development of Virtual Environments Master’s program. See www.ddve.ee for more info.

Jaanus Kase

December 12, 2011
Tweet

More Decks by Jaanus Kase

Other Decks in Design

Transcript

  1. Example interaction design
    project

    View Slide

  2. • Idea, requirements
    • Sketch
    • Wireframe
    • Prototype
    • Visual design
    • Baking
    Common steps

    View Slide

  3. A mobile app for bus tickets
    As a public transport user, I want to buy and use
    bus tickets with my mobile device.

    View Slide

  4. Scope
    • In scope
    • Discovering ticket
    types
    • Buying the ticket
    • Using the ticket
    • Presenting ticket for
    validation
    • Out of scope
    • Payment process
    details
    • Validation interface
    • Backend,
    administration

    View Slide

  5. System properties
    • Validation happens with QR code or barcode
    • Assume all users have a smartphone

    View Slide

  6. Data
    • You can buy tickets in multiple cities (Tallinn,
    Tartu)
    • In each city, there are multiple ticket types (1
    hour, 2 hours, 10 days, 30 days…)

    View Slide

  7. Persona
    • Martin, 15 years old
    • Has an iPhone, uses
    Facebook and photos
    • Has a bank account for
    his pocket money
    • “I don’t want to waste
    my time”

    View Slide

  8. Goals
    • Experience goals
    • Quick, painless use
    • Not look or feel
    stupid
    • End goals
    • Buy a ticket
    • Present a ticket
    • Life goals
    • Be a good citizen
    • Be a good son to his
    parents

    View Slide

  9. Navigation map
    Buy
    Home: view tickets
    Current
    Past
    List of tickets
    in current city
    Present ticket
    for validating
    Buy another
    similar ticket
    Change city
    Ticket details
    Complete
    purchase

    View Slide

  10. Sketches

    View Slide

  11. Sketches

    View Slide

  12. Sketches

    View Slide

  13. Wireframes

    View Slide

  14. Prototype

    View Slide

  15. I’m not covering it myself, but this is a big deal.
    Visual production

    View Slide

  16. In-context baking
    • Bad apps happen because there isn’t enough
    baking.
    • Bake it with real design and code, with real
    data, against real servers, with real devices.
    • Baking helps with performance, usability,
    content, service delivery…

    View Slide