How to design a web app fast - Future of Web Apps 2011, London

Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

How to design a web app fast

Future of Web Apps 2011


Jill IrvingLead Ui developer

ThoughtWorks

@jillisfabwww.fab.co.uk

Eewei ChenDirector e-Solution Design

BSkyB

(ex: ThoughtWorks, Microsoft, Conchango, IPC Media)

@ultramanwww.eewei.com


So what can you do in 8 hours?

zzz


Form teamsIssue the challenge Who are they?

What can they do?

How will they use it?

Presentations

Today we will...

Why will they use it?

Is it good business?How can it be built?


Form teamsFill in team card:

Name, Job, Skills (what I can do to help)Success (What I want to get out of today)

1 interesting fact

Post your card onto the team gridGet into you teams

20 minutes


The challenge

Design a mobile app that will get people going to the cinema

again.


Going to the cinema used to be a fun social event for people of all ages. Today consumers prefer to watch movies on their phones, laptops, tablets and home cinema systems.

Watch moviesanywhere, anytime, on any device

Tech is faster, more affordableMoore’s Law: number of transistors on a chip will double

approximately every two years

Watch movies at the cinema theatre

vs


I donʼt see the point in wasting time getting to the cinema when I can watch what I want, when I want in the comfort of my own home.

I canʼt pause the movie to refill my drink or to research something that the film brought to mind when I am at the theatre.

I hate the insensitive muppets wrestling with bags of M&Ms, who prattle on like they're in the privacy of their own living room....

Can anyone please suggest some good movies? There is so much out there I donʼt really have a clue...

source: blogs, forums & twitter #movies

There's no point paying that kind of money for such an unpleasant experience. I just refuse to go to the cinema in London these days.

So weird, I've got the whole cinema to MYSELF. (lonely)

time control control

respect

money social

advice


Things to consider before you get going

Who is the audience? What are their motivations?

What do they expect to be able to do?Do they want to do things before, during or after the

movie?



What is the gap you are !lling?How can you make your app unique?

Can it be monetized (advertising)?What technology and platform (easy integration, responsive

design)?

Research online and leverage current trends like gami!cation, peer recommendation, geo-location, social

media ...



Talk to each other (you are the target audience)Delegate tasks (don’t all work on the same thing at once)Work fast. Do just enough to move on (revisit during the

break)


Who are they?Choose and complete your empathy map

See= motivationDo= features

Hear = Viral / Marketing

25 minutes


Finding the time to go to the cinema as a family is difficult.

We also have to factor in expensive costs for driving, parking, tickets, pop corn, drinks then usually dinner afterwards. We normally usually end up watching movies that the kids want to watch

My husband and I had our first date at the movies, I donʼt remember the movie but I remember having some wonderful conversations before and after it. I miss those times when it was just the two of us.

Cinemas can be dirty. You also donʼt know who is going to be there and there have been times when people have been rude, annoying & scary.

Ann the busy wife and mother

Alex the movie geek

I am obsessed about details. I love spotting the mistakes and ranting about it online. I am well known on many movie blog sites.

I love playing games and competing. I would love to be on a show like ʻJeopardyʼ when they ask questions about movie trivia and I could win some money.

I usually do a lot of research ahead of time but sometimes I just canʼt find info on a very new or unusual director or film.

I donʼt watch mainstream movies much any more but still attend UK film festivals as you can see quality British films there first. I love foreign films too.

I am the one who tends to organise get togethers for my friends. They look to me for inspiration too!

I spend a lot of time socialising online especially on Facebook and Twitter.

When you go to the cinema you need to go at a specific time and watch just one movie which may turn out to be a disappointment.

I used to go to the movies a lot but less now as it is more convenient to rent a bunch of DVDs (which you can pause or change) and invite friendʼs round to my place where we can relax, eat, talk and drink in our own time.

Alistair the sociable student


What can they do? Create, group, think about value, then prioritise features

25 minutes


Quick reviewEach team 2 minutes to present where they are

10 minutes


Do they really want it?Trend research

Crowd source using twitter, facebook, user forums, clubs

Competition / related apps

Now check what you have done so far


Coffee!Have a look at what the other teams have come up with

add/amend empathy map and featuresFill in the feedback "ip chart

Any questions?

30 minutes


10 minutes

Agile development process

Advantages to deploying early

Speed to market

Continous design and continous delivery - new features delivered incrementally

Easily scaled for production

From Zero to Deploy fast!


How will they use it?Outline the user journeySketch out key screensPrototyping techniques

45 minutes


Lunch BreakMake it productive!

Download code, look at web site, guerilla user testhttp://webappfast.tumblr.com

60 minutes

Interim Q&A Feedback session

20 minutes


Why will they use it?Target user, motivation, app name, app market, feature,

business value (USP?), competitors

A cool app name always helps!

20 minutes


Does it make business sense?Fill in a business model canvas

Don’t worry about exact !gures for now!Discuss viral and marketing (empathy map)

Get it into the business model (resource, activities)

30 minutes

Latest technologies...

Native features will be obsolete


Speed of development

Ease of testing

Continous design feeds into production

No reliance on walled-garden acceptance policies

Accessibility

Revenue model (apple/blackberry takes a cut. FT.com web app)

Trend towards mobile web standards

Which technology should I use?

Herokucloud

Mobile web browser

HTML 5CSS3

Rails

SQLite

jQuery Mobile

Technology stack

open standards

Flexible framework

lightweight, yet powerful

Technology stack


Coffee!but just before you do so have a look at the next slide...

30 minutes


Final presentationsTell a good story. Role play? TV Advert? Sell your product and brand. Think about everything you have learnt today and use

it!

45 minutes prep, 10 minute presentations from each group.


Worked as a teamUnderstood our users Prioritised features

outlined user journeysplayed with a prototype

Presentations

What we did today

De!ned your value proposition

Created a business modelHow can it be built?


Feedbackplease !ll in feedback forms!

10 minutes


Thank you!



Who is the audience? What are their motivations? What do they expect to be able to do? Do they want to do things before, during or after the

movie?

What is the gap you are !lling? How can you make your app unique? Can it be monetized (advertising)? What technology and platform (easy

integration, responsive design)?

Research online and leverage current trends like gami!cation, peer recommendation, geo-location, social media ...

talk to each other (you are the target audience)delegate tasks (don’t all work on the same thing at once)

Work fast. Do just enough to move on (revisit during the break)

How to design a web app fast - Future of Web Apps 2011, London

Technology

Transcript of How to design a web app fast - Future of Web Apps 2011, London