How to design a      web app fast                   Future of Web Apps 2011Eewei Chen @ultraman / Jill Irving @jillisfab /...
Eewei Chen                              Jill IrvingDirector e-Solution Design                  Lead Ui developer          ...
So what can you do in 8                                                    zzz         hours? Eewei Chen @ultraman / Jill ...
Form teams                                    What can they do?      Issue the challenge          Who are they?           ...
Form teams                Fill in team card:     Name, Job, Skills (what I can do to help)     Success (What I want to get...
The challengeDesign a mobile app that willget people going to the cinema            again.  Eewei Chen @ultraman / Jill Ir...
vs           Watch movies   anywhere, anytime, on any device                                                              ...
time                                                                      control                       cont              ...
Things to consider before you get going               Who is the audience?           What are their motivations?       Wha...
Things to consider before you get going             What is the gap you are lling?          How can you make your app uniq...
Things to consider before you get going    Talk to each other (you are the target audience)Delegate tasks (don’t all work ...
Who are they?      Choose and complete your empathy map                    See= motivation                      Do= featur...
Alex the movie geek                       Ann the busy wife                          Alistair the sociable                ...
What can they do?Create, group, think about value, then prioritise features                              25 minutes   Eewe...
Quick review Each team 2 minutes to present where they are                           10 minutesEewei Chen @ultraman / Jill...
Do they really want it?                         Trend researchCrowd source using twitter, facebook, user forums, clubs    ...
Coffee!Have a look at what the other teams have come up with         add/amend empathy map and features             Fill i...
From Zero to Deploy fast!Agile development processAdvantages to deploying earlySpeed to marketContinous design and contino...
How will they use it?                Outline the user journey                 Sketch out key screens                Protot...
Lunch Break                   Make it productive!Download code, look at web site, guerilla user test        http://webappf...
Interim Q&A Feedback session            20 minutes
Why will they use it?Target user, motivation, app name, app market, feature,          business value (USP?), competitors  ...
Does it make business sense?            Fill in a business model canvas      Don’t worry about exact gures for now!    Dis...
Latest technologies         ...
Native features will be       obsolete
Which technology should I use? Speed of development Ease of testing Continous design feeds into production No reliance on ...
Technology stack       Mobile web browser            Heroku       cloudCSS3     jQuery Mobile           HTML 5            ...
Technology stack                 lightweight, yet                     powerful                     Flexible               ...
Coffee!but just before you do so have a look at the next slide...                             30 minutes  Eewei Chen @ultr...
Final presentationsTell a good story. Role play? TV Advert? Sell your product andbrand. Think about everything you have le...
Worked as a team                              Understood our users   Prioritised features                                 ...
Feedback             please     ll in feedback forms!                           10 minutesEewei Chen @ultraman / Jill Irvi...
Thank you!Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
Things to consider before you get goingWho is the audience? What are their motivations? What do they expectto be able to d...
Upcoming SlideShare
Loading in...5
×

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

1,375

Published on

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!

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,375
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. How to design a web app fast Future of Web Apps 2011Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
  2. 2. Eewei Chen Jill IrvingDirector 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. 3. So what can you do in 8 zzz hours? Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
  4. 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. 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 minutesEewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
  6. 6. The challengeDesign a mobile app that willget people going to the cinema again. Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
  7. 7. vs Watch movies anywhere, anytime, on any device Watch movies at the cinema theatre Tech is faster, more affordableMoore’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. 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 respectCan anyone please suggest I hate the insensitive muppetssome good movies? There is wrestling with bags of M&Ms,so much out there I donʼt who prattle on like theyre inreally have a clue... the privacy of their own living room.... money social Theres no point paying that kind of money for such an So weird, Ive 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. 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. 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. 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. 12. Who are they? Choose and complete your empathy map See= motivation Do= features Hear = Viral / Marketing 25 minutesEewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
  13. 13. Alex the movie geek Ann the busy wife Alistair the sociable and mother studentI am obsessed about details. I love Finding the time to go to the cinema I am the one who tends to organisespotting the mistakes and ranting as a family is difficult. get togethers for my friends. Theyabout 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 socialisingI love playing games and corn, drinks then usually dinner online especially on Facebook andcompeting. I would love to be on a afterwards. We normally usually end Twitter.show like ʻJeopardyʼ when they ask up watching movies that the kidsquestions about movie trivia and I want to watch When you go to the cinema youcould 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 turnI 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 someinfo on a very new or unusual wonderful conversations before and I used to go to the movies a lot butdirector 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 youI donʼt watch mainstream movies can pause or change) and invitemuch any more but still attend UK Cinemas can be dirty. You also donʼt friendʼs round to my place where wefilm festivals as you can see quality know who is going to be there and can relax, eat, talk and drink in ourBritish 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. 14. What can they do?Create, group, think about value, then prioritise features 25 minutes Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
  15. 15. Quick review Each team 2 minutes to present where they are 10 minutesEewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
  16. 16. Do they really want it? Trend researchCrowd 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. 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. 18. From Zero to Deploy fast!Agile development processAdvantages to deploying earlySpeed to marketContinous design and continous delivery - newfeatures delivered incrementallyEasily scaled for production 10 minutes Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
  19. 19. How will they use it? Outline the user journey Sketch out key screens Prototyping techniques 45 minutesEewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
  20. 20. Lunch Break Make it productive!Download code, look at web site, guerilla user test http://webappfast.tumblr.com 60 minutesEewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
  21. 21. Interim Q&A Feedback session 20 minutes
  22. 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. 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. 24. Latest technologies ...
  25. 25. Native features will be obsolete
  26. 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. 27. Technology stack Mobile web browser Heroku cloudCSS3 jQuery Mobile HTML 5 Rails SQLite
  28. 28. Technology stack lightweight, yet powerful Flexible frameworkopen standards
  29. 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. 30. Final presentationsTell a good story. Role play? TV Advert? Sell your product andbrand. 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. 31. Worked as a team Understood our users Prioritised features outlined user journeys played with a prototype What we did todayPresentations De ned your value proposition How can it be built? Created a business model Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
  32. 32. Feedback please ll in feedback forms! 10 minutesEewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
  33. 33. Thank you!Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast
  34. 34. Things to consider before you get goingWho is the audience? What are their motivations? What do they expectto 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×