Handbook

Interface Design

We have a great team of creative Designers, some excellent web developers, some great copywriters, others great analysts and all of them amazing at creating & testing high fidelity interactive prototypes.

Overview

Designing Interfaces, particularly when part of a big scoped Product, requires a big deal of organisation and methodKeeping files, folders, documentation, and prototypes organised are key for product scalability and maintenance., at all levels.

Even though our process is a pretty straight-forward, we follow it meticulously as it's proven itself over the years in all sort of Projects, ranging from smaller, shorter timeline projects, to bigger, long-running, ever-changing Products.

Justin Seidl

CEO of Vertbase

Bring your specs to Significa but give them the creative freedom to unleash the best possible design and solution for your needs.

Discovery

Picking up from the Workshop (see Methodology), where by meeting with the client we develop a common understanding of the project, we become confident in taking on Design Projects while having a clear idea of what the product is and what it must become.

On one hand we put all these findingsUnderstanding the briefing, what the requirements are, the goals, the KPI's and establishing deadlines, the Brand's core values, its value proposition, the target audience and their interests, demographics, psychographics, as well as competitor analysis and research. before the looks but on the other, we motivate creativity, exploration and flawless execution. That's why our Designs (and Designers) fit perfectly with the project's DNA, not the other way around.

The Significa design team
The Significa design team

Flows & Wireframes

Flow charts & Wireframes are the backbone of every Design project. They allow us to:

  • Validate the entire product flow as a whole;
  • Outline all the screens and components requirements;
  • Validate every approach faster than with a pixel perfect, final design;
    Iterate faster;
  • Study and rapidly identify the need to tackle usability issues;
  • Evaluate overall effectiveness of the page’s layout on par with the best practices in usability;
  • Determine development/programming [abbr text="Quite often, how Development quotations are refined once the Wireframes are completed. The accuracy levels sky-rocket."]requirements[/abbr] beforehand;

Wireframes are meant to be done quickly without any design concerns, almost like a quick sketch. We explore possible approaches by playing with different flows, different hypothesis, and different paradigms, all without significant compromise.

Example of wireframes of the Reforestum mobile app
Example of wireframes of the Reforestum mobile app

Usability Tests

Usability tests are the guidance for our Design Process and the most effective way to test an interface’s viability and usability. Designing a clear customer oriented product doesn't make sense without having users' input as early as possible.

We gather people from the target group, or current users if it's an existing Product, preferably at our office – even though usertesting.com has proven its worth-fulness – to test a prototype built with the Wireframes. 

User testing session
User testing session

Why running user testing so early in the project?

Well, this is when the project is more flexible, few things have been defined and not much is in its final form, thus things evolve at a greater speed. Therefore, in case something turns out wrong during the tests, it is easier, faster and, above all, cheaper to make adjustments on Wireframes rather than on pixel perfect designs.

On the best case scenario, instead of testing with static, limited, InVision or Principle prototypes, we test using real-coded ones. We deploy a quickly crafted, coded prototype to users, featuring the core functionalities to be validated.

It adds-up a few bucks to the budget, but the findings are much more insightful and trust-worthy.

Example of Invision Prototype
Example of Invision Prototype

Mood-board

Once again following the discoveries made, we'll proceed by researching the competition and similar products, understand how they behave in the market, what’s their tone, how they communicate, what’s their language and which mistakes they have made – if someone had the same problems, why not learn from them?

After all the analysis and research process, we’ll define Behavioural Archetypes – which might seem like a cliché, but in fact it empowers lateral thinking and it improves problem solving capabilities.

On top of that, we create a Mood-board considering the Look & Feel. It helps us defining the UI direction of the Product by collecting inspirational, well-designed examples as well as having the Team and the Client on the same page on what visual direction to follow.

Look & Feel

They main objective of the Look & Feel is to define the visual direction of the Interface, widely called: UI Design. Creating a Look & Feel and carrying the Personality through the Interface, is essential. This sort of vocabulary and consistency will be reflected on the users and must resonate with the company's message and values.

Due to the more creative nature of defining a Look & Feel and its subjectivity, we keep this part of the process as iterative as possible. 

We take the Brand guidelines (if there's any) and the chosen elements from the Mood-board, select a few pages from the wireframes, the ones that should cover most of the required assets, and work on top of that. 

We try to make as many quick iterations as we can in order to quickly define things like typography, colour, buttons, spacing, icons or any other element that might make sense.

Final Design

The process of assembling and designing every screen, for desktop or for any responsive or adapted version, by addressing every interaction, every illustration, and every icon. 

From error to success messages, from loading to confirmation states, every little detail must be catered for to achieve a well crafted final product.

Unlike the length of the two paragraphs above, this is the longest phase in our Design Process. The level of detail we put into every element of the Interface gets reflected on the consistent quality we aim to achieve.

Prototyping & Re-Testing

Designing an Interface is not only about Designing pretty static screens. In most cases, the way things interact will impact the quality of the User Experience. By giving users visual context and a clear understanding of how things function we can ensure a great usability.

To test this, we create interact-able realistic-looking prototypes that serve 3 purposes:

  • Let developers know how things should interact;
  • Get User validation on navigation;
  • Get User validation on the final look;
Principle prototype created to demonstrate the onboarding
Principle prototype created to demonstrate the onboarding

Yet again, if time and budget allow us to, instead of testing with somewhat limited, interact-able Principle prototypes, we can create real coded ones. By deploying a quickly crafted prototype to users, featuring the core interactions to be validated, we can achieve much more insightful, realistic results. 

Alex Lunt

PM of Snipsl

View Case Study
Working with Significa is like working with an in-house team, they really care about the products they work on.

Design System

The usefulness of the Design Systems goes hand-in-hand with the need for scalability, efficiency, and consistency.

A Design System is nothin more than a collection of components, to be reused, guided by clear patterns that, together, are the building block of the entire Interface.

Design system for Akasha
Design system for Akasha

This is particularly useful in long-running, cross-platform, multi-team, ever-growing Products. Not only does it brings consistency and efficiency to the entire family, but it also increments speed and reduces friction to any future changes.

When adopted by the Developers, the advantages start to emerge, not only because it becomes a single source of truth, the one go-to place for clarification, but also because it becomes the centre piece of the Interface, its foundation. 

Design Validation

For this matter, we have a Reviewer role who is responsible for QA'ing the Design from the Wireframes, Look & Feel and Final Design phases and green light them for the next phase or Delivery.

Task under review in Jira
Task under review in Jira

Because our Front-End developers are also Interface Designers, by keeping them in the loop throughout the entire process, we add an extra layer of validation and ensure the Design is feasible.

By following the Methodology process, we don't let any piece of Interface be moved on to the next step in our Interface Design Process without thorough internal QA and validation. Everything the clients sees has passed through more than a couple of eyes.

Delivery

A correctly made handover plays a fundamental role on what the Final Product will become. The more friction we can reduce for Developers, either from our internal Team or the Client's, the better. Making sure they receive everything they need, the way they need it, will speed up their job and will decrease the risk of mistakes.

Redlines to aid the developer create complex components
Redlines to aid the developer create complex components

Usually, it includes an interface map, an InVision prototype, interactive redlines, the editable files and the Design System with neatly named elements and video prototypes.

For this, we setup all the Deliverables in an organised shared folder, where we make sure all the files have the appropriate name and are thoroughly prepared, ready to be taken over by the Developers' Team.

An organised Google Drive folder with all of the project's contents
An organised Google Drive folder with all of the project's contents