Design advises for non-designers who participate Mozilla Labs challenge

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:

casual territory map

formal territory map

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.

personal example

senario example

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

model example

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

mock-up UI

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

weizhoudesign.com

Posted in: firefox, Interaction Design