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

DDVE design class. Example project

1591ee5da3f4480605ace6fcc0b8d43f?s=47 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.

1591ee5da3f4480605ace6fcc0b8d43f?s=128

Jaanus Kase

December 12, 2011
Tweet

Transcript

  1. Example interaction design project

  2. • Idea, requirements • Sketch • Wireframe • Prototype •

    Visual design • Baking Common steps
  3. A mobile app for bus tickets As a public transport

    user, I want to buy and use bus tickets with my mobile device.
  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
  5. System properties • Validation happens with QR code or barcode

    • Assume all users have a smartphone
  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…)
  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”
  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
  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
  10. Sketches

  11. Sketches

  12. Sketches

  13. Wireframes

  14. Prototype

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

    deal. Visual production
  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…