Ideation is about finding out why the website or app exists or should be built, who it is for, why they would want to visit it and any potential worries it might cause for stakeholders (such as the client, internal PR department or similar). A group of people invested in the project is great for brainstorming and coming up with ideas but when it comes down to the art of putting together the entire package it’s usually better to have an open mind and receive input and constructive criticism from a few like-minded peers, even if it’s only to solidify your stance on particular solutions and goals.
Adapting the Design Process
The web community has a lot to learn from the mobile world, in my humble opinion the greatest gift Steve Jobs gave us with the iPhone in 2007 wasn’t the app-store or device itself; it was the new focus on purpose for every interaction and piece of information in the user-centric and tailored mobile iOS experience. This focus on purpose and essential functionality is a large part (if not the biggest) of Apples mobile success and has then gradually spread and transitioned to every aspect of mobile computing, web and other forms of user experiences.
It wasn’t by accident that Apple succeeded in doing this; it looks like the result of the design thinking process IDEO (which helped Apple with their first mouse) has perfected since the early 1990′s by adapting the classic graphic design process on a much wider range of problems. This is a creative process with the goal of helping innovation by generating lots of concepts based on the problems and opportunities that can be defined from the initial conditions, these concepts are then evaluated and later refined to a streamlined solution. The classic process looks like this:
- Orientation
- Analysis/Defining the purpose
- Concepts
- Design
- Implementation
As stated this process is not limited to graphical and advertising projects but it can be adapted to any scale and any type of project. To adapt it to a web project, first orient yourself around the client, market and other significant factors that might help you understand the problems, opportunities and limitations this particular project might have.
The second step is to analyze the information and define the purpose through a set of goals for the website or application. A good way to find these goals is to have a brainstorming session with the product owner and other stakeholders and try to find them by answering the following questions:
- Who do we want to reach out to?
- What do we want the target to see or experience?
- Why do we want the target to do that?
“Who” is the target, “What” is the objective we want to deliver to the target and “Why” is the action we want the target to take. Try to come up with as many as possible and then edit and discard them to produce the outline for a coherent site with a clear purpose. If too many goals are found (which can’t be cut) it might be an idea to separate some of them into an entirely different site or subsection.
Defining the Purpose
One of the defining characteristics of a truly great product or solution is the focus on its purpose; once they are defined with the help of the design process one of the easiest ways to communicate this purpose is to define a set of goals that together describe the core functionality. With these goals in the back of the mind throughout the development process it’s usually quite easy to decide whether something is a part of the core solution or something nice but expendable. This makes the job much easier when it’s time to prioritize functionality and content in the design work for different platforms.
It doesn’t really matter how the goals are written (although a simple bullet list is clear and easy to understand), far more important is that they are clearly defined and can guide decisions throughout the project. Start with the purpose and then figure out the information architecture, content, user experience and graphical design, not the other way around.
Concepts
Once the purpose is clear it’s time to create layout, interaction and design concepts to implement the goals. What’s important to remember is the web is no longer a fixed medium that’s only viewed on desktop computers by users with a keyboard and mouse. It’s also available on mobile phones, touch-tablets, game consoles, through text-to-speech synthesizers, screen magnifiers and all possible sorts of desktop and laptop monitors ranging from 10 inches to 27 inches (as of 2011) and a wide range of specific resolutions.
A website has to be able to adapt to different devices and the only way to do this properly is to adhere to web standards. Why? Because new devices will use web standards as a base when adapting existing websites, one example is what happened when the iPhone came and made existing standards-based desktop sites just work but broke all that relied on Flash and similar proprietary technologies.
There’s no harm in creating concepts that optimized for specific devices (on the contrary, it can be very powerful to tailor the experience while still using web standards), just keep in mind how they will work on other kinds and make sure that they are still accessible from all devices.
Design
The actual design phase can comprise a number of activities, but the main objective should really be to tie in the different concepts and create one unified solution through layouts, interactions, content strategy, user experience and graphical decoration. At this stage the overall layout, information architecture, user experience and general graphic guidelines should be the focus; user interactions and final graphics is something that is added during and after the prototyping.