01. The Discovery Process
The key moment is when a designer transitions from an agent, into an extension of the client themselves.
When a client walks through the door and puts a brief forward, a common practice by most app shops and even agencies is to digest the brief and produce something in return – but what really takes our fancy is the story behind it. What makes a good product great is the narrative, the passion of the founder, the enthusiasm of the team – all positively contagious if extracted in the right way. Discovery sessions facilitate precisely that in a systematic and almost scientific manner.
With 66% of projects failing due to ill-defined requirements, discoveries mitigate that risk and can reduce redevelopment expenses by 30-40%.
As the name states, a discovery workshop is a brain dump session in which potential clients are offered the opportunity to discover their product from a different perspective, whilst identifying what their current challenges are and how we can aid in solving them. The sessions are extensive, starting with the vision/dream and the motivation behind the business, and ending with tangible screenflows, and at times UI concepts. In the long run they help give substance to the following three areas:
02. UX Architecture
Once all the features are extracted in the first half of the discovery session, the next step is to try and evaluate how to fit them all in the palm of your hand via a 5 inch display. A common mistake, in an attempt to get all the bells and whistles on, is that key functionality is often compromised – at times making it impossible to even access. This is where exercises like the red route analysis come in handy.
The red route analysis is one of our favourite techniques to map out user experiences, which ties in directly to the screenflow architecture. It helps articulate features that need to be at the forefront of the experience, as opposed to those that could be hidden away behind a menu, for instance. In addition to the red route, depending on the kind of product, several other exercises will be used in tandem – such as persona building, card sorting, emotion wheels and so forth.
The most tactile part of the process, prototyping involves using special software to turn screenflow diagrams into clickable interactive prototypes. These are usually without the UI skin applied (wireframes) but may differ based on the requirement. None the less, its primary purpose is always to validate the UX assumptions by testing it with colleagues and user groups, and iterating if and when necessary.
Our preferred tool of choice, among others, is Justinmind prototyping tool.
Cycle through the following slides to see what various screens look like in their prototype wireframe form.
04. UI Design
Undoubtedly the phase that gets clients most excited, UI design is the process of transforming dull and drab wireframes into shiny, colourful screens. This can be broadly broken down into the following two categories:
Forming the bulk of UI design, screen design is exactly what it says on the tin – dressing your screens and all the elements therein with aesthetically pleasing skins that are in line with brand guidelines and/or other visual extracts from the discovery session. Traditionally the godfather of design softwares – Photoshop – was used for this process, but off late leaner and meaner softwares like Sketch have carved out a well deserved space for themselves.
While interface animations are often seen as a part of interaction design, which is in itself an important component within the giant umbrella of user experience design, the interface animations that we speak of are the ones which add a bit of flair to the UI rather than giving context to the UX. They are the user delights akin to watching fireworks in the sky, and were also traditionally created using veteran softwares like After Effects. Today, however, softwares like Flinto and Principle have taken centre stage.
05. Liaising with Developers
With our Exnaut hats on, we also undertake the handover and liaison process. Once the designs have been uploaded onto a collaboration software like Zeplin, developers have easy access to all the screens and assets which can be downloaded in the necessary resolutions.
While our process ends there – we are also able stay involved as part of a maintenance retainer, checking the builds with our QA engineer at the end of every sprint to make sure the product reflects the functionality and designs to the last pixel.