Design Process
THE PURPOSE OF THIS PHASE IS TO BUILD THE FOUNDATION OF THE PROBLEM BEING SOLVED.
THIS IS ACHIEVED BY PERFORMING THE FOLLOWING TASKS:
- Understand the domain, context, and constraints of the problem
- Research the problem to understand key drivers
- Perform a competitive analysis of similar products or services
- Identify the risks and opportunities
- Understand the current user experience and any pain points
- Identify the user’s needs, wants, and expectations
User research can be a valuable tool at this stage to fill in gaps not available through research.
This can take the form of several methodologies:
Materials Review & Market Research
Stakeholder Workshops
Ethnographic Observation
Surveys and Questionnaires
In-depth Individual Interviews
Group Interviews
The second phase involves aggregating everything that is known and unknown from the Discover Phase into a digestible format.
The goals of this phase are to define:
- What are the overall goals of the product and the customer?
- Who are the stakeholders and target users?
- When and where do the customer’s interactions with the product happen (i.e., touchpoints)?
- How are the users interacting with the existing the products or services?
- Why are the users unsatisfied with the current offering?
THE OUTPUT ARTIFACTS FROM THIS PHASE INCLUDE:
Identify target users, scenarios, and perceptions of your products
Personas
- Create realistic representations of key user groups that expresses their needs and expectations.
- Describe real people with backgrounds, goals, personalities, preferences, and values.
- Based on user research to uncovering universal features and functionality.
Use Cases
- Represents one or more personas with a goal that can be solved using the product or service.
- Describes the system from the user’s perspective.
- Describes all the necessary contextual information in a particular environment related to a particular goal.
Journey Maps
- Incorporates the Personas and Use Cases to define user perceptions of the customer experience.
- Identifies the current state of all parts of the system that users interact with, their emotions at every touchpoint, and opportunities for improvement.
- Represents prioritized information in a graphical and digestible format.
Identify System Requirements, User Stories, and Design Assumptions
Functional Requirements
Defines what the product does, services it provides, key components, and core features.
User Stories
Defines features by stating them from the perspective of the user’s role(s), and goals.
Design Assumptions
Define the underlying principles used to constrain the problem space.
At the end of this phase, consensus with stakeholders about the scope of the effort should be reached, with a common strategy to guide the design direction.
The Design Phase is is the core of the the creative efforts in the process. When done well, it should enhance user satisfaction by improving usability, accessibility, interaction, and convey the tone and personality of the product.
THE CORE ELEMENTS OF THIS PHASE INCLUDE INFORMATION ARCHITECTURE, INTERACTION DESIGN, VISUAL DESIGN, AND USER RESEARCH.
Information
Architecture
Information Architecture involves designing the structure of the product. It acts as a blueprint for organizing content in a way that makes information intuitive to find and use.
Understanding content can be divided into two steps:
Inventory and audit existing content
- Identify areas that work well and those that don’t
- Find gaps and generate missing content
- Label content by incorporating the user’s language and terminology
Design new architecture
- Card sorting exercises to restructure content into meaningful categories and intuitive relationships from the user’s perspective
- Design search and navigation systems
- Test new architecture with users
Structure
Interaction Design
Interaction Design focuses on user behaviors and how they perform actions to accomplish their goals. This can be done by understanding the user’s goals, expectations, and mental models.
The key goals of interaction include:
- Defines how and where users can perform actions to achieve their goals
- Intuitive layout and controls of screen elements
- Optimized screen, user, and task flows
- Leverage design affordances of visualizations
- Define consistent interaction patterns
- Usability concerns, such as promoting learnability, reducing potential errors, and providing ways for recovery
These goals can be achieved using the following methodologies:
- Task Analysis and Work Domain Analysis
- Wireframe layout and structure of key page types
- Create appropriate designs for the intended platform (desktop, mobile, or cross-platform)
- Storyboards to show potential user flows
- Formative user testing to elicit feedback
- Iterating quickly and often
Created using 
Omnigraffle, 
Balsamiq, 
Visio, or other similar wireframing tools.
Behavior
Visual Design
Visual Design represents the communication of the product’s visual elements to convey its tone, personality, affect, and identity. The result should be visual compositions that are both beautiful AND functional.
The fundamentals of Visual Design:
- Incorporates multiple disciplines, such as graphic design, visual communication, and visual analytics
- Integrates elements of Gestalt psychology, and visual perception, and cognition
- Uses visual elements, such as aesthetics, typography, symbology, space, images, shapes, and color to convey the visual language of the product
- Visual elements should supplement interaction design whenever possible, but never subvert it
- Leverages visual affordances and visual inertia to suggest function
Design tools used include the 
Adobe Suite of creative tools
Illustrator, 
Photoshop, and/or 
Fireworks for static comps
After Effects and 
Premiere Pro for animations
Visual
Communication
Prototypes should be developed in preparation for user testing. These prototypes will be used to test functionality, and can be created at various levels of fidelity at different stages of the design cycle.
Low Fidelity
This level of fidelity is appropriate early in the design cycle, when speed and ease of creation is the priority. It is useful for exploring many different designs quickly or for detecting and fixing major problems in a design early. Low fidelity prototypes could consist of sketches and placeholders to convey high level concepts. Basic functionality can be simulated using a series of static images to give the illusion of interactivity. However, screen elements are “baked” into the images, which limits interaction. This method is primarily useful for getting feedback on user flows, expectations, “look and feel,” and overall tone. Since prototypes are typically more visual, they can usually be created by the designer.
Software packages used for this level of prototyping include 
Axure and 
InVision.
Medium Fidelity
“Proof-of-concept” functionality is created using HTML, CSS, and Javascript to create a working, but simple software prototypes. Prototypes made at this fidelity are best used to test screen elements to give users a truer sense of interaction with the interface. Basic aesthetics (no branding) and an intermediate level of functionality are created using font-end web development frameworks to facilitate faster and easier development, such as Bootstrap, D3, and others. Canned data is typically used with no data validation. Since front end developers are required, more effort and development time need to be budgeted into the project. Prototypes created at this level of fidelity can represent entire user flows and screen progressions, and can be leveraged later in the process during software implementation.
Technologies used for this level of prototyping include 
HTML5, 
CSS3, and 
JavaScript.
High Fidelity
Similar to proof-of-concept prototypes, front-end developers are engaged in creating a more fully functional prototype that is closer to the final product. Interaction and visual design elements are more complete and reflect more realistic interaction and visual design in order to better express the intended tone, personality, and identity of the final project. Prototypes may even be connected to real data on the back-end. This level of prototype is typically used later in the design cycle when designs are more refined because it requires the largest investment in time and effort, but is typically extended into into the final product as an alpha release.
Technologies used for this level of prototyping include HTML5, CSS3, and JavaScript.
ONCE A PROTOTYPE IS CREATED, USER TESTING AND DESIGN REVIEW CAN BE A VALUABLE TOOL TO DECIDE BETWEEN POTENTIAL DESIGN OPTIONS.
User testing can be conducted to test and evaluate prototypes at any level of fidelity. The findings can be used iteratively with the Design and Develop Phases to refine, improve, and validate designs until user feedback converges to align with the scope of the project. The combination of user feedback, heuristic evaluation, and expert review should incorporate the best concepts from all previous phases into a single design that meets the specified requirements.
A variety of test methodologies can be used to evaluate different aspects at different stages of the design.
Individual or Group Interviews
Card Sorting Exercises
A/B Testing
Formative & Summative Testing
In-Person Moderated Sessions
Remotely Moderated Sessions
Heuristic evaluation and expert review can be used to complement findings from user testing. However, they should not replace usability testing because issues identified with these methodologies are often different.
Heuristic Evaluation
During a heuristic evaluation, usability experts review factors that affect the usability of the product by comparing it against a set of industry-accepted usability principles. There are several heuristic sets that can be applied, each with different focus, but the most commonly used is Nielsen’s 10 Usability Heuristics.
- Heuristic evaluation can provide relatively quick and inexpensive feedback to designers
- Usability issues can be caught early in the design process
- It can be used together with other usability testing methodologies
- It can be used to inspect most areas of the product, compared to usability tests that typically target a few specific tasks
- It can increase the value of usability testing by eliminating “low-hanging fruit” that may mask other usability issues that would otherwise be found during user testing
Expert Review
Expert reviews are similar to heuristic evaluations in terms of their benefits and that it can be based on established best practices. However, they are typically less formalized, but may have the potential to be less consistent and more subjective, depending on the expertise of the evaluators.
In addition to the use of heuristics, expert reviews also focus on evaluating the system within the context of the scenarios set up by the personas and use cases defined earlier. This Cognitive Walkthrough method incorporates a task analysis of the steps the persona would take to achieve their goal. An important skill for an expert to have is to approach the product from the perspective of the persona, rather than through his/her own, to provide an objective analysis.
Usability findings should be summarized and organized into related categories. A severity rating should be given for each finding, with a prioritization of the most egregious issues, based on the business needs. Then, a recommendation for how to remedy the issue is provided for the next design iteration. Finally, the design should be rated based on an objective evaluation metric against similar offerings, ideally scoring higher than the competition.
THE FINAL PHASE OF THE PROCESS INVOLVES WORKING WITH FRONT-END ENGINEERS TO CREATE THE PRODUCTION SOFTWARE.
Functional Specs
Software Implementation
Quality Assurance
Deliver to Users
Once an agreed-upon design has been selected and approved by all stakeholders, a functional specification document would be created by the design team to ensure the desired intent is followed during implementation. The design team would stay involved during software implementation to ensure the product is being built as designed and answer any questions. This includes participation in the Scrum process in an Agile environment. The design team will work closely with software engineers to fully build and deploy the software using Agile methodologies.
Once a fully functional software package has been implemented, the design team will work with the Quality Assurance team and the Product Manager to minimize software bugs before release.