In my experience, I have found that the most successful way to achieve a superior design is to go through the correct process. The process I use is based in user-centered design – the user is defined and their needs are made clear, the goals of the client are examined and itemized, and both the client and the end user help to influence the final outcome throughout the process. An informed client is a happy client. The process looks more complex than just diving in to the project, however this method helps to weed out issues sooner – saving time fixing design or interaction problems later.
Once a project is contracted, I meet with the client to assess their needs, gather information on who are the primary and secondary audiences/users, collect any materials and content that may need to be considered in the project, and set expectations for the first round of sketches.
Even if a client has the information on their primary and secondary audiences, I begin by doing additional research on the user to help to give a full understanding of the needs of who the end project needs to satisfy. From this research I develop personas for a handful of target users to stand in for the user during the design process.
Next I will develop a rough information architecture (IA) for the project. Depending on the scope of the project, this could be as simple as a bubble flow chart, but can get as complex as a card or post-it sorting activity to assist in functionality and flow of the end project. On larger-scale projects the IA will be developed into a refined document.
I start the Ideation Phase by creating several paper and pencil sketches of different design concepts. Depending on the project, these can number in the dozens to the hundreds. From there, I narrow down the best concepts for the project based on the needs of the client and the needs of the user. These sketches are then scanned and submitted to the client for review and feedback.
After the client review, depending on feedback, either I create new sketches that incorporate client suggestions or repeat the previous step to develop more ideas. These pencil wireframe sketches will continue to be refined until the client is content with the proposed concepts. Additionally, an Information Architecture will be created to help conceptualize the flow of the project, be it a website or mobile application. Similarly, a motion graphic or video will be storyboarded.
Once a design concept has been approved, I create a low-fidelity digital design. This design will be basic, typically lacking color, images, and content, focused on showing how the design will fill the space and how basic interaction might work. If the project involves high amounts of interactivity like a kiosk, website, or mobile app, the low-fidelity mock-up will be brought into a prototyping program and basic interactions will be created to give a better impression of the proposed final interaction and to elicit feedback on that interaction at an early stage in the process. This helps to refine the project before any coding has taken place. This is refined until the client is happy with the design and the designer feels that it accommodates the needs of the users, as represented by the personas, or through user feedback in user testing. This prototype can be tested with users to get initial feedback on usability.
After receiving the client approval of the low-fidelity design, I create a color chart and/or a mood board, typically involving a list of words and emotions that the client and designer want to incorporate in the final design. This process helps to develop color schemes and typeface combinations that will work best for this design. This step is made easier or removed if the design is simply an addition to current branding standards.
Like the low-fidelity mock-up, a medium-fidelity mock-up is still a simple version of the intended final design, but begins to use the color palate, typography choices, images and copy (if provided). If the final piece is interactive, a prototype simulating the intended interactions will be created in a prototyping program. This prototype can be tested with users to get additional feedback on usability. Ideally, you would not test with a user group who has tested with an earlier prototype.
Incorporating feedback from the medium-fidelity design, a high-fidelity design is created. The high-fidelity design is the intended outcome for the final product, both aesthetically and interactively. This prototype can be tested with users to get additional feedback on usability. Ideally, you would not test with a user group who has tested with an earlier prototype.
When the high-fidelity design is approved the project moves on to the final stages. For a website that means coding the layout for each page, styling using CSS, and adding content. For print design it means preparing the final design for print. For an animation and motion graphics it means creating and compiling all of the assets, animating, and producing the final product.
If the project needs advanced interactions, is database driven, or is a mobile app, the project will need to go through back-end development, making all of the proposed interactions from the prototype fully functional. The high-fidelity prototype becomes a visual for a developer to ensure the interactions are completed as intended in the design.
Then the project goes in to first review, otherwise known as alpha-testing. This is typically completed by the designer or a small group to work out any bugs that may arise, such as browser-compatibility, printing errors, tweaking animations, continuity issues, etc.
The last step is final testing, in which the client is fully involved in making sure the project is complete. This is called beta-testing. However, by this point, the changes are often small and typically only includes content tweaks. At this point the project can be retested with a user group to confirm the project meets the needs of the user, or to get additional feedback for slight refinements.
Once the project is complete and all parties involved are satisfied, the project is finalized.