My UX approach is both methodical and cyclical.
After refining and iterating on it for 3 years alongside of a fantastic team, the process of creating a new online platform, or revising an existing one, is based on a fully user-centric model.
Step 1. Research
The kick-off meeting
A day of understanding. I’m experienced in facilitating half-day or day long sessions with CEOs, product managers, marketers and the rest of the agency team with the aim of extracting information from the client in creative and insightful ways. Being a big-process nerd, again, I have a methodology for running my workshops mostly using the KJ technique and a few fun exercises from http://goodkickoffmeetings.com/ – as well as a tonne of post-it notes. To read more about my approach to the initial kick off meeting please read here.
This session is intended to find a good level of understanding about the client, the project and the users with any data already available. Understandably we aren’t going to solve everything in one day, but finding that balance of depth and complexity without over committing to a solution is key at this stage.
Within the research phase, we need to figure out, together, who your users are and what motivates them. The kick-off meeting will have given us a good sense of the various user scenarios, but we need to truly understand who your users are and their blocks and motivations through data mining; this data is then interpreted into insight.
I use a variety of techniques including, but not limited to:
User Customer Journies
Understanding how users move through your site is one thing, but we need to understand how a customer will move through the complete brand interaction – whether it’s buying a product or researching a service. It’s highly encouraged that you become a customer yourself to distance yourself from the marketing facet of the business and experience naturally how you interact with that brand online, competitor’s brands or, where available, that brand’s physical store. Some of this data can be gathered from existing analytics and visitor behavioural videos also. The key here is to understand the customer journey and map this out in addition with the individual user blocks and motivations, taking into consideration journeys across different acquisition channels and devices.
Step 2. Design
With the research available to us, we can start to make steps to develop an intuitive website information architecture to support the user scenarios and business objectives we identified previously. At this stage, we also need to assess the volume and types of content available. Usually organised with the client, the KJ technique allows us to focus and prioritise on the most important content for both the business and the user. From here we identify any content and information relationships and test them once more against the user journeys.
Often this is done collaboratively with the client, project manger, the developer, the designer and most importantly the client. For the low-fidelity wireframes I recommend always using a whiteboard, sometimes supplemented with post-its, and for the higher fidelity with annotations I use either OmniGraffle or Visio. A few key principles within this methodology:
- I never wireframe alone – here’s why (I learnt the hard way!). Collaborative wireframing usually creates the most effective route. A small example is to involve a team member with SEO input into the team because SEO and UX can often clash, where UX might want one less page for improved usability, SEO may want an extra fully optimised page for search. These types of discussions and debates can be had at this stage.
- I also don’t necessarily believe in wireframing mobile-first; for me users don’t care about your responsive site, they just want to be able to get stuff done. I believe in cultivating a consistent experience across all resolutions and looking at the different user needs and journeys for each device.
- I always produce low-fidelity wireframes instead of high-fidelity, often experiencing a crossover (and sometimes clash) between structure and design.
An example of how I prefer to lay my wireframes out by identifying the content required for the page, prioritising this content and then labelling in a low-fidelity format
An example of wireframing in Visio demonstrating the desktop variant of a low fidelity wireframe with annotations to understand and reiterate the thought process behind the structure followed by more of a high fidelity wireframe next to it.
An example of wireframing in Visio demonstrating the mobile and desktop variants of a low fidelity wireframe
An example of wireframing in Visio demonstrating the mobile and desktop variants of a low fidelity wireframe with an added sketchy effect (sometimes insinuates a feeling roughness about it and therefore able to be improved and iterated)
Design is all about solutions. Sketching possible solutions is vital to understanding how a user will move through the site and move through each page. Within this, sketching a tiny 3-pane storyboard to understand how the user will achieve an objective achieves more effective results quicker. Even more granular than this, understanding the user issues and finding natural 2-stage chunks within the story and creating a solution together. Here, we can divide and conquer where everybody picks a piece of the story they’re interested in and works on that (generally this gives a sense of ownership) or we can work on it collaboratively (usually preferred – sometimes just the designer, developer and I!)
Knowing the user blocks and motivations will also aid in creating persuasive techniques, pushing them through their online journey.
An example of a sketch of a solution of a specific user issue of demonstrating too many elements within a navigation structure
Then comes the part of the process that I’m only really involved in at review level – the styling. There are plenty of different processes for this from mockups to prototypes or straight to design. My personal preference is to create moodboards earlier on in the process (a good bit of creative always puts a smile on a client’s face!) and facilitate this later with style guides and designed elements. This is what Brad Frost calls Atomic Design. From experience it doesn’t always work and is dependant on the client that you are working with. However, in theory, so long as that client has been cultivated and educated throughout this process and, more importantly, been involved, this is a very efficient method of design.
Step 3: Development
Not wanting to go into this section too much but the development process is much more of an agile process than what you read above – which is much more waterfall based. I have been in projects where the design and development fall into an agile-inspired process but it is often client and context dependant. The UX role within development is still an important one and much more than just quality control. At the end of every sprint there is a retrospective in which the team will get together to review the work done so far. There is a requirement at the end of every sprint to:
- Test the design – both internally and with real testers
- Sense check the build against the overall user tasks and journeys
- Identify opportunities of improvement for future testing scenarios
Step 4: Analyse
The final step after a development release is to analyse. Here we start to move more into a Conversion Optimisation approach through identifying how users are using the platform. Notoriously, what users say they do and what they do are two different things. Often I let the site lie to gather important data via Analytics. Whilst waiting, it’s important to ensure that the built prototype is fully tested and we need to understand the key user journies and validate against the theory and research already undertaken above. Remote user testing sessions and visitor behavioural insights are great for this.
Reporting is also key at this stage as well and it’s important to set your benchmarks now to help identify improvements in the future. Understanding the performance of the site in a real environment is also key; speed optimisation for example always being a metric that is difficult to test before go live.
If you’d like to learn more about a structured UX approach I’m more than happy to discuss this with you and your requirements. I’m certain with my track record in using this approach I can facilitate in a proven methodology that will get the best out of your team and the most efficient user-centric solution for your client.