10 Quick Steps - A Process

Written by David Charney
Posted: July 27, 2007 (1 year, 1 month ago) | 2 comments

---

So what is a process? In this article, a process is every project’s BFF when it comes to the steps or stages taken to complete said project. “Meh”, “huh?”, and “sweet!” are the usual interests when it comes to a process. Some don’t care a whole lot about the process or don’t spend the time to tackle each stage, some people are interested in the potential value of a process but don’t understand them, and finally, some love processes and bet their lifes (and children’s lives) on them.

Back to the process already in progress…

One of the biggest issues when developing a project is that your client’s expectations of the goals, interface, and usability of the project and your expectations often differ right from the beginning. Common reasons for this to occur are usually because the client is not used to working with a design studio, or through bad communication they visualize a different end result than you. Because of this mis-communication, most good processes involve taking the time to get to know your client, their needs, goals, and to help them understand what the end results will be before even opening Photoshop. Following that, each step in a process helps you to get the project done on time with limited communication errors, while presenting a quality design full of accurate content. Every project is different and as you work you will find the best process for your needs.

1. Be Prepared - Your Client’s needs
Before you start designing, you need to understand why your client has come to you in the first place. Talk with your client about their needs and goals. Work with them to understand what, in the end, would fulfill their needs and provide a successful project. Now that you understand the beginning (their needs) and the end (what makes a success), you can start to define a solution. Before moving on, get used to writing everything down! Get down your client’s thoughts, your thoughts, and any other ideas that are out there. Keep detailed notes throughout the entire process and use this information when defining scope and addressing scope creep. Trust me, as you move through the process, our memories will confuse what is wanted with what is needed, as well as goals and ideas. So keep notes and don’t lose them!

2. Know the Audience
You now have an idea of who your client is. But what about their audience - the people who will use the application? Are they internal sales people, customers, surgeons, kids or dogs? The users of your product will change what that product is. Spend some time talking to their audience or send them out a survey. Ask questions like “What end program would benefit you the most?”, “Do you own a PC or Mac?”, “Do you like to use the mouse or keyboard to get around?”, “What is your favorite computer program and why?”, “Do you have opposable thumbs”, etc. Knowing your audience will help you create an experience tailored to them. This will provide intuitive solutions that display the content specifially for that audience. Long story short - much better final user experience.

3. Brainstorming & Bucket Filling
One of the big mistakes many (including myself) tend to do is limit themselves when brainstorming. Forget about deadlines, budgets, final deliverables, the client’s brand standards (don’t worry we will bring them back later), and even what the final project is going to be developed in (Flash, Director, HTML, Notepad, etc.). It will only limit your ideas. Remember that you know your client’s needs and you know what factors would fulfill those needs. Start big and bring yourself back later. Get creative. Remember that you are not just putting together an application that has a user interface, navigation and content - you are creating a user experience and everything must work together to solve a goal. Start to bucket ideas by writing everything down and grouping similar items. Sometimes it is worth it to draw out wireframes, storyboards, or thumbnails to help you and the client understand an idea. Let’s say you are building a site to show people how to take good photos. Let your mind throw out any idea it can think of. Don’t worry about stupid ideas as they tend to get the creativity flowing. How about having a virtual camera that the user can move around in a simulated environment and take pictures. Maybe the user becomes a virtual character, and an assistant to the photographer. The photographer acts as the teacher and narrator, taking the user through all aspects of photography using a virtual camera. Get all the ideas down on paper. Do an internal meeting and then one with the client. Once you have many ideas, start focusing again on budgets and deadlines. Start bucketing ideas into groups to begin narrowing down different sections within the application. Certain ideas will stick, others will vanish or morph into new ideas. Often, ideas that seem great might not fit within the current project or budget. As the relationship with your client grows and new budgets arise, these unused ideas show themselves again. Fine tune and fine tune until you and your client are happy and excited about the direction of their project. There is always a balance between how much work to put into these steps as often you don’t even have a signed document saying go ahead. So work fast and work smart. As you go you will begin to reuse elements and know where corners can be cut.

