This workshop allows you to experiment with rapid design and coding techniques to help you deliver an idea for a first prototype in less than 8 hours. Teams will be issued a surprise challenge and have the duration of the workshop to create a web app that will delight users and answer the challenge! What you'll learn: -How to think creatively and generate ideas that really matter - Learn how and when to focus those ideas and tie it back to real business and end-user goals - Know when to create prototypes and concept usability test at key stages of a project - Understand the key development challenges and learn valuable tips to help you work faster - Create a minimum viable delightful solution and get it out to market fast!

1. How to design a
web app fast
Future of Web Apps 2011
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

2. Eewei Chen Jill Irving
Director e-Solution Design Lead Ui developer
BSkyB ThoughtWorks
(ex: ThoughtWorks, Microsoft, @jillisfab
Conchango, IPC Media)
www.fab.co.uk
@ultraman
www.eewei.com
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

3. So what can you do in 8
zzz
hours?
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

4. Form teams What can they do?
Issue the challenge Who are they?
How will they use it?
Today we will...
Presentations
Why will they use it?
How can it be built? Is it good business?
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

5. Form teams
Fill 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 grid
Get into you teams
20 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

6. The challenge
Design a mobile app that will
get people going to the cinema
again.
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

7. vs
Watch movies
anywhere, anytime, on any device
Watch movies at the cinema theatre
Tech is faster, more affordable
Moore’s Law: number of transistors on a chip will double
approximately every two years
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.
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

8. time control cont
I donʼt see the point in wasting time I canʼt pause the movie to
getting to the cinema when I can refill my drink or to research
watch what I want, when I want in the something that the film
comfort of my own home. brought to mind when I am at
the theatre.
advice respect
Can anyone please suggest
I hate the insensitive muppets
some good movies? There is
wrestling with bags of M&Ms,
so much out there I donʼt
who prattle on like they're in
really have a clue...
the privacy of their own living
room....
money social
There's no point paying that
kind of money for such an So weird, I've got the
unpleasant experience. I just
whole cinema to
refuse to go to the cinema in
London these days. MYSELF. (lonely)
source: blogs, forums & twitter #movies
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

9. 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

10. 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

11. 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

12. Who are they?
Choose and complete your empathy map
See= motivation
Do= features
Hear = Viral / Marketing
25 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

13. Alex the movie geek Ann the busy wife Alistair the sociable
and mother student
I am obsessed about details. I love Finding the time to go to the cinema I am the one who tends to organise
spotting the mistakes and ranting as a family is difficult. get togethers for my friends. They
about it online. I am well known on look to me for inspiration too!
many movie blog sites. We also have to factor in expensive
costs for driving, parking, tickets, pop I spend a lot of time socialising
I love playing games and corn, drinks then usually dinner online especially on Facebook and
competing. I would love to be on a afterwards. We normally usually end Twitter.
show like ʻJeopardyʼ when they ask up watching movies that the kids
questions about movie trivia and I want to watch When you go to the cinema you
could win some money. need to go at a specific time and
My husband and I had our first date watch just one movie which may turn
I usually do a lot of research ahead at the movies, I donʼt remember the out to be a disappointment.
of time but sometimes I just canʼt find movie but I remember having some
info on a very new or unusual wonderful conversations before and I used to go to the movies a lot but
director or film. after it. I miss those times when it less now as it is more convenient
was just the two of us. to rent a bunch of DVDs (which you
I donʼt watch mainstream movies can pause or change) and invite
much any more but still attend UK Cinemas can be dirty. You also donʼt friendʼs round to my place where we
film festivals as you can see quality know who is going to be there and can relax, eat, talk and drink in our
British films there first. I love foreign there have been times when people own time.
films too. have been rude, annoying & scary.
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

14. What can they do?
Create, group, think about value, then prioritise features
25 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

15. Quick review
Each team 2 minutes to present where they are
10 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

16. 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

17. Coffee!
Have a look at what the other teams have come up with
add/amend empathy map and features
Fill in the feedback ip chart
Any questions?
30 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

18. From Zero to Deploy fast!
Agile development process
Advantages to deploying early
Speed to market
Continous design and continous delivery - new
features delivered incrementally
Easily scaled for production
10 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

19. How will they use it?
Outline the user journey
Sketch out key screens
Prototyping techniques
45 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

20. Lunch Break
Make it productive!
Download code, look at web site, guerilla user test
http://webappfast.tumblr.com
60 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

21. Interim Q&A Feedback session
20 minutes

22. 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

23. 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
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

24. Latest technologies
...

25. Native features will be
obsolete

26. Which technology should I use?
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
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

27. Technology stack
Mobile web browser
Heroku cloud
CSS3 jQuery Mobile HTML 5
Rails
SQLite

28. Technology stack
lightweight, yet
powerful
Flexible
framework
open standards

29. Coffee!
but just before you do so have a look at the next slide...
30 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

30. Final presentations
Tell 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

31. Worked as a team
Understood our users Prioritised features
outlined user journeys
played with a prototype
What we did today
Presentations
De ned your
value proposition
How can it be built? Created a business model
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

32. Feedback
please ll in feedback forms!
10 minutes
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

33. Thank you!
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

34. 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)
Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast