UX Workflows are great to have for anyone doing UI/UX work as it can help set standards for design as well as create an environment for true user-centered design to help solve actual problems.

Why I Made a UX Workflow

As the Lead UX Designer at my company, I’m in charge of all UX related work that’s done for the entire product line up of the company. Seeing that as a potential blocker for myself due to the sheer amount of design work I would have to oversee, instilling a UX workflow across the product teams was a big goal of mine.

Introducing a UX workflow into a company that had never even heard of UX design until 2018 proved to be very difficult as explaining the process of UX can be difficult if others don’t understand the benefits behind UX. That was one of my major pitfalls in my goal to set up a UX workflow as I tended to assume that others held the same value for UX as I myself do.

What I Learned

I had to start at the ground level and learn to communicate the reasons why we should follow a UX workflow, to begin with, and explain the differences between a wireframe and a prototype. I also had to collaborate with a freshly minted Product team and fit the new UX workflow I created into their Kanban and scrum-based project structures.

What I learned in this process is that at the end of the day, UX will always have to balance the needs of stakeholders, product teams, and most importantly users.

UX fights for the user and a UX workflow can help companies make products that users actually want to use.

Overview

My plan with this post is to help others that are in the same boat as I was, trying to create a UX workflow for a company that doesn’t have one or is brand new, and go through the steps that ended up working for my unique situation. The end goal is that you take something away from those steps and apply it to your own process.

Step 1: Strategy

As a group, define the long term goals and strategy of the project at hand. Set priority for the project as well so UX can allow the appropriate time to the project needed to meet the requirements.

This helps UX understand the product team’s road-map for the project as well as align both teams on the goals of that project to ensure collaboration and users are at the core of each project.

Step 2: Research

Research allows UX to be able to properly identify and solve the problem that a product manager is trying to solve with the ask of the project. This helps make sure that UX is truly solving the problem from the start, reducing the amount of time to launch the new project.

Research takes many forms:

• Competitive Analysis
• User Research
• User Feedback
• Technical Documentation

All of these help UX find where the true pain points are which helps align the project more with a user-focused point of view which results in better adoption and user satisfaction when the project is complete.

Step 3: Analysis

With strategy and research, UX is able to thoroughly define the “what” and “why” of the project.

The “what” are the insights from collected data found during research. The “why” confirms the assumptions made during the initial ask of the project.

Proper strategy and research make sure that both teams are aligned on the project and that as a whole we’re solving the true problems that we’ve identified.

Step 4: Definition

Given the what and why of the project, UX takes that information and creates user stories or personas to base the designs created in the next phase off of.

This creates acceptance criteria for the designs to make sure we meet the requirements for the implementation of the project as well as user testing and validation.

We’re able to streamline design with the above outlined which allows us to understand all the aspects of the project that needs to be designed out.

Step 5: Design

Given all of the above, a UX Designer now knows what is required to fully implement the ask of the project. Things like what pages are required, what the layout should be based on, what kinds of actions a user needs to make, and what users will be using the project make the design phase much more efficient.

Depending on the maturity of the project the Designer will determine whether a low-fidelity wireframe or high-fidelity mock/prototype is required for the project.

The end product of this phase is what will be used for user testing and/or development implementation.

Step 6: Validate

Throughout the entire process above we try to fit in testing and validation wherever possible. This makes sure the project is always aligned with solving the end-users problems to create an enjoyable and desirable product.

What it looks like through the different phases:

• Strategy: User feedback to ensure project ask is an actual issue
• Research: User insights into current problems and pain points
• Analysis: Framing the what and why in a manner that will properly solve the problems and pain points
• Definition: Matching user personas/stories to real users to ensure proper definition of the design work required
• Design: testing wireframes/mocks/prototypes to validate design direction

Figma is a well-known design and prototyping tool, kind of like Adobe XD, but it does some seriously awesome things.

Overview

At its core, Figma is a design tool that allows you to collaborate with other designers, stakeholders, and users in real-time. It’s fully web-based, meaning your projects go with you wherever you log into your Figma account. Not only can you design, but you can also fully prototype your designs into functional mocks.

Why should you use it?

In order to fully explain why I think others should use Figma, I think I should go over my background and experience with the product.

Throughout my career, I’ve primarily worked out of the Adobe Suite of applications. It’s widely known throughout the design industry and serves as the gold standard for design tools such as Photoshop and  Illustrator. While XD is awfully powerful, there are some things that don’t translate well to UX Designers that are working collaboratively on projects together in a team format.

One major flaw I find with XD is that while you can create your own design system and asset libraries, there’s no true way to work with other designers in real-time. If I make an update to the main design system file that my team pulls from, other designers can’t see that update until I save or let them know that it’s been updated.

