By applying a sustainable and future-proof use of Responsive Web Design, UI Farm want to achieve performant, multi-device websites within an agile environment.
An always increasing percentage of global internet traffic is coming from mobile devices. In a traditional workflow, before the multi-device web became predominant, we mostly worked in two phases:
What Could Be Improved
Web agencies used to keep the roles of the designer and the developer separate. Sometimes, none or little knowledge was shared among them. Within this dynamic, designers delivered static design files to developers, who fought over the feasibility of every detail. Static image files generated negative loops:
- The client has to review every design change.
- The designer applies the changes, and re-submit the files for approval.
Negative loop: static images
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 larger. The whole process of handling this negative loop is time consuming and expensive, produces assets that are not ideal in a multi-device web, and forces the developers to adapt a static design to a different media (the browser).
Negative loop: not the real media
The 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. In a world where there are no more “standard” devices nor resolutions, the designer needs to think about:
- Device specific behaviour
- Look & feel on different media
- User interaction
UI Farm think it is pointless to try to achieve this within an old-fashioned workflow, where roles are separate, designers produce static image files, and efficient Agile methodologies are hard to implement. Using JIRA by Atlassian, we divide both design and development tasks into 2-week segments. The client gets access to view the progress of each task, interacting for an open and quicker collaboration on the designs and website development. This is also achieved through shared documentation, which can be used to collaborate on specifications and requirements within projects and tasks.
Git is used for 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. It also allows the developers to review each others’ code, and suggest improvements.
At UI Farm the role of UX designer and UI developer are hybrid, with less separation. 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 iterations, avoiding expensive, non-interactive mockups by designing sustainable reusable prototypes.
A new sprint-based methodology
Sprint 1: UX analysis
After agreeing the functional requirements and specifications, the UX designers will undertake sketching of the page templates.
Sprint 2 & 3: wireframe
Based on UX analysis and sketches, designers and developers start creating the wireframes, directly in the browser. Major benefits:
- The client can see the wireframes via a live URL.
- The wireframe is a real HTML/CSS responsive prototype.
- The prototype runs on any device, on any browser.
- By keeping a separate URL for each version, the client can see the progress.
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
Sprint 4 & 5: skin
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, running on all devices. It doesn’t take long to reach this phase, and this is why our methodology is making the usability tests doable even for low budgeted projects.
Positive loops: user testing
It is very easy to apply changes for subsequent rounds of tests, and even possible to apply changes between a usability test and the following. 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.
Also, client changes are a lot quicker than changing static image files, and having the designers and developers working closely, it’s easy for them to identify potential design pitfalls up-front. 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:
- Valid HTML and CSS, verified by W3C.
- Conformity with all priority 1, 2, and 3 guidelines of the W3C WCAG.
- A contrast ratio of 4.5:1 and higher (ideally 7:1) exists between background and foreground items.
86% of responsive sites send about the same hefty payload to small screens as they do to large screens. Brad Frost — Prioritizing Performance In Responsive Design
In other words, mobile users are downloading desktop-sized sites. We 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. All the results are documented and accessible by the client.
Don’t Repeat Yourself
We perform functional, interface, usability, compatibility, accessibility and performance testing on all pages against our defined browser list. All functional tests are carried out against the requirements agreed by both parties at the start of the project, and again, all the resulting documentation is made available.
As we are now designing directly into the browser, the final responsive site is already available. No further front-end development is needed. Using the ultra-efficient Capistrano, written in Ruby, 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
First iteration: responsive wireframe in the browser
Second Iteration: Skin
Third Iteration: Improvements From The Feedback
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.
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
We strongly believe 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.
- Responsive Design