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.

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…