Example interaction design project 

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

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

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 

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

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…) 

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” 

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 

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 

Sketches 

Sketches 

Sketches 

Wireframes 

Prototype 

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

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…