Design Approach and Process Toolkit

Design Process Summary

Taking user needs and technology constraints into consideration, I discuss different design artifacts and assets I use to create experiences. Depending on the scenario, I employ a combination of processes to achieve effective communication and quality design output.

Key Points

  • I support my teams having the right deliverable and fidelity at any stage in a project
  • Communication is paramount, so my teams and I utilize effective channels to deliver experiences

It starts somewhere


Where should a team start and how do they get there? This familiar question is asked by many teams to the experience design team as we are rolled onto a planned project. We begin projects at all stages and have repeatedly heard these questions, no matter what stage the project is in. Generally, the deliverables we create help project teams visualize the end product and are scoped near the beginning of the project. On a project, experience design inclusion falls within these phases:

End of the project with short time and inflexible delivery

This is like being driven to a meeting as everyone is breaking for the day. It is awkward and unnerving because everyone has been marching toward a definition-of-done and now you are being tasked with giving guidance that changes that definition.

Middle of a project with short timeline, but that is flexible in delivery

This is like being helicoptered into a team while they were at lunch. You parachute in and quickly have to assess the situation and make alliances.

Start of project with plan-integrated time and early flexibility

This is like pulling up early to a meeting where you get to pick your chair, adjust the seat, and choose your place at the meeting table. You have your shades on for the full “cool” effect.

Screenshot from a slide deck that shows experience design inclusion anywhere in a project.

Depending on what stage I’ll be starting in, I have a set of key deliverables to aid in communication with the team. With so many experience design tools available, I arm myself with techniques and process deliverables that enable me to be most effective at ensuring the needs of the end user of the technology solution are met.

Project and phase planning


Whether at the onset or within the project, I believe planning the design team engagement is important. Deciding how requirements will be gathered and to what extent project leadership or product will be integrated into the design process should be settled. The process includes some keys interactions that enable success for the team members, arming them with necessary information at the appropriate times. Not everything goes exactly to plan, but having a path to reference keeps everyone moving forward as we document where improvements or enhancements can be made in the user’s experience.

Description of how requirements can be gathered and used within the development process.
Description of how designers turn requirements into visual elements.
Description of how designers turn visual elements into prototypes for usability feedback.

Heuristic or current state analysis


Analysis of the current landscape or solution is worked into the initial discovery. Heuristic analysis yields results that allow a foundation to be set with the client and team. It serves as a starting point on the roadmap, bringing understanding to the whole team of where we solution from. If the solution we are developing is new, the analysis can be derived from competitors and brand awareness in the client’s various channels. The analysis will also help the client see that we have done our due diligence on them and will help build early rapport.

Company public facing site current to future state analysis feedback.

Workshops


Facilitation of workshops and conversations for the delivery and stakeholder teams increases alignment and opens channels of communication. Creating a mental space we all can tap into allows us to communicate throughout delivery and focus on what is important. Workshops help teams collaborate and agree on the knowledge they have while driving out ways to organize it better. They are the gateway to a tighter feedback loop that can move from a large meeting to a quick email to share ideas once alignment is met.

Workshop outputs defining persona needs from technology solution.
Stakeholder workshop exercise setup for understanding concept workflow touch points.
User group workshop exercise setup for capturing data points about their perspectives and work focus.

User research


I focus on incorporating user research in any way possible in a project. Whether it is full on user interviews, focus groups, small group workshops, or basic surveys, this helps a project team align their goals to a “someone” and not just to requirements. User research in the right hands breeds innovation and creates little delights for the user.

Screenshot from spreadsheet detailing user research data points.

User flows or scenarios


I draft user flow diagrams to review steps we need to understand from a user’s journey. Flows illustrate interfaces and user interactions as well as key integrations with systems. With a basic idea of how a user might get from interface A to interface B, the team can ensure all parts of the user’s scenario is supported.

Screenshot of slide deck reporting user flow through certification process.
Picture of rapid whiteboard workflow mapping session.

Wireframes


I analyze user flows to derive interface and content requirements for screen wireframes. Wireframes become the map used to plan out the user’s way of navigating successfully through their scenarios. These map areas organize the important interaction points and information feedback a user will engage with on their journey through the technology solution.

Workshop sketched wireframes evaluating layout needs for users and organization.
Wireframe depicting complex resource allocation stage.

Annotations


I use annotations of the user flows and wireframes to communicate to the delivery teams in a way that is more consumable for them. Annotations bridge the experience design assets to the delivery team’s technical documentation. With a tieback from the user’s perspective to the delivery team perspective, we are able to plan out a road map for meeting everyone’s goals.

Annotations displaying details of functionality within a wireframe.

Prototype


Prototypes are used to show how the experiences and interactions we mapped out should work together. While a wireframe is an area of the map, a prototype connects the areas together to display the rough draft of the full map. I use prototypes to communicate interaction patterns and user flows not only to the delivery teams, but also to users or psuedo-users. Prototypes can be a great way to get early feedback on development direction and capture any outlying requirements users will need.

Prototype walking user through Miller Column selection interactions.

Usability and impression testing


Iterative test points along the design and development process move a solution from possibly off-target to spot on with less refactoring. Whether it is impression testing with early wireframes or high fidelity mockups, gathering initial user feedback helps to keep the teams focus on track. Together with usability testing of a prototype or an alpha release of a solution, the success factor goes up along with the quality of the solution. Real feedback from real users cannot be replaced. They keep the solution honest and centered on providing a technology solution that is useful to those who need it or will use it. I have conducted testing in many ways from onsite-observational to online-recorded and unmoderated. However it can be used testing should be included in the project budget.

Prototype moderated usability test script setup.
Moderated usability test script for a specific profile type.

High fidelity mockups


High fidelity mockups provide a more realistic view of the end technology solution’s look and feel. They become the full color version of the map areas the wireframes rough out. Sometimes pixel precision is required to ensure that the delivery team understands the relationships between content areas and interaction patterns.

High fidelity mockup showing visual contrast and identification for complex resource allocation.

Style guide


Once all mockups are underway, I capture the visual definition and language we expect to provide the user in a guide for the delivery team to use. The guide not only explains some of the basic foundation pieces of the layout, but shares high fidelity examples of the visual definitions at work. In a pinch, they can provide enough information for delivery teams to create new sections of a technology solution without more design time overhead.

Style guide redline of customer profile interface.

Interaction pattern guide


I usually save this one for complex, long workflows and user journeys that the delivery team has to develop. These guides present common patterns that the user will need to successfully work through a set of interactions. You can think of this guide as the last step of creating a map, essentially where the legend would be. In the legend, you have long stretches of road considered highways and all the concepts that surround that, or rural roads with congestion and all the concepts that require the attention there.

Any combination of deliverables can help me achieve success in conveying the design to the project team. The best solution is one that communicates the most information to the team in the best way for them to consume it. With a focus on the communication outcome, experience design artifacts can be the vehicle taking a technology solution from concept to production.