Dave's Condensed Guide to UX for your Website or App

Are you redesigning a website or app, but don't have the budget for hiring a UX agency? You should consider doing a UX course (I just completed one at IADT). But what if the redesign can't wait for you to finish a course, and you want to learn the basics to make sure you are approaching the project with a user-first approach?...

...enter Dave's Condensed Guide to UX. Let's get stuck in.

Summary of the 10 UX steps you need to take:

1. Conduct User Research on your existing website or app & Analyse your User Research
2. Complete a Context Review
3. Create Personas
4. Scenarios & Tasks
5. Identifying the problem
6. Perform a Heuristic Evaluation
7. Create a Prototype
8. Test your Prototype with real users & Analyse your User Research
9. Use user feedback to iterate the Prototype
10. Proceed to Design Phase

1. User Research

There are lots of methodologies that you can use to research your users, however these are often the most suitable for websites and apps:

A. Questionnaires/Surveys

Quick and easy to set up, online surveys can be set up in minutes. Use your customer database to extract email addresses so you can email them with a link to the survey. You could also use the same email list to create a custom audience and run social media ads that link to the survey. Just make sure you have consent from these customers to contact them before you send any emails.

You'll be able to extract the insights from this quantitative research more accurately when you ask closed questions. You can do this by using tickbox or radio button questions. Use at least one open-ended question as well, so you can get more free-flowing data - you can analyse the phrasing/keywords to see if there are re-occuring themes that surface.

My recommendation: Google Forms. Free, easiest to create, no limit on number of participants.

B. Interviews & Usability Testing

This is the good sh1t: Qualitative Data. Where you'll find the little nuggets that really annoy or really delight your users. Where you'll get unexpected results. Combine an interview with testing of a task for super powered data.

Interviews & Usability Testing generally works best when there is only one participant. Some of the main problems with focus groups is that not everyone has an equal voice, some will dominate the conversation, and participants can be influenced by what others say, so it's not always a natural environment for what would happen in the real world.

Interview Protocol

Make a plan for how many participants you will interview, where you will hold the interviews, what consent forms will be needed, what questions you will ask and what tasks you will assign to each participant, and how you will record the interviews.

How many people to interview

The more people you interview the richer the data, but remember however long each interview takes, the analysis afterwards will take much longer. You'll have to transcribe each interview to look for themes and commonalities, so be wise about how many people to interview. My recommendation is between 5 and 10 participants for most cases.

Where to hold Interviews

It's important to understand that if there is an interviewer in the room, the participant will behave differently that if they were on their own. My recommendation is that the ideal place to perform the interview is in the location that is the natural environment for the interaction. For example, if you wanted to interview someone about using an eCommerce app, you might do it in their home, or on the bus.

If you wanted to interview a corporate client about banking software, you might do it at their office. Bringing the participant to your office is probably not a natural environment for them to be using your website/app, so may sway the results.

Consent Forms

Before starting the interview with each candidate, ask them to sign a consent form, which should detail: what information you will be gathering, how you will store this data, how long you will store it for, who will have access to the data, and how the participant can request the data. Here's a good example from Trinity College.

Questions & Tasks

You should plan to use a mix of closed and open questions, along with a marking system for the participant to score their experience. The closed questions could be demographic information, interests, behaviors, etc. These will be easy to report results on, as they can be compiled into graphs. Limit the number and scope of open ended questions, as although this is where you're more likely to find the most illuminating insights, if you open the flood gates too far, you can end up having participants talking for an hour without taking a breath!

One technique for focusing open ended feedback is the I Like, I Wish, What If method - more info here. This method formats the participant feedback in a constructive way, and gives them the opportunity to propose solutions instead of getting bogged down in stuff they hate.

Once the closed and open questions are out of the way, ask each participant to score their experience using the System Usability Scale (SUS). This is a list of 10 statements that the participant will answer on a scale between strongly agree to strongly disagree. Once you have all of the scores, they can be totalled using a formula. When all interviews have been completed, you can find the average SUS score. A SUS score above a 68 would be considered above average and anything below 68 is below average. More info on SUS here.

