User experience as a concept has been around for decades – some say that it started when Henry Ford set out to make human labour more efficient and productive. You can find traces of user experience thinking all over the world, in disciplines like urban planning, for example, from the aesthetic considerations all the way through to how you push or pull on a door.
Now in the digital space, UX is, relatively speaking, still in its infancy, but the same principles and philosophy apply – and agency clients are beginning to see its value in the digital space.
The following is written with clients in mind because while, in an ideal world, you’d want to apply every single principle and research every idea, the real world dictates that variables like project timelines, scopes and budgets be taken into account. Therefore, it’s important to be as thorough as possible with whatever resources you’re given.
So, let’s have a brief look at what makes for good UX design.
Before we even start thinking about a project, we set up a meeting with client and have a discussion about the project.
From the workshop we can begin to establish:
- Project goals;
- The users and their journeys (from the client’s perspective);
- Current challenges;
- Project scope; and
- Project success metrics.
After consolidating all of the information from the workshop, we’re confidently able to analyze the data and begin formulating the next steps of the process.
User Journeys & Site Mapping
Let me begin by saying that most of our user journeys are based on a combination of what information the client has provided and our own assumptions.
When creating user journeys, a UX Designer needs to tap into their own sense of empathy. It’s important to put yourself in the user’s shoes and to think of all the steps a user will need to make to achieve their goal (and obviously the client’s, too).
After establishing user journey flows, we begin to establish the sitemap.
The sitemap is what the client signs off. it gives us an indication of how many levels the project will need to have and it affects SEO and the developers’ approach when they begin building the site.
Sitemaps allow us to set the information architecture and decide whether it’s all organized in the best way possible. All of this is to ensure that users – and the client! – will reach their goals.
Even though sitemaps do get signed off, we don’t treat a sitemap as having set the information in stone. We often find that parts of a sitemap should remain somewhat dynamic. For example, you might discover a better way to label something later in the process, and this generally happens when there’s a time crunch.
Many clients at this stage want to understand how each page will be populated with content, based on the sitemap’s hierarchy.
So, from the sitemap, user journey goals, and client goals, we start thinking about how the page needs to be structured.
The benefit of doing this at this stage is that we’re not being distracted with design. Rather, we are still looking at things from a birds-eye view, which allows us to establish what content needs to be prioritized and when.
Now, we think it’s important to mention that there are many UX diagrams, mapping and/or flows being used out in the world, some of which fundamentally overlap each other and some are “same-same, but different”. From our perspective, its dependent on the project and the client’s expectations, but the most important thing to think of is: which one will allow you to thoroughly organize and document the flow of thoughts and decisions and allow you to move seamlessly onto the next steps in the process.
Before you know it, we’ve reached the wireframe stage, here the website starts developing visual legs.
Based on all of the hard work done in the previous steps, we’re now ready to start structuring the website visually, from the navigation, thanks to the site map, all the way through to the page content, thanks to the page flows.
While designing the wireframe, it’s important never to lose sight of the users’ and client’s goals. The beauty of following the previous steps is that it frees up your problem-solving capacity at this stage.
Here, we’re dealing solely with visual hierarchy problems – no structural or label problems; that’s all been solved in the previous steps. But, with that said, you will discover problems and, like previously said, you should remain agile when encountering these.
At this stage, we always reference Jakob Nielsen’s 10 heuristic principles. These serve as simple reminders of principles one should keep in mind when designing interfaces for users.
And at the back of that we also apply the 5 Gestalt principles which carry through to the final UI stage.
High Fidelity UI
When you read UX/UI, do you assume it’s a 50/50 effort?
We see it as more of a 70/30 effort.
You would be amazed at how many problems are solved as early as at the wireframe stage.
My colleague, Imogen, wrote an article on what makes good UI design. which will give you a deeper look into the final step – user interface design.
Sadly, user testing is a step that tends to be overlooked on some occasions, mostly due to budgets and/or project timelines.
It’s conflicting because, while the client is happy and has signed off the work, it’s a one-sided victory. What about the people we’ve designed the site for?
User testing eliminates assumptions and replaces them with hard facts.
Put in the effort and good design will follow
These are the steps we currently follow at Flume when embarking on a UX design project. We’re constantly looking for new techniques and methods to apply to our arsenal, so that we can continually improve our UX skills.
It’s important to remember that you should also reference all the steps taken during the project’s lifetime, and the same applies to research, which will always play a crucial role in designing great UX.
Our goal with each project is to ensure that what we produce meets users’ expectations, and sometimes things do get blurry after a long day, making it easier for mistakes and other gremlins to slip into the works.
When in doubt, looking up something as simple as “when to use a radio button vs a check box”, or having a fresh pair of eyes look over your work can solve problems without much effort. In the end, it’s all about keeping your eye on the prize – a smooth and successful end user journey.