A modern workflow for the multi-device web

Analysis of the process that led UI Farm to their workflow for delivering modern web solutions, using a sustainable and performant Responsive Web Design.

Technical review by Kara McCain

Skills

Responsive Design HTML CSS Javascript Agile

By applying a sustainable and future-proof use of Responsive Web Design, UI Farm achieved performant, multi-device websites within an agile environment.

Introduction

An always increasing percentage of global internet traffic is coming from mobile devices.

Mobile data traffic looks set to explode, a map by Cisco
Mobile data traffic looks set to explode

A Traditional Workflow

Before the Multi-Device Web

Phase 1
Phase 1
Phase 2
Phase 2

What Could Be Improved

Separate Roles

Web agencies used to keep the roles of the designer and the developer strictly separate. Sometimes, none or little knowledge was shared among these roles. This dynamic produced static design files from the designers, with developers fighting over the feasibility of every detail.

Negative Loops

Static images

Negative loop 1: static images
Negative loop 1: static images

Static image files generates negative loops:

If the project is a responsive website, the process is going to be repeated for each content view, whether it’s small screens, tablets, desktop o large TVs. The whole process of handling this negative loop is:

Not the real media

Negative Loop 2: Not The Real Media
Negative Loop 2: Not The Real Media

The developers’ implementation of static image files creates web pages that have a different look & feel from the static designs. This is a fatal flaw, due to the different nature of the media.

In fact, the natural media for a web page is the browser.

Multi-device web

A multitude of different devices aligned on a table

Welcome to a world where you have neither “standard” devices nor resolutions. Read more about the multi-device web.

Responsive Web Design

In a multi-device web, Responsive design focuses on running a website on every device.

A models website shown on multiple devices

The designer now needs to think about:

UI Farm think it is too hard to achieve this within an old-fashioned workflow, where:

An Agile New Workflow

UI Farm uses Atlassian’s JIRA for project management. Throughout the duration of the project, we will divide the design and development tasks into 2-week segments.

The client gets access to view the progress of a task’s timeline and interact with UI Farm, for an open and quicker collaboration on the designs and website development. This is achieved through Atlassian’s Confluence, which can be used to collaborate on documents such as specifications and requirements within projects and tasks.

Version Control

Git is used for the code repository and version control. Every commit includes a detailed comment, and it’s linked to a specific project task on JIRA: this ensures full traceability and easy rollback in case something needs to be changed. This also allows the developers to review each others’ code, and suggest improvements.

Hybrid Roles

At UI Farm the role of UX designer and UI developer are:

The designer and developer work together to create a fully responsive HTML/CSS prototype that provides multiple benefits.

Design Sustainably With Agile iterations

Evolve and remove time-consuming bottlenecks, by turning indefinite loops into time-defined agile iterations, avoiding expensive, non-interactive mockups by designing sustainable reusable prototypes.

The New Sprint-Based Workflow

A new sprint-based methodology

Sprint 1: UX Analysis

After agreeing the functional requirements and specifications for the site, the UX designers will undertake sketching of the page templates.

Sprint 2 & 3: Wireframe

Based on the UX analysis and sketches, designers and developers start creating the wireframes, directly in the browser.

Major benefits:

Even at this early stage, the client can see how the site will interact with the user and how the flow of the product works.

A positive loop
A positive loop

Sprint 4 & 5: Skin

Traditionally, the next step would be for the visual designer to create static designs for each page, in applications like Adobe Photoshop.

At UI Farm we don’t use such tools to design responsive websites as they can’t reflect the fluid, non-static nature of the multi-device web.

With visual designers and developers working together, UI Farm take the interactive responsive wireframe and apply the design patterns on top, through the web’s natural language tools: HTML, CSS3, Javascript.

We then engage the visual designers when we need graphical elements for a design pattern, using tools like Sketch.

User Testings

One huge advantage with UI Farm’s agile new workflow is the possibility to add user testing sessions into each Agile sprint.

Clients can do usability tests starting from the wireframe version, as it is a real web product already, responsive and running on all devices. It doesn’t take a long time to reach this phase, and this is why UI Farm’s new workflow is making the usability tests doable even for low budgeted projects.

Positive loops: user testing
Positive loops: user testing

It is also very easy to apply changes for subsequent rounds of tests, and even possible to apply changes between a usability test and the next one. Finally, A/B tests can be easily arranged, before or after the project is live. Clients can test the usability of the very same HTML product, and watch it evolve through subsequent tests and improvements from the feedback. The tested product throughout all of the different phases, is the one that eventually makes it to production.

Even More Advantages

This stage is a true collaborative effort until the client is happy with the end result.

