UX through the development process

Timing is everything

A common problem encountered by most User Experience (UX) teams is being called upon too late in a project. This is often caused by a technology-focused mindset within the project that sees the User Interface (UI) as a development task which happens later within the project. From a purely technical point of view this is correct, but what this fails to account for is that the actual building is only about a quarter of the process that goes into creating an appropriate UI for a product. This issue is often described as the UX Iceberg.

The UX Iceberg

The tip of an iceberg

Only the tip of the iceberg is visible above the water.

A large portion of an iceberg is below the surface.

A large portion of an iceberg is below the surface.

The UX iceberg

Beneath the surface lies the discovery, definition and design work which goes into building a good User Interface.

The UX iceberg is a great analogy as it effectively articulates the process that goes into building a good user interface and explains common misconceptions around user experience and user interface design. It’s only natural that people should focus on the interface design element of user experience: that’s the bit that you can see. Making a user interface without doing user research is like buying shoes without checking the size: you can but at some point it’s going to get uncomfortable...

If a designer was able to produce an attractive, intuitive and appropriate interface for a product without delving below the surface, simply by sprinkling some pretty design dust, then UX really would be magic. making a good user interface is a process.

To be confident of building a good UI, you have to start by understanding your users, from which you can work out what they need, what is working for them, what isn’t and where the pain points are. Once that’s properly understood, you can start to think about what needs to be changed and how. Once you know that, you’ve got your destination and can start to think about how to get from A to B.

To get a good UI, it needs to be geared to your audiences’ needs, expectations and preferences.

Fortunately, there are established design frameworks such as the double diamond process which are geared towards iteration and user-centred design.

The double diamond method

The double diamond process breaks the creation process into four stages in a manner that explains and highlights steps in the process.

  • Discover: Understand the problem by speaking with the users who are directly affected
  • Define: Analyse the data and define the key issue or opportunity to address
  • Develop: Generate ideas and possible solutions to the problem
  • Deliver: Validate the solutions that work and prepare the design for release.

The first two phases constitute the first diamond focusing on identifying and analysing the problem; the second diamond on designing and delivering a solution to that problem. Each of the diamonds breaks down into a two phases: a divergent ‘blue-sky thinking’ phase which focuses on open-mindedness creative thinking; and a convergent thinking phase that focuses on critical thinking and prioritisation and closure.

Discover

The discovery phase requires divergent thinking, an open mind. Don’t assume you know what the problem is, and don’t ignore aspects of the problem which you consider irrelevant or impossible to fix; such critical thinking should be done in the define phase. The purpose of this phase is to generate as much raw material as possible in terms of data, user insights etc.

Methods

  • User research: Conduct interviews, surveys, and observations to understand user needs and pain points.
  • Competitor analysis: Analyse similar products to identify good practice and established conventions.
  • Stakeholder interviews: Gather insights from stakeholders to align on goals and expectations.

Once you are confident you have a strong handle on the nature of the problem at hand, it’s time to progress to the define phase to apply critical thinking to the problem in order to prioritise and focus.

Define

So, you know what the problem is; excellent, what are you going to do about it? What can you do about it, and what else might those changes the impact on beyond the problem you are trying to solve? Unless you’re supremely confident of the answers to all of the above, you will save time and money by asking end users to input into answering these questions. Service owners and senior managers have a good high-level view of the issues, and probably have access to some meaningful data, but the devil is in the details and only the end users know that. It is tempting to skip end-user involvement at this stage. In some circumstances that may be correct; however, in deciding on direction of travel without consulting those that are familiar with the details may mean heading off in the wrong direction, a situation that will become more costly to rectify the longer it remains unacknowledged or uncorrected.

There are several activities you can undertake at this stage to ensure you’re on the right path:

  • Affinity mapping: Organise research findings to identify patterns and themes.
  • Personas: Create user personas to represent different user types.
  • Journey mapping: Map out user journeys to visualize the user experience and identify key touchpoints.

These activities allow you to dig into the detail of the processes by harnessing the viewpoint of those who know that detail best, end users.

The end of the define phase brings you to the mind-point of the double diamond process and the conclusion of the problem definition phase. At this point you should have a clear problem statement based on solid user research and analysis, which should allow you proceed to developing and delivering a solution with a high degree of confidence that you are addressing the right problem. If this isn’t the case, you should consider further iteration on the problem definition, proceeding into development without a clear problem definition can prove very costly: define the problem first.

