/Insights/Your Complete Guide To UX Deliverables

YourCompleteGuideToUXDeliverables

Oct 29, 2017

The hands of two ux designers testing wireframes

Codal’s design process does more than craft a complete, polished product.

It generates secondary artifacts too, remnants of the process that not only act as invaluable references for our designers, but can also be repurposed by our clients, providing insight into their user base, the architecture of their platform, and more.

This two-for-one utility is why we offer all of them as deliverables, so that our clients can track our progress and receive some business analysis as a bonus. But these deliverables can sometimes be confusing, especially when so many of them are wrapped in UX jargon.

To help, Codal has compiled a definitive guide of all of the user experience deliverables that arise from our Agile design process—this is what they are, how they’re made, what they look like, and best of all, how you can leverage them just as much as our designers do.

WIREFRAME

Arguably the most important deliverable in the entire UX design process, wireframes are the industry-standard prototypes created for user testing and validation. Acting as a visual guideline for designers, wireframes sketch out the framework of your website or mobile app.

They’re an indispensable tool to Codal’s UXers, who create several wireframes throughout the course of a project, typically with comprehensive design software like Sketch or Axure.

A wireframe for one of Codal’s favorite projects, Moody Tongue

Early wireframes are usually no more than an organized layout of rectangles, devoid of color, logos, or clickability. But as the design cycle churns, we architect wireframes of higher and higher fidelity to the final product, iteratively user testing and adjusting the frame accordingly.

By the end, test subjects are interacting with wireframes about the same way they would the actual platform, clicking through the website or app to find the information they’re looking for.

USER PERSONA

Anyone familiar with marketing already knows the concept of user personas. These are the fictional, generalized representations of your target demographics that embody the various behaviors and attitudes of your user base.

Personas look a bit like online dating profiles, with typical ones not only including basic census statistics like age, gender, and income, but also a persona’s likes, dislikes, goals, or needs.

Again, your business probably already targets clearly defined personas with carefully tailored marketing campaigns, but the user personas created by UX designers differ slightly.

A user persona created by Codal

They’re created in a different context than marketing, and therein lies their value: UX personas often give businesses a new dimension of their customers, examining them from a digital perspective. It’s not uncommon for businesses to gain a new insight to their clients from Codal’s user personas.

USER FLOW / USER JOURNEY

The deliverables that we get the most questions on when working for clients, user flows and user journeys are similar artifacts that serve similar purposes, but at different levels of detail.

User journeys, sometimes called ‘journey maps’, document a high-level path that a user may take when using the platform. They’re brief flowcharts with titles like “Purchasing A Product” or “Applying For A Job” or “Signing Up For A Newsletter”.

A “Join Team” user journey for one of Codal’s projects

In contrast, user flows offer much more granularity. This documentation provides a detailed description provides the actions a user takes to complete their journey. A user flow could read something like: “A user taps the ‘Sign Up’ button, and is taken to a tutorial screen, where they can swipe down to login with Facebook”.

STYLE KIT

Also referred to as a ‘UI style kit’, or just ‘UI kit’, this deliverable is a collection of all of the aesthetic components that make up a user interface. They typically include the design files that represent color palettes, iconography, logo design, and more.

An excerpt from one of Codal’s UI kits

While style kits typically only include graphic elements present in a website or app, we have created style kits that are closer to full-scale branding kits, which essentially contains all of a company’s visual components.

SITEMAP

Sitemaps are one of the most essential tools for Codal’s UX design team. An organizational device, sitemaps graphically represent the entire architecture of a platform. Usually laid out in a hierarchal fashion, sitemaps enable designers (and clients) to visualize an entire website at once, and how users will traverse it.

An early sitemap

You wouldn’t construct a building without a blueprint, you wouldn’t write a term paper without an outline, and you don’t create a digital platform without a sitemap. It’s that simple.

USER STORY

Though often confused with user journeys, a user story’s discrepancy lies in its audience: a user journey or flow are references strictly for the designer, whereas user stories are written with the software engineer in mind as well.

Simply put, user stories detail everything a user might want to complete on a platform. Sometimes authored by a technical writer, they are not only written so that UX designers can account for all of the user’s possible expectations, but also so that the developer can translate stories into executable code.

An excerpt from the Table of Contents of Codal’s user stories

User stories tend to be categorized into “epics”, such as “Onboarding” or “Checkout”. Examples of user stories might include: “A user wants to reset their password” or “a user wants to sort the products by color or size”.

YOUR UX TOOLBOX

All of our designers possess a UX toolbox, a set of techniques, principles, or mechanisms they can rely on when crafting a digital solution. Just like a handyman’s toolbox, some of a UXers tools are used on every project, whereas others are highly specialized, and only wielded for a rare project requirement.

But when clients hire Codal, they discover at the project’s end that they have a UX toolbox of their own, composed of our deliverables. Marketers refer to our sitemaps for content inventories and curation. Graphics teams look to UI style kits for inspiration.

If you want to learn more about our UX deliverables, or our UX design process , reach out to Codal today.