Recently I got many emails from the Mozilla community asking about design process, since I cannot reply every email I received, here’s a tutorial about how to design as non-designers.
Hi #:
I understand your concern as a non-design-professional and I’m sincerely happy for your passion. So here I’d love to talk a bit about the design process, hopefully this simple tutorial will help you land on the right track.
1. Design process step one: Exploration stage.
The topic of conceptual browsers is too broad to start with. So it’s important to reframe the problem before you move into the design phase, in interaction design process we usually generate a territory map, in this way we’ll understand the context and lands on a good direction. We call this stage “exploratory stage“. A user-centered design research(usually involves interviews and field study) is usually conducted right at this stage and go through all stages, but for individual project, we don’t usually have budgets on the research, luckily we are all browser users, so we can ask ourselves the needs and wants.
The form of territory map can range from extremely casual, some doodling on whiteboard, to extremely formal, a diagram that shows all the relationships. Here’re two examples:
By the end of the stage, if you work in a team, you should have a shared definition of the problem, and a raw direction you’ll pursue later. You also holds some basic understanding of the user needs. For example, if you are going to design the tab system, after the first stage, you’ll be able to answer questions like”what do we need for a tab system and why”.
2. Design process step 2: Generative stage.
With all the data you collected in the first stage, you’ll begin to do the design. There’re many way to do it. I’ll only introduce three common methods for you to start with.
(1)Brainstorming and bodystorming. They are proven to be very effective ways to pitch. Gather a bunch of people and try to generate as many ideas as possible, that’s brainstorming. Give those people a senario to act, during the process be free to stop them and ask questions”what feature do you need right now”, called bodystorming. We gain great ideas from brainstorming, and build empathy on users through bodystorming.
(2)Personas and Senarios. Very simple, make up a user, such as “John is a 30-year-old male who works in accounting industry and a web power user”, and then make up a user story”John is trying to transfer some money from one bank to another but is noticed to visit and bank so he google-maps the place…” During the process of making those stoires, try to satisfy all the user needs to every details. Personas and Senarios are proven to be an effective way to refine designs.
(3)Models. Using models to generate ideas keeps you cool down and gives your inspirations.
This sounds very academic, but it’s really not as complicated as it looks like, this model implies, we cannot design blindly, we need to simplify the current situation to an existing model, and optimize this existing model to a better one, in order to imagine the future solution.
– A pattern approach. Look at existing patterns and gain inspirations. You can also look at people’s daily behavior patterns and transform that into digital metaphors. For example, people use backpack to store files, and there’s an existing website “backpack” to do the same thing in virtual world.
By the end of this stage, you should be able to have a concrete focus and several images mock-ups of the key features.
3. Design process step 2: Evaluative stage.
At this stage we evaluate mock-ups with users, get their feedbacks and refine the concepts. Wireframe may be used as a tool to structure the whole experience, however, because of the limited-time, we usually only show a partially working prototype which only covers the main features of the app. You can click here to view a demo video sketch(press the “click to view video button”).
I hope those tips will help.Please be free to email me if you have extra questions. I’m one of the tutors for the design challenge, and I’m very glad to talk with you about design.
Wei Zhou
evalica
February 8, 2009
Thank you so much for the information. This is just like the software development process 🙂 It was great to see some examples of the design process.
ericzou
February 11, 2009
hey wei,
thanks for the tips. It was a great read. I want to know how you deal with a situation when the budget is limited – a start-up for example. How do you condense or combine these design stages? i wonder if it is possible to combine the first 2 stages, or do small iterations between ‘exploratory’ and ‘generative ‘ stages.'(grab only the necessary information, kinda like ‘pay as you go’)rather than be completely committed to finish each stage.
thanks
–Eric
weizhou
February 11, 2009
Good point. This is a very rigorous approaching to interaction design. But in real world we usually do two things(which is considered to be a very rebellious behavior in CMU):
1. Brainstorm before user research. This helps designers to have more open-minded position, and triggers great ideas.
2. Do user research in a cheaper way, like train yourself as one of the users. For example, in one of my project, I need to design a website for collectors, but I don’t have money to recruit them, so I begin to collect things by myself, that saves me a lot of money.
Thanks for the suggestion, you’re definitely right. In real world we never follow any rules.
– Wei
ericzou
February 13, 2009
thanks wei 🙂
–Eric
ArriceDexdble
February 15, 2009
weizhou.wordpress.com – now in my rss reader)))
————————
signature: http://dewat.ru/
FaunnyPoncina
February 15, 2009
Hello, I can’t understand how to add your blog ( weizhou.wordpress.com ) in my rss reader
————————
ad: http://maciejewskite96.lised.ru/
Hismsmugh
February 16, 2009
weizhou.wordpress.com – cool sitename man)))
————————
sponsor: http://sarahpaug.lised.ru/
TypeAccipsy
February 16, 2009
weizhou.wordpress.com – cooooolest domain name)))
————————
ad: http://sudeg.ru/
bluehoulk
February 16, 2009
weizhou.wordpress.com – now in my rss reader)))
————————
ads: http://lolej.ru/
excuchews
February 17, 2009
yo, weizhou.wordpress.com great name for site)))
————————
my blog: http://potet.ru/
weizhou
February 18, 2009
why my site name is cool? Wei Zhou is my name…hehe
GefeAffipse
March 9, 2009
weizhou.wordpress.com – cool sitename man)))
————————
my blog: http://cigace.ru/
automotive floor jack
March 14, 2009
I must say, that I could not agree with you in 100%, but that’s just my IMHO, which could be wrong.
p.s. You have a very good template . Where have you got it from?
weizhou
March 15, 2009
I edited the css by myself…hehe.
www.gettargetedtwitters.com
July 2, 2009
Hey there nice post and nice blog you have here! come check me out at http://gettargettedtwitters.com/ it is an amazing site and you should check it out if you want targeted followers for your twitter account!
Automagaz
September 30, 2009
Hello, I can’t understand how to add your blog ( weizhou.wordpress.com ) in my rss reader
Hulda Rentie
February 28, 2010
Lots of Great information in your blogpost, I bookmarked your blog post so I can visit again in the future, All the Best