Develop

Now that we have a clear definition of the problem, we can switch again to divergent thinking, applying blue-sky thinking to solutions to that problem. This requires brainstorming and iteration.

Brainstorming

Brainstorming plays a crucial role. This phase is all about generating and exploring potential solutions to the problem defined in the previous stage:

  • Idea generation: Brainstorming sessions encourage the team to think creatively and come up with a wide range of ideas without immediate judgment or criticism.
  • Divergent thinking: It promotes divergent thinking, allowing the team to explore various possibilities and innovative solutions.
  • Collaboration: Brainstorming fosters collaboration among team members, leveraging diverse perspectives and expertise.
  • Problem-solving: It helps in identifying multiple approaches to solving the problem, which can later be refined and tested.
  • Engagement: Engages all team members actively, ensuring that everyone contributes to the solution development process.

By encouraging open and creative thinking, brainstorming helps teams to uncover unique and effective solutions that might not emerge through more structured or individual approaches.

Prototyping

Iteration is key to the double-diamond process and especially so in the Develop phase. Best practice and design skills can only get you so far; testing interfaces with users is the only way of knowing that your design solutions are heading in the right direction. As such, you want to test your ideas as quickly, cheaply and often as possible.

Prototyping is an essential part of the design process that helps you communicate ideas, validate concepts, and refine your design based on feedback and iterate quickly without spending too much time or money on full-fledged development. A prototype is a tangible representation of a design concept. It’s about showing, not just telling. Whether you’re building a simple sketch or a fully interactive mock-up, prototyping helps in several key ways:

  • Visualise your ideas to help stakeholders understand and engage with your vision.
  • Test usability and functionality early to catch potential issues.
  • Gather feedback quickly and make changes with minimal cost and effort.
  • Build team alignment by providing a concrete artifact for discussions.

Methods

  • Brainstorming: Generate a wide range of ideas and solutions.
  • Wireframing: Create low-fidelity wireframes to outline the structure of the design.
  • Prototyping: Develop interactive prototypes to test and refine ideas.

Deliver

The delivery stage is more familiar to most people, as we’re now working on the final product, the bit of the iceberg above the water. As such, there’s less to say here as this is familiar ground to most. Iteration is still key in the Deliver phase, but the emphasis now is in narrowing the of scope changes; you don’t want to be making major changes to your product at this stage, as this will likely involve expensive re-work and put strain on budgets and deadlines. In addition, we also need to start communicating to users about the launch of the product.

Methods

  • Usability testing: Test the final design with users to identify any issues.
  • Iteration: Refine the design based on feedback and testing results.
  • Launch planning: Prepare for the launch, including communication and user onboarding strategies.

Saving time and money

You may be thinking that the four-phase double diamond process sounds like more work, however it’s focus on iteration and regular testing allows for regular course-correction and considerably reduces the risk of re-work, after all making design changes becomes more expensive the further through the development process you are, sometimes 100 times more...

Making anything that has the least bit of ambiguity or creativity about its brief requires iteration. Many authors say of their books ‘the first draft is for me’. The job of the second draft is to fill in the gaps and articulate the ideas in terms other people will understand. Many of those gaps are filled by inferring from your own first draft, but through the eyes of a reader, not a writer. This is where other people’s opinions come in; friends, family, editors, other artists, your mate Sam from bingo night. Readers expect everything to make sense, and they will do their best to make it so, and where they can’t, you’ve got pain points for the reader that the writer needs to fix. Sounds a lot like user testing to me.

Now consider the cost of not operating in this manner; let me know if this sounds like any project you’ve been involved with:

‘Our destination isn’t getting closer quick enough’

‘drive faster!’

‘hmmm it’s still not working, are you sure we’re going in the right direction’

‘DRIVE FASTER!!!’

‘but…’

‘CN’T TLK, DRIVING V FAST - SPEAK SOON!”

Sound familiar?

If you commit to a particular direction without sufficient scope for course correction, you risk heading off in the wrong direction. Next thing you know you’re low on fuel, your phone’s dead and your ETA’s not looking good...

So if you want to stay on schedule and under budget, avoid haring off in the wrong direction; instead be a sensible tortoise and progress serenely to your destination without diversion, delay or disaster, grab a double diamond today.