A common question you might get asked in interviews is ‘what is your process?’ I think this is a good question to think about and one that helps wrap your head around how to approach projects from a UX perspective.

Everyone’s process will slightly differ, but, overall, it’ll look something like this:

1. Strategy

• What do you want your site to accomplish?

• What are the requirements?

• What are the technical constraints you are working within?

2. Understand & empathize (learn about your audience)

• User research

• User personas

• Journey maps

• Information architecture

• How do users label & organize content? (Avoid internal jargon in favor of user-centric labels, copy, etc.)

• Review existing data to note common themes

• Qualitative: Feedback Karen left on the site (“I can’t get my photos to upload - please fix this!”)

• Quantitative data: Insights from web analytics (e.g. Adobe is showing significant dropoff on your product detail page, thus preventing users from getting to the shopping cart)

• User interviews

• Usability testing (watch how users currently interact with the site and make observations - these can be moderated or unmoderated)

• Heuristic analysis (assess the usability of the existing site. Ask yourself: which of the 10 usability heuristics does it violate?)

• Comparative analysis (how do other comparable sites/competitors solve similar challenges?)

3. Ideate & design

In this stage, you’ll start brainstorming. You might start scribbling out rough design ideas on paper, you might slap a bunch of Post-it notes on a wall to organize your thoughts, you might start designing rough user flows...

Once you have some rough ideas defined, you’ll likely bounce those ideas off of stakeholders to get their feedback, buy-in, approval, etc. Once you have that approval, you can feel confident that you can proceed to the next step, which is wireframing/prototyping.

4. Wireframe/prototype

In this stage, you might start using Sketch or Figma. Don’t spread yourself thin trying to learn a bunch of different prototyping tools - just commit to learning Sketch or Figma and you’ll be good in almost all cases (another popular software is Axure). Also, remember that it’s just a tool - the ideas are what’s most important. Anyone can learn a tool pretty well in a week or two so don’t get too hung up on it.

What you’ll focus on first is creating low-fidelity wireframes. These will be rough, greyscale prototypes that you can then show to stakeholders while you walk through them, providing your rationale for the decisions that you made. You will explain to the stakeholders how/why your decisions are rooted in best practices (referring to the 10 usability heuristics, for example) and explaining how they align with the overall UX strategy.

Assuming that the stakeholders like the direction, you will then move on to creating high-fidelity wireframes. I’m calling out “low” & “high” fidelity because these descriptors really do come up a lot. There is a big difference between a wireframe that conveys a general idea (low fidelity) versus a polished wireframe (high fidelity).

When you create high fidelity wireframes, this is where basic HTML knowledge is nice to have. Here you can inspect elements, ensure the padding is pixel-perfect, use the exact brand colors, etc. I would highly recommend using Sketch Measure, which is a Sketch plugin that creates specs for developers -- it makes their jobs a lot easier and you will endear yourselves to them using this.

5. Test & iterate

Once you have a fancy high-fidelity prototype created, it’s a great idea to test it out with real users! Here is when you will recruit a small group to see how the new prototype performs. This is usability testing and it can be moderated (meaning that you are in the room/on a call guiding them through it) or unmoderated (meaning that you just watch and listen to them use it). UserZoom and UserTesting.com are popular software for these tasks.

Once you’ve completed this testing, update your prototype accordingly! You will undoubtedly find areas of improvement and things to tweak based on what you learned from the testing.

6. Launch & evaluate, define success

Now it’s time to launch the site into the world. It’s important to track what the definition of success is for your stakeholders. In other words, track your key performance indicators (KPIs). For example, a KPI might be “clicking the button”. In a case like this, you’ll want to note that before you began your work, 27.8% of users, for example, clicked the button. Being able to say that after 3 months that the number of users who clicked the button has increased to 37% will be a huge win and is basically the purpose of all of this work.

There are all sorts of different KPIs, needless to say. It depends on the project’s unique goals.