User Research. Stickies-Wireflows-Sketches. Functional Specs.
With a customer-centric design-thinking philosophy, design is fundamentally about being able to understand people's problems, empathize with them, and come up with creative, innovative and useful solutions.
After user research I typically explore insights using stickies on a wall to state goals, wants or needs (thoughts, feelings, emotions, desires, jobs-to-be-done, tasks or activities). Based on the research I lay out must-haves, nice-to-haves, proposed ideas, features and functionalities. I find it a useful way to winnow down insights into themes, and from those themes taking the process to the next level into a more refined state.
At the next level, I map out those themes into something actionable; translate them into desired functionalities of an Application (for example.) Here we're using stickies on a whiteboard to layout basic functionalities and task-flows of an application. Using a whiteboard allows us to scribble notes and comments alongside the stickies. I do this to make sure user goals are met and all desired functionalities are accounted for.
Using stickies is also a quick and easy way to start looking at potential functional branching of the application.
next step in the process: with a user flow, I start putting a flow together help visualize a user's journey; to aid in validation; brainstorm in collaboration with Product and Engineering, and to make sure everything customers are looking for is there, and technically feasible on a high-level.
The next step in the process is putting an actual rough representation of screens together into an interactive flow, known as a wireflow.
I create wireflows with more and more detail as I work along the process. At times this calls for high-level screen mockups. I walk through this flow with users (one particular user journey based on a common activity) to validate their goal-based task-flow. Simultaneously, I collaborate with product and engineering to make sure we have a simple and efficient interaction design and technically it's achievable.
This type of graph visualizes loop-backs and branches in terms of navigation and task-flow, along with desired functionalities and interaction potentials.
Before I go into wireframing a screen I often start with sketches of the proposed UI. These are preliminary ideas for design. I find it a "light", fast, noncommittal way of getting thoughts on possible designs onto paper that can be easily thrown away if it doesn't work. (Designers can be often reluctant to scrap a design once they've invested a substantial amount of wireframing-time into their work.) These sketches can also be shared with Product Owners & Developers early to get them involved in the design.
The sketch below is of a customer dashboard with KPIs. Once again, we want to make sure every desired functionality and feature indicated during user research finds its way into the design.
Sketching is also a fast way to lay out complex functionalities and interactions that need to be validated with Product and Engineering. They can be examined and validated during collaborative meetings and agreed upon. "Is this doable technically on the back end and front end?" "Does this make sense from an interaction perspective?”
Once these types of sketches are signed-off, I move on to wireframing, and flesh out sketches into UI designs.
The sketch below was for a team performance management dashboard design. At the earliest stages of design it's very helpful to properly think through all aspects of a proposed design solution which takes into account a lot of variables. For example, in this scenario I ask a lot of questions, such as "Will this be customizable? If yes, to what extent and how?" "What are the most important modules to display by default, out of the box?" Also, a layout grid would be important so modules can be moved around on a grid and snap into place even at different sizes. Without asking a lot of questions while sketching and establishing a baseline of rules one can go down a road that would be hard to reverse and would become costly later on.
An example of going from a very rudimentary sketch to final visual design for an enterprise application.
An example of 'functional specifications' provided to the development team after a form design is locked.