4. The Scope
At this point you should have a pretty good idea of the project scope. Write it down! Type up all the aspects of the project, including how the navigation works, what the user experience is going to be, the project timelines, deliverables, and assumptions. Before starting the project, review the scope with the client and anyone else involved with the project. If everything sounds good type up a final scope sheet and get sign off with your client. This scope sheet is often part of the project proposal which includes costs (and the legal mumbo-jumbo) for the production work.

5. Technology & Delivery
This step is usually somewhat defined at this point in the process. But take a step back, look at the scope and think about what technology (Flash, Director, Bryce, etc.) or what the delivery method (web, CD-ROM, etc.) works best. Don’t set anything in stone until you are satisfied with the scope of the project. The scope will define the technology and delivery. Does your client need this project for a trade show kiosk, as a component within an e-Learning solution, holographic display (cool), or on a CD-ROM (or all of the above)? Find out how they intended to deliver to their audience. Don’t forget to keep your ideas scalable. Not just the ability to easily update or add new information but also the ability to port something built for a CD-ROM out to the web, Pocket PC, or whatever. Not only can this open an opportunity for more work it can also greatly benefit your client. Add this information to the project scope!

6. Wireframes & Layout
Now that you have a scope and your ideas down, start to draw up a detailed sitemap and wireframes. These wireframes do not represent the design (look and feel) but help define the flow, such as the layout, navigation, and basic content information. Wireframes are great guides to use when production starts later on. I use them as content checklists and throw an ‘X’ on the page when it is complete.

7. Monitor Toys
This step is often skipped over but very important. No designer should be without their toys drowning out any horizontal desk space. Simpson’s toys, Shrek, Homestar, happy pig (I will get you guys a picture) – they are all welcome. Use the coffee mug toy test (CMTT) to make sure you have no unnecessary space. Grab anyone’s coffee mug, dump out any coffee (preferably in the sink), and start placing the mug around your desk. Any spot the mug fits, place a toy. Do this until you can no long put the coffee mug anywhere. Flat screens are great and offer a much better viewing experience over CRTs but because they offer very little toy space on top you may want to consider sticking with your crappy CRT until manufacturers can fix this toy fitting problem.

8. Calm Before the Storm
Gather up all your information and give it a review. Get your client’s brand guidelines and look for parallels between what you want to do and what they have done in the past. Look around for CD-ROMs and websites you like and let them fuel ideas. Write down on paper a few key words to help you design based on the project. For instance if the project is about airplanes write down a few design elements that deal with your subject (blue sky, clouds, contrails, open space, movement, etc.). Look at any inspirational websites or designs you have. Get any final questions answered and get ready to start your design.

9. Designing
Based on the wireframes, choose one to three page layouts that you want to mock-up in this design phase. Try and choose the most unique layouts. Try and draw up a few shapes on paper based on the buckets you have. I tend to draw up real quick shapes on paper to see if any of them flow. Once I have a few ideas, I sit down at the computer, put on your headphones, open up Photoshop, and start designing. Much like when we draw, we don’t focus on a single area of the design, rough in the basic shapes and colors. Don’t spend a lot of time on these initial designs. Save each with a unique name. While designing, try and keep in mind the usability and functionality of the product. Spend some time thinking about different navigation methods. After you have done several designs, pick two or three you like the most. Before throwing out the designs that don’t work, take note of any elements within them that you may be able to integrate into your chosen designs. Start to refine shapes, colors, layout, and add stand-in content if available (if not hit up lipsum.com). Take these two or three unique design ideas back to the client to get their feedback. Often times the client will like a design or elements of all the designs that you can refine into one sweet looking design.

10. Moving ahead
Be prepared for rework based on all that fun feedback. It is sometimes hard to get used to people constantly telling you to make it better but this feedback will only make your project better. As the project moves into production there will usually be updates and changes. Keep tabs on the development and that your design aspects and the client’s brand standards are being upheld. If the scope is followed and the design rocks, you will be well on your way to one nice new project to add to the Portfolio.

Seems like a lot of work?
It can be a lot of work. Smaller projects will be quicker and larger projects will take longer. Remember to balance the time spent on the early stages of the process based on the potential of each project. A process is an organic device. It will adjust to fit. Once you get used to using a process you will have many less nights of crying yourself to sleep. Trust me - give it a try!

Beyond This Article:
http://www.stopdesign.com/articles/design_process
http://www.designobserver.com/archives/017485.html