User Experience & Design Thinking

There no place in this world for ugly and frustrating software

Microsoft Partner - Silver Application Development Gold Cloud Platform Crown Commercial Service Supplier

Here, we are not going to describe what user experience or design thinking is, there are plenty of books on the subject. Instead, we are going to provide you our perspective and in indication of how we go about it. Along with this, we are going to share a few examples and photos of what to expect along the way, hint, there will be a lot of post-it notes, sharpie pens, sketching and people pointing and getting involved!

We believe that there is no place in today's world for ugly, difficult to use and frustrating software. Technology should start with the user, understanding what they need along with understanding what they don't need.

Only in very rare cases does technology succeed when it is difficult to use. This is due to the reward for using it being greater than the friction of using it.

To truly achieve seamless usability, we believe that you need to go deeper than the interface or user journey and service design. You need to ensure usability continues as a core value all the way through to the technical foundations and implementation.

User experience & design thinking tools and processes are deeply embedded within our Razor Sprint, discovery process and runs as a core trait within everyone in the organisation. Every person on the team is a “user” and a human being and has valid input into the quality and experience of a product. Developers, testers, designers, project managers and everyone else involved in a project have the autonomy to make enhancements and critical input is encouraged in every cycle to hone the users experience.

How do we do it?

Like people, every project is different. Some start with just a problem or a nebulous idea. Some may just be feeling that something isn’t as great as it could be and we are asked to discover what opportunities there are to make a business more profitable or efficient.

Sometimes there is a clear idea of what is needed and we are there to solidify, expand and hone that idea and make it a reality.

In others we are there to research, ask those ignorant questions to gain clarity and then to move on to develop a strategy.

Because of this there isn't a set formula or set of tools that are used every time, each case requires something slightly different.

We have a set of frameworks to provide guidance. When there is a need to innovate and improve with less of an idea of exactly what it is, we will use the Razor Sprint. When there is some clarity of a specific problem we will employ the Discovery process.

To help us give you a picture of what is usually involved, there is nothing like a picture. Here are a few common tools and techniques that we use on the design journey.


Sally's profile Cosomo's profile

Personas

Personas are one of the early building blocks of the process. They enable us to better understand the people involved in the process. They are used throughout the project and are always referred back to in each decision to enable us to ensure we are delivering the right thing.

Personas don’t always have to be people, they can be bots too! In the example below there is a bot called Cosmo we created during a project. This type of thinking enables us to ensure that a personality is delivered from all aspects of a project.


A User Story Map

User Story Mapping

We love user story mapping and it is a key exercise that enables us to drive out a full picture of a concept. It is incredibly useful to highlight the various moving parts and not just the interface and interactions with technical aspects being highlighted and brought into the conversation.

The user story maps drive conversations and discussions. The provide an early indication of the size and complexity of a project and encourage everyone to bring their ideas, experience and thoughts to the table.


Sketching ideas

Sketching Ideas

We encourage everyone in the sessions to be involved and this includes sketching. Sketching ideas, concepts and layouts. Getting people who don’t normally design interfaces who would be the people interacting with this digital interface can open entirely new and unexpected concepts - ones that on our own, we would never have thought of.

We co-create and share ideas in a safe environment. Getting people involved, especially the people that you would least expect to be involved, is one of the most important, energising and magic aspects of the process.


Capturing user stories process

User Stories with Sketches and Simple Wireframes

Combining both the user story maps with sketches and wireframes builds a detailed picture of what and how. The sketches drive out more conversations and lead to annotations and details.

Other members of the build team use these to discuss during planning sessions and refer back to either whilst on the board or by capturing photographs during the process.


Events Wireframe Project Dashboard Wireframe

Low Fidelity Wireframes

From the user story maps and sketches, low fidelity wireframes are created. These are the first step in refining the ideas.

Imagine that you are creating a statue of a person and this is a first rough shaping and scaling. You wouldn’t go straight in creating a detailed ear or toe and that is why we take this approach.

The low fidelity wireframes can be challenged, altered and tested quickly and cheaply all in the pursuit of moving forward and learning.

More details are added to these wireframes based on the sketches and further thought and discussion and are incredibly powerful in highlighting initial obvious potential problems or areas that can be improved.

A wider audience can be brought in for input and to validate that we are going in the right direction.

Being low fidelity there is less push back when things need to be altered and there is less of a focus on colours and other items that can be distracting at this stage.


Test wireframes? How? Really?

Getting feedback is really important and we find that takinging the low fi wireframes and testing them with people, people who have not been involved in the design process can deliver a lot of insight and value.

In this example, we took a complex process that was going to be delivered via a tablet, blew up the size of the screen and created a frame to give the effect of a tablet. Users were asked to perform tasks and when they touched what would be a “button” we faked the operation.

Users were videoed and the results were reviewed in detail with many improvements coming directly from this exercise.

You can learn more about this project and the end result on the Fretwell Downing case study.


High Fidelity Wireframe - 1 High Fidelity Wireframe - 2

High Fidelity Wireframes

High fidelity wireframes are where we start to introduce branding and a level of finish. This is where things really start to come to life. We begin to add colour and detail. Things can still be changed, challenged and improved, they are simply a step towards the finished product.

We find that some people really begin to get engaged at this point. People who find it tricky to see beyond the rough edges find this hurtles their minds into reality.

The first reveal of the high fidelity wireframes really do notch the excitement up.


There is a lot more to it than we can explain here and you can probably tell, as a very technical company, we are serious about the user. Weather it is a mobile app, integration, bot, web application or machine learning model or data project, we start with people and end with people, it's the only way to get great results.

What we do
What else do we do?

From web applications, to bots, machine learning and computer vision. There is a lot we can do, what can we do for you?

Houses drawn on post-its
Discovery - Gaining clarity on where you are going

Not knowing where you are going can be disastrous for any business or project. Our unique Discovery process lifts the fog and provides the clarity needed.

The Razor Sprint

The Razor Sprint is designed for people who believe technology can enhance their business. If you want to make a change and take action, rather than just think and talk about it, Razor can help.