UI/UX Design Deliverables from an eCommerce Agency

As a leading UI/UX design agency, we’re often asked by prospective clients and fellow designers similar questions:

• “What deliverables do you provide at the end of a design project?”
• “Will it be enough for our development team to execute?”
• “Will our design team be able to maintain the designs you created?”
• “How hard will it be to add new features in the future?”
• And so on
• And so forth

To address all of these questions and shed a little more light on our design process, we present you a brief description of each deliverable and its purpose.

What is a UX deliverable?

Let’s start with the basics — what is a deliverable? Simply put, a user experience (UX) deliverable is a design document that communicates ideas, research findings, and provides guidance for design and development teams. Regardless of the industry or platform, whether it’s a small startup or a worldwide enterprise, the list of deliverables for a standard UX design project is more or less the same, and mainly depends on the product requirements, budget, and timeline.

At G & Co. this list usually consists of the following documents:

Research phase

• User research takeaways
• UI/UX research document

UX design phase

• Information architecture mind map
• User flow document
• Wireframes
• Interactive prototype
• User testing report

UI design phase

• Visual design mockups
• Design system

If you don’t know what any of these terms mean, let’s take a look at each one of them in more detail:

User research takeaways

User research is a fundamental part of any project. By utilizing various methods like field studies and online surveys, we gain additional insights around the customers’ needs, emotions, behavior, and motivation. We also perform various activities like card sorting, mind mapping, collaborative wireframing, and so on. The results of these activities are consolidated in a takeaways document that includes main findings, personas, and high-level recommendations. This document helps us get key stakeholder buy-in regarding user goals and desired features.

In addition to the final takeaways document we provide all the source material which may include things like a user research plan, spreadsheets with a results matrix, audio or video recordings, notes that were taken during our exploration, etc.

UI/UX research document

Competitive research is a valuable tool that helps us pinpoint competitors’ strengths and weaknesses. Usually, we pick half a dozen of the most appealing direct competitors and evaluate their solutions for problems and issues that we identified during user research and project discovery. We also take note of the terminology they use to make sure our solution utilizes industry-standard language and naming conventions.

But it doesn’t stop there. We go further to expand our research to products that are not directly related to the project. After all, the end user experience is much more diverse and not limited to a single product. During the research phase we may look at things like navigation, on-boarding experience, most common workflows and design patterns, types of visualizations used, etc. As a result, we create a final takeaways document that contains the main findings and is used throughout the project as a handbook to guide and support our design decisions.

Information architecture

Once we complete the main research phase, we use all of the collected data to build an information architecture for the future product or revise the existing one to better fit the users’ needs and workflows. It is usually created in the form of a mind map that gives a high-level overview of the system and shows relationships between its parts. This mind map exercise proved to be very effective when performed in collaboration with decision makers. By visualizing overall project structure, it is easier to understand the scope and define feature priorities.

The mind map helps us plan design work more accurately, organize the content in an effective and sustainable way, and create a more thought-through navigation. 

User flow document

User flow is a series of user actions or system states that the user needs to go through to achieve a logical goal. We create it in a design-specification format that combines screen layout designs with a flowchart-like representation of user and system interactions broken down into simple scenarios. The main goal of this document is to provide developers with a detailed description of all possible user flows, including edge cases, errors, and various states.

It is a constantly evolving document over the course of a project’s lifespan. From the earliest iterations of quadrilaterals to wireframes and evolving versions, we add them all to this document and replace them with the final visuals once the visual design production phase has kicked off.

This process allows us to iterate on the user flows more efficiently, constantly monitor the project’s progress based on completeness of the document, and identify any frustrating or confusing points early-on.

Wireframes

Think of wireframes as a website or app’s skeletal framework. They are designed to solidify the project requirements and define main layouts, UX workflows and content. They are easy to create and maintain, allowing us to quickly iterate on ideas, capture feedback from clients and end users.

There is a never-ending debate in the design community whether one should create low-fidelity or high-fidelity wireframes. Both sides have their arguments, but here at G & Co., we prefer the latter. Based on our experience, clients and users tend to understand high-fidelity wireframes better. We don’t have to explain arbitrary design decisions at a later point and a lot of questions are resolved by themselves when the wireframe is more detailed and looks more like a finished product rather than a sketch.

However, in the beginning of the UX phase, when we just start working on overall layout and navigation, low-fidelity wireframes proved to be more efficient. We can quickly produce a set of options to discuss with the client, and once we agree on a certain solution we switch to high-fidelity wireframes which take more time to create, but are more beneficial for the project in the long run.

Interactive prototype

If a picture is worth a thousand words, an interactive prototype is worth ten thousand. Our wireframing and visual design processes involve an interactive prototype, through which we can identify any weak spots in our designs, iterate on specific elements, validate assumptions, and test hypotheses. More often than not, we use simple tools like Figma to provide a full spectrum of functionality to conduct user testing sessions, and present our work to clients for feedback. 

User testing report

In any project, we have “pit stops” to validate assumptions and design decisions through usability testing. With the help of an interactive prototype, we conduct a series of user testing sessions. As a result of this exercise we create a user testing report that contains a summary of our findings and recommendations on next steps. It also provides context to the testing by outlining overall testing goals, setup and participant demographics. 

Visual design mockups

As we finalize the wireframes and workflows for the core features, we start working on the visual side of the project. Whether we use branding guidelines (if provided), or we come up with the style from scratch, we always start with visual exploration. We create a set of visual design concepts accompanied by mood boards to illustrate our vision for the future style of the product.

Once we agree on the direction we move to the production phase—applying the styling to all required pages, and creating all necessary specifications—our development team can start working on their side of the project.

Design system

Design system is a set of design-specification documents that serve as a powerful toolkit for clients’ internal design teams or third-party agencies. Here is what comes with a design system:

Style guide

A style guide formalizes key design principles, describes visual identity, and sets ground rules for typography, colors, responsive behavior, products photos and visualizations style.

Components library

A components library is a collection of UI elements in different states. It comes in a form of a Sketch file or any other software set by project requirements.

UX Guidelines

UX guidelines document provides recommendations on navigation, describes used UX design patterns and how to apply them using components library.

All a design system does is help maintain design and experience consistency of the product, and is used as a building block to create new pages and add new functionality.

Conclusion

The process of creating these assets is not always linear and depends on the project priorities and schedule. Some parts of the documentation can be done in parallel, and some could start earlier than others. At the end of the project, we provide all final deliverables via a shared Google Drive or Dropbox folder. We also transfer to clients ownership of all created projects in Figma and other exportable means. 

After everything is delivered, we may continue our partnership by providing design or development support. It may be something like monitoring to make sure everything is implemented properly, acting as an in-house design team and providing constant design updates, or organizing workshops with clients’ teams to educate them on the new design system. If you have any more questions, please feel free to reach out and say hi. 

‍