Recording Interviews

You could keep it simple and record just the audio using your smartphone, but I would suggest going a step further. Use this free software to record audio, webcam, and screen recording all at the same time! You can use it on both desktop PC and Smartphones. This way when reviewing recordings, you can not only hear what the participant is saying, but look at their facial expressions and see what they were doing on-screen.

The format of the interviews should be the same for all candidates. Ask them a series of questions and get them to perform a specific task on your website/app. Ask the participant to think out loud as they are performing the task, and to describe what they are doing at each step. Silence is your friend here, don't offer any hints if they get stuck. Listening and observing will likely give you some results you could not have predicted!

Analyse your User Research

Then comes the slog work... transcribe all the interviews. Read each interview a few times, highlighting keywords and phrases. Once this is done for all interviews, start to group these into themes. Full details about this process, called thematic analysis, is here.

2. Context Review

Select a small number of key competitors, or websites/apps where the user can perform similar tasks to yours. Perform walk-throughs of the tasks and make notes on issues you encountered and examples of good usability. This will give you insights into how each approached the design and interface, user flow, content, etc. Finally, you can also score each experience using the System Usability Scale (SUS).

3. Create Personas

The topic of Buyer Personas has been extensively covered online by companies like Hubspot (persona builder tool here), so there are lots of resources and templates out there to use. One thing I would say is that you should not create your personas from your gut feeling or from data/assumptions that were formed years ago. Your customers may have been gradually changing without you noticing, so pull fresh data and talk to your frontline staff to make sure you are basing your personas on current data.

Demographics, job title, interests, goals and frustrations - these are all typically found in buyer personas, but they can never be entirely accurate, as by their very nature are taking your customers and pigeon-holing them into specific personas. Therefore, within each persona are thousands of unique individuals, that do not necessarily behave in a similar manner. For this reason, it can be useful to create Empathy Maps.

Empathy maps focus more on the what is going on around your customer when interacting with your website/app, and what is going on in their heads.

• What can they hear / see?
• What are they thinking / feeling?
• What are they saying / doing?
• What are their frustrations?
• What do they want to achieve / what does success look like?

4. Scenarios & Tasks

Describe one or more stories that describe what user will experience when using your website/app. The scenario could detail where the user is located, what is going on around them, what time/day is it, what device they are using, what the user's primary goal is, etc. Don't try to create scenarios for every possible user type and situation, they should cover only the most common personas & tasks.

The purpose of the scenarios is to inform your design decisions when starting the prototype design phase. They can prove to be very valuable as you can put yourself in the user's skin when planning the layouts.

5. Identifying the problem

Write your problem statement

A problem statement should identify the core challenges that users experience that you need to overcome. It should be broad (but achievable to solve), and not focus on specifics so it doesn't stifle ideas when it comes to the design.

Design Challenge - How might we

A useful follow-on from the design statement is to pose a how might we question. Defining this question can work well during brainstorms with your internal team. The question should frame the ideal solution to your problem statement without getting into design details (that comes later). For example:

How might we create a faster, frictionless, intuitive mobile friendly policy manager? Where the customer can make a change efficiently, without prior experience of the user interface.

6. Heuristic Evaluation

This type of analysis gets into the nitty gritty of problems identified in your user interviews and context analysis, and then allows you to score each for severity to identify the priorities and propose potential solutions for each. You can use this spreadsheet template to fill in your heuristic evaluation.

The steps for examining usability heuristics for UX are to:

