Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
How to design a web app fast
Future of Web Apps 2011
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
Jill IrvingLead Ui developer
ThoughtWorks
@jillisfabwww.fab.co.uk
Eewei ChenDirector e-Solution Design
BSkyB
(ex: ThoughtWorks, Microsoft, Conchango, IPC Media)
@ultramanwww.eewei.com
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
So what can you do in 8 hours?
zzz
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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?
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
The challenge
Design a mobile app that will get people going to the cinema
again.
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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?
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
Things to consider before you get going
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 ...
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
Things to consider before you get going
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)
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
Who are they?Choose and complete your empathy map
See= motivationDo= features
Hear = Viral / Marketing
25 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
What can they do? Create, group, think about value, then prioritise features
25 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
Quick reviewEach team 2 minutes to present where they are
10 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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!
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
How will they use it?Outline the user journeySketch out key screensPrototyping techniques
45 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
Coffee!but just before you do so have a look at the next slide...
30 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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.
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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?
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
Feedbackplease !ll in feedback forms!
10 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
Thank you!
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
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)