Digital, Strategy & Design + + + + +

When code meets design

Guiding user interactions

 

Magic happens when code meets design. That has been Vruchtvlees’ vision from the early beginning. The past years, Vruchtvlees has been growing rapidly. Not only did we become European Design Agency of the Year, but also continued working on more ambitious digital projects such as Dutch Design Week, Cinekid Festival and Rialto Cinema, welcoming more developers and designers along the way. Challenging projects, that required us to restructure, adapt and refine our digital workflow from design to code. In this article, we shed light on our current process of connecting design and code.

TL;DR

  • Building user flows binds the team from development to design.
  • A scope document and our boilerplate helps the team to speak the same language.
  • A webpage might seem simple at the surface, but even the simplest sign-up form asks for hundreds of connections to be made.
  • Wireframes and mock-ups work on a certain level when capturing concepts and ideas into code, a scope document works even better in showcasing the different flows to be made.
  • Always keep in mind that we build for future development.

Sharing is caring
Development, in general, has the tendency to become quite abstract for outsiders, while design directly speaks to mind. Currently, society has become accustomed to the fact that something ‘just works’, that people seem to forget what it takes to realise certain (inter)actions on a website or application Extensive research and mapping out user flows are essential when creating compelling and intuitive functionalities.

Wireframes and mock-ups work on a certain level when capturing concepts and ideas into code.

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.

When designing and developing a form, we need to determine which fields we want to intercept. We want to remain focused on the fields the system needs to create a user account. We don’t want to collect any unnecessary information at that point to make sure more users sign-up right away.


We have to take into account that a user can sign-up from different devices. A mobile phone has a limited viewport to provide enough room for multiple fields to be shown. Below the surface, once a user submits a request to the server we can have multiple actions that have to take place before the user is being redirected towards a profile page.

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.

Work at Vruchtvlees?

We are always on the lookout for surprising talents who have the drive and the curiosity to make the best digital products in the world. As part of our team, everyone contributes their own part to implement Dutch Design to the web. From development to design and from marketing to interaction, co-creation comes first. For clients and brands, where you can really make an impact with your digital expertise.

Let's go

Loading