It’s time to roll up your sleeves and get your hands a little dirty (I’m assuming for most of us, that means figuratively). Now’s the time to start producing visuals that reflect the information gathered from the User Story phase, thanks to our Subject Matter Experts. A creative brief has been hosted and it's time to get started. This comprises the meat and potatoes of the User Experience design process.

Since UX Design is user-focused, these early designs should display a culmination of data analysis, test results and evidence-based decisions on how humans interact with websites and applications.

All previously gathered bits of information will give us the raw materials needed to start designing.

But don’t get too excited, because these visuals should be stripped of all style, pazazz and punch. They should be dull, but clear and concise, providing more detailed information and not invoking emotion. There should be no inkling of company branding, whether it’s a new build or a refresh with existing assets. In fact, there should be nothing to potentially invoke the visceral and distract stakeholders from the task at hand: thinking about Information Architecture. This is the earliest rendition of the product’s scaffolding, and everyone should be on the lookout for inconsistencies and potential drawbacks in the framework.

What’s more, these visuals should be whipped up fairly quickly and should be reiterated on after multiple peer reviews. Whether using a white board and freehand scribbles in real-time, or posting digital artboards onto platforms like Invision or Anima, turnover should set out quickly. Only after approvals have been made should the fidelity be touched up and naming conventions updated in order to keep track of your progress.

Here are some examples of early project visuals and activities, AKA the standard tools for a UX Designer:

• Card Sorting
• Site Maps
• User Flows
• Wireframes



Card Sorting

This activity is most effective when fleshed out in person. The first step is to identify key concepts or themes that have prevailed from our User Stories and basic conversations. These are then written out on Post-it notes or small pieces of paper (cards). Next, these cards get arranged according to how the group or individual sees its relationship to other cards. Eventually, a structure will start to emerge. Card sorting is particularly useful to develop category trees that can aid in the Information Architecture of navigations and menus for websites.

Site Maps

Depicting the basic hierarchy of pages within a given domain, site maps are often generated for website applications in order to identify scope and environments. For all intents and purposes they provide the overarching navigation for the project in one expanded view, and can be created by linking identified pages (or cards) with arrows. Here we establish the interconnectedness of an application and the boundaries of a user’s experience.

User Flows & Wireframes

User flows are diagrams that illustrate how a user interacts with an application. Often bound with a start and finish, they choreograph the movement and actions of task-based situations, giving developers valuable information as to what needs to be implemented to make each situation happen. User flows are able to identify and chart out even the most complex scenarios for all types of users, whether as an ecommerce customer in a checkout process, an administrator navigating a backend, or anything in between. These flows primarily identify:

• Pages
• User Decisions or Actions
• System Decisions or Actions
• Modals
• Errors based on invalid credentials
• Success Confirmations based on valid credentials

A wireframe is a pivotal element of UX design in that it’s the first look at an application as it will appear on a screen, not as a conceptual diagram. Designers must take special care, however, not to add too much style to these wireframes, no matter how tempting it may be. They should be greyscale. The goal is to document everything that needs to be in one view, throughout all corners of the application, which have been informed by the other UX tools previously mentioned.

As we can see, there are several ways visuals can thoroughly hash-out UX Design. They should be as inclusive to all demographics as possible. These are clarity tools that cut noise and give only signal, meant to align stakeholders to give necessary feedback. In turn, this will only allow for good communication and vital information for future phases of the project.