1. Write every possible problem with the website/app you can identify. Issues with the flow, functionality, features, specific elements, etc.
2. Categorise each problem using the following list below (info from Neilson Norman Group, but you could also use Andy Budd's method).
3. Assign how severe each problem is.
4. Include possible solutions for each.

Best practice is that multiple people who understand UX principals and have a deep understanding of the product should each perform this evaluation, then regroup to assign averages. If you are the only person in your company who understands UX, then unless you hire an external UX agency, you will have to work alone.

7. Create a Prototype

So what is a prototype? A prototype is a simple working model of a website/app that allows the user to test the interface and interactions. They often work best when little style is added - so hold off on choosing the exact colours, images and fonts. The objective should be to decide what elements should appear on each screen, and how they interact and flow.

Paper Prototype

I can't stress this enough... start with paper. As someone who has always jumped straight into a computer program to create a prototype or design brief, it took me a while to change my approach. I found pen & paper to be a more organic experience, quicker and more creative. You're less precise about the elements on each screen and instead focus on the bigger picture of how you will address the problems you prioritised in the heuristic evaluation.

You can stick with paper and use this to present your solution to real users to gather their feedback. One key benefit to sticking with paper prototypes is that users can often be far more honest if they don't like something, as they know it can easily be changed. If your prototype looks like it is near production-ready, they may hold back on feedback as they are empathetic to how much time & energy has gone into the solution, and know any critism may result in a lot of work to fix.

The drawback to paper prototypes is that user testing can be challenging, and can never truly mirror the experience of the final product. When a user clicks on a button with their finger, you'll need to hand them the next screen they will see. Depending on how advanced the website/app functionality is, this can get complicated. It is still a valid testing method, however you need to take into account these drawbacks.

Digital Prototype

There is a middleground. Once you've mapped out how each screen will flow into the next, and have a good idea what elements are needed on each page and how you want them to operate, you can move to a digital medium that mimics hand drawn sketches. I find Balsamiq quite good.

This software has the benefit of having a hand-sketched style, making the end result appear very much like a work in progress - which is beneficial when performing user evaluations. Using a digital format also has the benefit of a more realistic interaction and more streamlined user evaluation, as it does not require an assistant to manage handing over the relevant paper prototype screen during the interaction, and supports a more natural interaction when scrolling on the screen. You can even use screen recording & smartphone camera recording (using this software) instead of trying to film a screen over the user's shoulder or buying a smartphone testing rig.

8. Test your Prototype with real users & Analyse your User Research

As per your initial user testing, you should create your interview protocol - how many participants you will interview, what consent forms will be needed, what questions you will ask (including SUS questions and I Like / I Wish / What If) and what tasks you will assign to each participant, and how you will record the interviews.

Pilot the Prototype

When you have brought your prototype to a level that you are happy with, run at least one pilot. This will not only iron out the bugs from your prototype, but also in your questions, user tasks and interview recording.

Run the Prototype Interviews

The format of the interviews should be the same for all candidates. Ask them a series of questions and get them to perform a specific task on your website/app. Ask the participant to think out loud as they are performing the task, and to describe what they are doing at each step.

Analyse your User Research

Critical Incidents are where the user encountered issues, got stuck, or did not interact with the prototype that did not follow the expected flows you put in place. List all of the critical incidents that occurred during the user tasks, and how many participants experienced each incident.

As per the initial user research, transcribe your interviews, this is especially helpful for the I Like / I Wish / What If questions. Once transcribed, read each interview a few times, highlighting keywords and phrases. Record how many times specific keywords arise, and re-occuring themes. Calculate the System Usability Scale scores so that you can compare them to the initial user testing.

9. Iterate the Prototype

Use the incidents, keywords, themes and SUS score to make improvements to the prototype. Neilsen Norman Group advise that three rounds of re-testing an prototype iteration is recommended before proceeding to design phase, however this will depend on reliable access to a user testing panel. Aim for at testing at least one iteration with users before starting designs.

10. Proceed to Design Phase

Provide your designers (no matter if internal or an external agency) with the buyer personas, scenarios & tasks, problem statement & design challenge, final iteration of the prototype, and a summary of the relevant feedback on what users liked and did not like about the prototypes. These can be used as a solid foundation for the first iteration of the website/app design.

Go Forth and UX All the Things!

I hope that gives some basic foundations in what UX is all about. It's not scary, and you can go through the process with minimal/no financial outlay - it just needs your time & attention. Time is precious commodity, but think of the payoffs... a website/app that puts the user at it's core!

Why not connect with me? You never know when our paths may cross in the future.