My UX Process

“Design is only obvious in retrospect”
– Luke Wroblewski

The process of designing may be even more important than the finished application. How does a design team know that the finished design will meet user needs AND provide a delightful experience while using it? From the outset, designers don’t. But as we follow a trusted process, we discover who our audience is and how we can deliver for them.

Here are careful steps in my design process. I don’t use all of them for every project, and I also use them recursively (over and over), especially prototyping, user testing, and analytics, which are rarely steps with firm beginnings and ends.

Requirements Gathering

Top-level requirements handed down by stakeholders as general problems they need the application to solve.

Interview managers, field users to determine their needs/opinions on application. Interviews can take place as a group or individually and can be conducted via survey or as a group discussion. 

Consult Analytics – If the project is a revamp of a current initiative, key analytics attempt to answer the following questions:

  • Consumption: what do users consume the most (most downloaded files, most visited pages, pages with most and least time spent)? 
  • Buried treasure: what do users search for the most that is not readily available? Consulting search logs and looking at synonyms, taxonomy, and other characteristics of the application’s recorded search experience.

Analytics

Wait, why are analytics the second step? 

While we can’t get analytics from our finished project until after it’s completed, we should be able to gain insights into what our users have been doing with previous digital properties. How did they use the previous website? What were responses to previous email campaigns? Gather the data from current/previous channels to help inform your current project.

We also need to plan for analytics to be gathered after launch, and build those data points into the current project. What metrics are we trying to gather? What analytics suite will we use to gather them, and how will we implement the tracking from a front-end development perspective?  What are possible metrics that our current system cannot gather?

Identify Metrics to determine their needs/opinions on application. Interviews can take place as a group or individually and can be conducted via survey or as a group discussion.

Plan for Implementation – Make sure that your back-end developers are aware of your analytics goals. Discuss analytics so that back-end development takes them into consideration during this phase of the project. You want to be able to receive reliable analytics that speak to your metrics. Hopefully flexible enough to gather changing metrics in the future.

Wireframing

How can we start to translate user needs into a 2D, interactive layout?

Wireframing is one of the best ways to begin to create a design’s layout, and my first instinct is always pen and paper. It’s great for getting my creative juices flowing as well as work out subliminally how hierarchical content fits together. But, paper sketches are hard to share and even less persuasive to cross-functional colleagues and stakeholders.

Adobe XD and Photoshop are the applications that I use to turn my sketches into more compelling wireframes. XD has the added benefit of turning that wireframe into a shareable, usable prototype for testing.

Mockups

Mockups should be hi-fidelity and show the “look.”

The skinny counterpart to a mockup is the wireframe. Wireframes organize content, establish hierarchy, and inform site flow, but are low-fidelity and basic. How do we know how different branding elements will come together to achieve an emotional effect? We need to consider color, typography, photographs, animations, and other traditional design elements.  These are the ingredients that create our desired emotion in the user. A happy user is far more likely to engage with your application, and the “look” of your interface can go a long way to creating that emotion.

My mockups are almost always originated in Photoshop as static images. These are great for showing clients and stakeholders how the branding achieves an instant affect on mood and engagement.

Prototyping

Design → Prototype → Share → Get feedback → Repeat
Prototyping is an extremely recursive step, because it relies on feedback to get better. For prototyping, I use Adobe XD.  XD is a quick, basic prototyping tool for checking the flow of a website or mobile app, one that you can share with team members and testers.

An app like InVision takes it to another level, by presenting hi-fidelity mockups and allowing other users to make notes directly on the prototype.

User Testing

How do you test your wireframes and prototypes with users?

User testing is another step that is used recursively throughout the process, so don’t let it’s order behind Prototyping fool you. It can start at the wireframe stage, and is instrumental in refining mockups, protoypes, and completed sites as well.

User testing is both an art and a science, and there are several methods and tools available. The key to user testing is to get users that fit your customer profile and persona. Once I find my users, I can then send them a link to the prototype, where they can take notes on their experiences.

Alternatively, apps like Usability Hub allow you to send detailed steps to your users through direct links. If you cannot identify test users by name, Usability Hub can also put your prototypes and wireframes in front of more random people for feedback. I take this type of feedback with a grain of salt, but it can be useful.

Post-Launch Review

The design process should not stop after launch. My post-launch routine has me sitting down with the team and evaluating our process.

What worked well? What stunk? Where did we succeed and where did we fail? If we are not honest about our shortfalls, we can’t hope to avoid them in the future. This is recorded and shared with cross-functional teams and stakeholders to give a sense for how it can shape future projects and client engagements.