- Quick Review
- Creating Wireframes for New Features
- Plan Now to Reduce Risk Later
- What's Next?
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Plan Now to Reduce Risk Later
Through this process, we were able to see how many steps or clicks a specific feature required in order to complete its actions. We found a number of features that took too many steps, and we refactored those use cases to make each one faster or simpler to finish. These alterations were easy to make at this point since there was little to no investment of time in the final design.
Notice that each of the areas in Figure 2 is labeled with an ID number. Each of these numbers mapped to a user interface wireframe depicting the general layout and controls that had to be designed for that step in the final product, as shown in Figure 3.
)
Figure 3 Wireframe of the WorkflowLab user interface.
From this document, we can trace throughout the entire user interface to complete all of the features of the product. This technique was incredibly helpful to gauge positioning, instructions, naming, and number of user interface elements before any additional work was completed.
We recently used the same process to walk through a complex feature that was yet to be developed[md]something that we thought would be difficult to roll out. After the wireframe process was finished, we realized that that feature was even more complicated than we had anticipated, and we decided to defer it to a future release. That change gave us the option to bring back other features that were originally removed from the release plan. If we hadn't completed this process, we would have started development on that troublesome feature. Inevitably we would have hit a wall, forcing us to release a product with a less-than-ideal customer experience, or at minimum causing weeks of wasted work that would have resulted in a low-feature release of the product. This process of mapping out user workflows and making a wireframe for the project reduced the risk to the project as a whole, even at the cost of additional time in the beginning. It also was a quick way to show Adobe our progress on the evolution of the high-level vision.
When we were performing the original design planning, we also wanted to assemble a basic style guide for the designers to use as a reference for the final interface design. As a cost-saving measure, as well as a way to make the application consistent with other Adobe utilities, we decided to use an existing user interface design. We adopted the basic UI rules and styles of Adobe Media Player as our style guide as we wrapped up the design planning.
As a team, developers, designers, and the product manager were able to review and make adjustments before a single pixel was pushed or a single line of code was written. This planning process really helped to make WorkflowLab a better product, and streamlined our design and development dramatically, without the need to do extensive replanning.