How to design a web app fast - Future of Web Apps 2011, London
?
4 likes?736 views
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!
How to design a web app fast - Future of Web Apps 2011, London
- 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 re?ll my drink or to research watch what I want, when I want in the something that the ?lm 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 dif?cult. 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 speci?c time and My husband and I had our ?rst 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 ?nd 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 ?lm. 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 ?lm festivals as you can see quality know who is going to be there and can relax, eat, talk and drink in our British ?lms there ?rst. I love foreign there have been times when people own time. ?lms 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