Rainbird AI - authoring platform. 

Design direction, UX, visual design

rainbird-hero-4
bird

Phase 00 - The Brief

If you are buying good design, the only way to quantify success is to write a brief. Otherwise how do you know anything past your own subjective opinions?. I always work hard with the client to get this part absolutely nailed down. I have a template/guide that I like to use that creates a good framework for an agreement between designer and client.

Rainbird-Brief2
bird

Phase 01 - Discovery

Design research - figure out the market, competition and how to redefine the gold standard.

Identify users - agree on types of users, their roles and responsibilities, then formulate a list

User interviews - try to understand the problem and pain points

User personas - create personas for each user type

Problem definition - agree on the problems to solve

Personas3

Am not really a big fan of traditional personas. I prefer to capture 'actual' users and try to extrapolate those needs to a general, rather than creating a subset of people that dont actually exist. In my experience, personas have been an expensive 'must have', in a list of UX research deliverables. I call mine 'Proto Personas'.

bird

Phase 02 - UX

Experience map - understand the experience a customer has with the product.

User Journeys - tells the possible ways a user can interact with a product.

User Flows - the path taken by the user to complete a task

Wireframes - low fidelity visual guide that represents the skeletal framework of the product.

rainbird-userjourneys
bird

Phase 03 - Visual design

Visual exploration - Concept designs and moodboard for discussion

UI Design - chosen visual style and graphic language applied to all key screens.

Typography - Typefaces, fonts and sizes rationalised to a minimum.

Prototype - High Fidelity Prototype with examples of full interaction & transitions

rainbird-laptop-4
rainbird-brand

Appropriating the brand across digital touchpoints. This is a subtle blend of understanding what is a flourish and what is a functional control. Brand can be appropriated sucessfully in loading, badging, iconography, onboarding, as well as messenging and of course, principal navigation.

rainbird-ui

Its important to spec out every interaction, browse, single, double click/tap and drag, and the associative state and visual status, of every piece of UI.

iconography

Iconography is extremely personal and subjective. In this case, I started with material design icon best practices, then customise, retaining the familiarity of metaphor, but becoming more visually congruous with the brand language and look and feel. This is part of the craft of UI design, along with typography, that needs to be pushed further, and respected more in visual design of digital products.

bird

Phase 04 - Handoff & Support

Design System - a library of reusable components, styles, components & patterns , guided by clear standards, that can be assembled together to build any number of applications.

Handoff - upload final visuals to Zeplin (or other cloud based handoff tool)

Support - work with developers to ensure good integration and build quality

bird

Results

The new designs were extremely well received, by all stakeholders, and are currently being implemented by the development team. More data to follow.