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.

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