AS-IS and TO-BE Analysis
In web design, or any other product development process, User Research methods are performed to analyze and test usability, function, and performance of your product. There are several methods that can be deployed depending on your desired goal or outcome. The book, UX Methods: A Quick Guide to User Experience Research Methods is very handy to reference these methods. In my previous two blog posts, I discussed the System Usability Scale and the Semantic Differential Analysis. Today we'll be going over the AS-IS and TO-BE Analysis.
UX Method
AS-IS and TO-BE Analysis is a visual comparison method where the current state AS-IS (website, in this case) of the product or system is shown next to the future TO-BE state. This method is used when a feature in a product, or website, needs improvement and a new version is being considered. A simple before and after analysis can be very helpful for considering potential large changes. It can be difficult for new or non-users of a website, or system, to understand changes to the workflow. By visualizing them side-by-side, these changes can be fully understood. To put it simply, this method is a direct way to see if the new model is an improvement to the old one.
How is this method performed?
First, you need to establish user goals and targeted user persona. What is the end goal? What users are you targeting specifically? Review the personas you've created to make sure these users are being addressed.
Then, visually map our the current product, the AS-IS state. Use a visual mapping language and show the current state to better understand the format. If this is a website, create a site map. If it is not, create a flow chart. This is best done online on websites such as visual paradigm. Create annotations on the AS-IS map pointing out areas that you'd like to change or modify. These are where there might be issues in the current process that need to be addressed. Below is an example of an AS-IS website site map. Notes were taken separately.
AS-IS Website State
Next, create a new map that has the modifications and solutions, the TO-BE path. Using the persona and notes from the AS-IS state, map out this alternative version.
TO-BE Website Path
Finally, place both the current and modified visual maps next to each other, AS-IS on the left and TO-Be on the right. Then discuss which one affords the best results for the user, along with the effects and outcomes. The photos below are the AS-IS and TO-BE states next to each other for direct comparison.
Helpful Tools and Examples
This video shows you how to create as-is and to-be with Visual Paradigm, and how you can analyze the changes between your processes.