While XD has a lot of functionality, it doesn’t bode well for modern design teams that work on the same project.

Ok, here’s why you really should use it.

Figma does everything I mentioned above about XD but does something XD really misses out on. Collaboration is at the soul of this application. Not only can I create design systems, but I can also share that system with other projects and have designers see those changes in real-time. You can share the design you working on, while you’re working on it, with other designers, stakeholders, or users with see-only access. Basically, it speeds up the design process an insurmountable amount.

The controls and shortcuts are second nature to fellow XD/Sketch users and allow you to do the same work you would do within XD right out of the box. It’s also free to start your own account with them so I urge you to tinker with the app if you have time. Of course, you have to pay to play if you really want to use it at an enterprise level, but some would say it’s still cheaper than XD making it pretty affordable.

One of the great things about Figma is that it is a standalone product. The Figma team is dedicated to only updating one application, unlike XD. I think this could be huge for the future of collaborative design teams.

Check it out

So if I’ve provided any sort of interest or you’re curious about the app in general, I implore you to check Figma out and let me know what you think!

As I’m getting involved with more complex design projects at my company, I researched how other UI/UX-ers are going about designing for large enterprise apps.

It’s Easy to Over Design

The more I find myself designing applications, the more I start to understand this famous quote:

It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove.
– Antoine de Saint Exupery

When presented with a new project that has multiple purposes and performs complex tasks, it’s very easy to start designing things for every instance of the task that you feel is important. What you end up with is just that, things. Things that the user will be overwhelmed with and therefore remove any sort of value your app could possibly give to them.

So how does a designer go about designing a complex application with tons of functionality in a minimal, effective yet unique way?

Research. Research. RESEARCH!

After wondering about the projects on my agile board, I was overwhelmed by the mountain of possible screens I’d have to design for. I kept thinking to myself there has to be a way to go about designing huge enterprise apps in an efficient way. Alas, I was correct. Turns out that there’s plenty of articles out there from more experienced designers discussing this very topic.

Some of the main points I pulled from the article linked above are:

• Come up with a simple, high-level user story that describes the purpose of the app.
• Break down the high-level user story into smaller task sized stories
• Eliminate user stories that don’t truly provide value to your users
• Whiteboard task flows and watch the user stories start to gel

If you want to learn more about designing for complex apps here are some helpful articles:

• Better Designs for Complex Apps – InvisionApp
• UI & UX Design for Comlex Apps – ProWebDesign
• Designing Complex Applications – StackExchange | UX
• Apply Minimalism to Complex Designs – Shockoe

UI/UX Design is built upon the visual hierarchy of how data or information is laid out and presented to a user. In order to fix even the most common design issues, your job as a UI/UX designer must first be to understand why the current design is an issue in the first place.

The Problem

Say you have a project where, over many sprints and development cycles, new features and feature requests have been added to an existing piece of software without any sort of design considerations, due to time constraints and/or lack of proper workflow. This is a common issue when dealing specifically with legacy applications.

The application, and unfortunately the user, are now overwhelmed with new data or information that looks to be a mix of different one-off ideas a developer had while taking care of a small bug or feature request.

As a UI/UX designer, you must now take all of this new information and data that’s been applied to a once fully consistent application, and seamlessly match the look and feel to make it appear as if it was designed that way from the start.

But, how do you do that?

The Workflow

Now that you’ve been presented with the issue, you’ve probably already started scribbling down some quick wireframes that pop into your head. Maybe you’ve already jumped into your favorite rapid prototyping or wireframing tool and started clicking away at possible layouts to remedy the issue.

Whatever your first step, run with it. Always trust your initial gut reaction, and see what comes out on paper. You’re a designer, so however you go about designing just remember, this is kind of what you’re good at!

Let’s say you’ve gone through a couple of iterations and ideas, yet something just isn’t sticking. You’re designing new layouts but nothing feels cohesive. There’s just an unbalanced feeling with the space available and all of the elements that need to fit in it.

This is completely normal, and almost to be expected if you haven’t considered one thing by now…

The Solution

We have a problem, maybe a couple of half-baked ideas on how to fix the problem, but how do we truly go about solving it?

Before you can fix something, you normally need some instructions on how and when things are supposed to be put together. This is the missing secret ingredient.

In order to start truly solving the UI/UX problem, you need to figure out the most important pieces of information the user is in need of—given what that page or layout is presenting. We can then make a list of key data points, ranked from highest to lowest importance, which allows us to build a layout for the information to be dealt with appropriately.

Find your problem. Start your workflow. Rank key data points.

BOOM! Problem solved.