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

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

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

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

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

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

The challengeDesign a mobile app that willget people going to the cinema again. Eewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

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

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

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= motivation Do= features Hear = Viral / Marketing 25 minutesEewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

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

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

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

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

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

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

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

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

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

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

Technology stack Mobile web browser Heroku cloudCSS3 jQuery Mobile HTML 5 Rails SQLite

Technology stack lightweight, yet powerful Flexible frameworkopen standards

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

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

Feedback please ll in feedback forms! 10 minutesEewei Chen @ultraman / Jill Irving @jillisfab / #fowa #webappfast

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

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

by Eewei Chen

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 46

Statistics

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

http://lanyrd.com	45
http://us-w1.rockmelt.com	1