Sprint 6: Quality Assurance

UI Farm adheres strictly to industry web coding standards.

Performance

As stated by Brad Frost in his post Prioritizing Performance In Responsive Design, citing a research by Guy Podjarny:

86% of responsive sites send about the same hefty payload to small screens as they do to large screens.

In other words, mobile users are downloading desktop-sized sites.

UI Farm look at performance as a major feature implemented by default, and not treated as an afterthought. During the Quality Assurance Agile sprint, UI Farm run several benchmarks, implementing all of the performance improvements, to serve the best experience to all the different devices.

Starting from the first design phase, UI Farm run a series of tools, like sitespeed.io, to make sure the pages are working at their best on all the devices.

All the results are documented on Confluence.

DRY, or Don’t Repeat Yourself

UI Farm implemented a strong DRY strategy, essentially based on an object-oriented approach to both Javascript and SASS, loading the right asset for the right device, heavily reducing the number of scripts and the amount of code necessary to render all the single design objects. UI Farm’s implementation of responsive images is a great addendum to this approach.

Testing

We perform functional, interface, usability, compatibility, accessibility and performance testing on all pages against our defined browser list.

Deployment

As we are now designing directly into the browser, the final HTML/CSS/JS responsive site is already available. No further front-end development is needed.

Using the ultra-efficient Ruby’s Capistrano, we quickly deploy websites through SSH and Git, keeping any staging and production releases properly separate. In case something needs to be reverted, Capistrano’s multi-releases feature makes a roll-back to a previous version as easy as possible.

A Case Study: UniCredit Responsive Landing Pages

UniCredit, a leading European bank, hired UI Farm to re-design and develop their Online Acquisition landing pages, currently desktop-only. UniCredit required a strong eye on accessibility, usability, and a clean and modern design, optimised for great performance on all modern devices.

After the UX analysis, the client agreed with UI Farm to perform an optimisation of the content, prioritising it for a responsive re-design and the best performance.

First Iteration: Responsive Wireframe In The Browser

Responsive wireframe in the browser

The design stage started in the browser, by using a custom version of our multi-device framework. The mobile-first approach outlined the results of the content strategy analysis, so the first step was adding the real content to the correct markup wrapped in a solid HTML5 structure. Although no images or complex functionality were added at this stage, the resultant wireframe was a fully working HTML/CSS/Javascript greyscale website, multi-device compliant and ready for a first round of usability tests. ARIA accessibility features were added at this stage as well.

The wireframe kept its own staging URL throughout the development of the successive iterations, so the client could go back to check the progress of each phase.

Second Iteration: Skin

Second iteration: skin

Once the client was happy with the content-structured wireframe, UI Farm applied the first skin. Since the codebase is the same as the wireframe’s, the designers and the developers just continued to work, improving and adding depth, colours and images and always following the company’s brand guidelines. At this stage, the larger screens viewports gained some more specific details, while during the first iteration it was still showing the “mobile-first” approach.

During this iteration, discussions with the client ensured that all of the potential design and performance improvements were applied to the pages. The discussion kept going in parallel with the active development, so that it was possible to experiment with some of the ideas directly on the site, test the results, discard what wasn’t working, or keep the rest for the next iteration.

Third Iteration: Improvements From The Feedback

Third iteration: improvements from the feedback

The third iteration included:

This is the final codebase iteration, meaning the same pages had undertaken several phases, going from a greyscale wireframe to a full-fledged web product while maintaining the same repository and a consistent look & feel. The client was free to perform full-scaled usability tests over different stages of the same website, without worrying about the non-real feel of static mockups and prototypes.

A final word for the great efficiency and sustainability of having a product that’s evolving without changing its nature: there are no static JPEGs to be churned into HTML/CSS pages by two different teams. Everyone can relate to the money-saving argument.

A/B Tests

UniCredit performed A/B tests on the new landing pages, which proved successful for all mobile devices against the former desktop-only version.

UI Farm’s innovative workflow and unique skills has given us a very clear insight into our customers’ behaviour and preferences, which has considerably boosted our account application conversions.
Thanks to UI Farm’s approach, we have been able to significantly improve the experience delivered to our customers and prospects, and make changes that may have seemed minor to us but have resulted in significant conversion lifts. UI Farm has truly changed our approach to Interaction Design. Gabriele Rosati, Head of Interaction Design at UniCredit

Conclusions

UI Farm strongly believes that the new era of multi-device web should massively gain from technologies like responsive web design, and a more sustainable workflow as outlined. To achieve this, new methods and a more focussed effort on features previously considered minor, need to be used. Or invented. Or both.

This post was originally published on Medium.