Why instead of how: building with a clear purpose
For example, a client asks us to build a landing page that enhances the number of trial registrations. To build this landing page, a few essential building blocks are necessary: a sign-up form, sign-up button, copy and maybe even some images.
Let’s focus on the sign-up button. This simple looking button actually entails a lot of different flows. First, we need to determine what the button looks like (design), what it says (copy), how the user interacts with the button (UX) and what happens when the user presses the button in between redirecting a user from page A to a successful sign-up (backend), and what type of feedback the user sees e once the sign-up fails (frontend)
To guide the clients into making the right decisions, we don’t only showcase the design, but also visualise its functionalities to explain how to maintain, test and gain information of this particular user action.
Prepping for development
Besides guiding clients, mapping out the entire scope with diagrams and flows quickly gets everyone up to speed with the intended outcome of the interaction. Writing software requires intense concentration, you need to survey all possible outcomes of the entire system in your head.
The scope document makes sure that naming conventions are secured. It makes sense to define a news article as a news article instead of a publication or blog post because we defined their functionalities and names early in the process. This document assists in providing quick insights with the team and makes it easier to hand-over projects between developers.
Cracking the code: how it works
Let’s dive deeper into the example of the sign-up flow. On the surface, the flow seems simple. A user lands on the page, provides the required information and submits the form. When done correctly we redirect them to a profile page, when incorrect we return them to the subscription fields with a small notification.