3 Steps
Empathize. Conceptualize. Visualize.
Empathize (Research)
If you are familiar with the design thinking process then you will recognize this as the first step. Don't worry, I'm not going to copy the 5 steps of design thinking and paste them here as my process, I'd rather simplify it.
You must understand the client's users and problems in order to fix them — this takes research. I use qualitative and quantitative methodologies to bring the user's needs to light.
Discovery Survey
This survey is sent to the stakeholders of the project and is usually my first step. This survey consists of usually no more than 20 questions. Questions range from "What is the audience you are trying to reach" to questions like "What are 5 goals that reflect your vision for your new website."
I think it's important to understand your client before you attempt to understand their users...duh!
Web Analytics Study
Through data mining, you can obtain visibility into user-behavioral patterns. This helps to make data-driven decisions in the Conceptualize step (wireframing). Most of my experience is in re-designing government webpages where citizens go to complete tasks continually and repetitiously. This method is crucial.
I use Google Analytics to perform this study. I usually analyze up to a year's worth of data so I don't get skewed data from spiked user activity, like on U.S. holidays for example. I have used both Universal Google Analytics and GA4 (Google Analytics 4).
Community Survey
This is a questionnaire that gets distributed to the public to gauge their expectations, opinions, and of course demographics. It's a straightforward and simple technique to get qualitative data. As I mentioned above, most of my experience is with government websites, like cities, counties, police departments, etc. Being able to hear from many different residents has been crucial. Ofcourse this method can be applied to many different verticals.
Usually about 10 questions, ranging from "how often do you visit the website" to "how do you feel about the organization of information?"
Heatmaps Study
It's important to see how users interact with your webpage. This study shows what elements are performing well vs not so well by showing a graphical representation of mouse activity. I usually examine the clicks, hovers, and page scroll lengths of the client's users for both desktop and mobile. This quantitative study pairs well with the web analytics study.
Remote User Testing
This qualitative technique can uncover a variety of usability concerns. This is an open-ended natural approach that provides qualitative data ranging from information architecture efficiency to comments on content or even design.
I usually contract out 5 users and provide them with 5 tasks each. I build the tasks simply with one sentence to set up the scenario and a single objective. Having multiple objectives in a single task can lead to confusing the user or you, the person gauging if they have successfully completed the task or not. Here is a very simple example "You feel like it's time to make an addition to your home and would like to build a back deck. Find the online paperwork for a building permit.
My process would include noting the user's journey as they complete the task, timing how long it took, and analyzing if they experience any glaring usability issues.
UX Workshop
After completing each of these studies and emailing the findings to the client it's time for the UX workshop. During the workshop, I would go over my research findings with the client's team and answer any of their questions about them. The main deliverable of this workshop is the wireframe — leading us to the next step.
Conceptualize (Wireframe)
During the UX workshop, I would present the client with 3 wireframe options based on the data pulled from the user research. These wireframes are concepts on how to answer the user's needs and problems. After explaining the functionality of each section in each wireframe the client would then have an opportunity to mix and match their favorite sections into a single custom wireframe. This tends to be the most engaging part of the session.
After the UX workshop, I would send a notated version of the wireframe detailing functionality and limits. This gives the client an opportunity to ask questions or request revisions before they sign-off on the wireframe.
Visualize (Design)
After the client signs off on the wireframe it's time to get started on the design. Prior to creating an initial design, I would conduct a design workshop to get the client's design goals and aesthetic preferences. This is gone over in more detail in my case studies.
The idea is to take the wireframe and transform it into something beautiful, user-friendly, and accessible. I am very experienced in WCAG (Web Content Accessibility Guidelines) Contrast Ratios & AA compliance.
If you are interested in viewing my creative process check out one of my case studies.
