When code meets design

Wireframes and mock-ups work on a certain level, when capturing concepts and ideas into code. However, behind the visual aspect of a site, different functionalities need to be mapped out to determine the outcome and end product. Mostly, when it comes to connecting API’s.

Behind every button, for example, flows have been build to guide the users. When designing a website, our designers have to take these interactions into account and check whether the functionality a design entails, is possible to develop within the scope of the project. When it comes to connecting API’s it’s even more important to determine the outcome and end product within the user flows.

It’s a team effort
Depending on the initial briefing of the client, a team of designers, developers, marketers meet with the client in backlog sessions. In these sessions, we map out the desired wishes and functionalities and look at potential solutions and ideas from every angle. This helps us to immediately discuss different sets of functionalities and functionalities with the team and our clients. At the end of the backlog, we have a clear aim and overview of all desired wishes, potential solutions, so we can start creating the product in different design and development sprints.

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.

For instance, we can store the user-information within a database, so the user gets redirected to a profile page where its data is shown. If you want to provide a newsletter sign-up checkbox in the profile, it might be that we have to connect an external API that receives data from the mail client and returns a response if the subscription has been successful. After successfully signing-up, a confirmation mail has to be sent, collecting all the stored data and verifying them through a small link in an e-mail. This e-mail provides a link to their profile page that shows the stored information about the user, validated and collected below the surface of the front-page.

Reflecting and iterations
At first sight, this process provides enough context, but certain nuances are lacking this concept from a developers’ point of view. Do we even want to present a sign-up button if the user is already validated within a session? If so, the design team has to think about ways of showcasing context so it’s clear for the user. Working on digital projects requires a team effort, where insights from all disciplines are shared to build and structure the best user experiences. By defining user flows, we are able to prevent easy mistakes early in the process.

The sign-up process is just a small example of all the flows and user interactions that need to mapped out when building a digital platform. Depending on the impact of these isolated features a flowchart can really make a difference going forward. Just like all digital products, a platform is a hybrid product. It needs to be constantly refigured and optimised. Therefore, we build building blocks on which we can further develop the product so it’s as future proof as possible.