When developing software, every day at work poses a problem: How do we reconcile our vision of the product's user experience with how users actually interact with it? We'd love to get creative and explore our wildest ideas about what the modern user experience should be, but we always have to weigh it against what the data shows. As Donald Norman said in his book Living With Complexity: "We need to design how people behave, not how we would like them to behave."
And let me tell you now: This is no easy task. Fortunately, we have a great UX team that has developed a highly effective and efficient workflow to tackle this never-ending challenge. In this post, we'll introduce a bit of our process, and more specifically, what tools we use to get the job done. We'll walk through the design journey and UX design tools from the ideation stage, through wireframing, prototyping and design, and finally reaching the development stage.
User data
Although user data is not a UX design tool, it tells us how a user interacts with a new feature, which landing page designs convert best, and whether a new menu item is seen, all of which help us determine what works and what doesn't.
Objective tools
Every UX idea we implement starts with two questions: What are our user's goals, and how can we improve their implementation? After introducing the part of our application that needs improvement or the new idea we want to implement, we start with our first tool, Google Docs.
Google Docs
Google Docs is probably fairly familiar to anyone reading this article. In a nutshell, Google Docs is Google's version of Microsoft Office with one big bonus: at its core, it's built around collaboration. Unlike a traditional Word document or PowerPoint slideshow, Google Docs and Slides are hosted online, and multiple users can edit the same document in real time, making it much easier to brainstorm and collaborate on new ideas.
We usually start with a general idea of the feature we want to implement and create a simple flowchart that develops its functionality. Google makes it easy for multiple team members to make changes in real time, and when combined with Slack and Teams features (more on that later), it's really easy to start analyzing and refining ideas as if everyone were in the same room.
Miro
After gathering basic ideas, we move on to a tool called Miro, which is basically an online whiteboard and post-it notes. While we don't spend a lot of time on it, we use it to get a quick outline of how the leads will flow and make notes on any points or questions we need to discuss. That way, when the team finally meets in person, everyone will go into the meeting with a solid idea of what the main goals are and which points still need the most work. While we typically use this before in-person meetings, there's no reason why you can't use it after the meeting as well.
Post-its
Post-its as prototyping tools? Yes, you read that right and no, it's not the name of a new productivity app. When it comes time to meet face-to-face and talk about how to implement a new feature, we find it helpful to do things the old-fashioned way: organizing our UX flow with Post-it notes.
While there are many digital tools that can help us accomplish the same thing, there's something about the tactile feel of bringing our ideas into the real world that gives us a boost. In fact, there's been some recent interest in the creativity this tactic can provide us, so it seems we're not alone on this front. Also, on a purely practical level, it's quicker and easier for team members to be in a room together, writing or drawing ideas on some Post-it notes, picking them up and moving them around, than it is for most programs.
At this point in the process, we try to outline the main user journey. Take a look at the image below to see what we mean.
After we receive a set of Post-its, we take a snapshot and import it into Google Docs where we will all comment on how our design can be improved.
Wireflow, design and prototyping tools
Adobe XD
Once we get past the initial planning and conceptualization phases, it's time to start bringing our vision to life. Our first stop on this journey is to use a prototyping tool like Adobe XD to start coming up with wireframes, screen designs and user flows.
Adobe XD is similar to other vector graphics programs like Adobe Illustrator, but we prefer Adobe XD because the entire program focuses on UI and UX design. For example: Adobe XD comes with a UI component library that includes all the most commonly used symbols such as hamburger buttons, arrows, etc. Another great advantage of Adobe XD for UI/UX design is that using the Zeplin plugin, we can export the CSS code of any designs we make in the program to speed up the development process.
Using Adobe XD, we generally start by making a large wireflow that connects all the screens we add and clearly shows how the user would navigate through the entire experience. Then we start refining each individual wireframe to come up with the elements we want to use.
When we have fully worked through an idea, we return to Adobe XD to create the final iteration of the design. With Adobe XD's focus on user interface design, it's easy to keep elements consistent using the component library.
Additionally, with the ability to easily export CSS of our designs, we find Adobe XD to be the most efficient way to begin the development process. Adobe XD allows our design team to open projects and view the CSS of every element on the page, making it much easier to move from design to technical implementation. The ability to pull code snippets from Adobe XD projects using Zeplin goes a long way to ensuring consistency between the original design and the final implementation.
Communication
Teams
Although this tool may not have a direct impact on UX construction or development, it does support our communication, which is an important part of the process. In general, we will be using Teams, a popular chat application, for quick comments and feedback. Because of the application's channel structure and real-time chat, it is easier to organize our discussions with Teams than with email.
When we need to go more in-depth with our feedback or discuss a more complex issue, we use the Teams feature to arrange a video call with team members where we can really dissect our ideas as if we were in the same room.
Jira
To help keep things organized and inform our dev team, we use Jira. Jira is quite similar to Asana or Trello: There are several different boards representing different phases of the project (e.g., "to-do", "in progress", or "done"), and users can move specific tasks through these boards to indicate task progress. Such features help all team members stay up-to-date on the current status of each piece of the UX puzzle.
Summary
While we've tried to separate the tools for the UX designer into the phases in which we use them for clarity, there is actually a lot of overlap. For example, we use Slack and Teams throughout the UX design process, and Jira can be just as useful at the beginning of the design process as it is at the end.
Hopefully this insight into our process has contributed to a better understanding of how we do things at IT-solve. Hopefully, it has given you a boost of inspiration and some new tools to help you overcome your own UX challenges.