UI/UX deliverables in medium size agencies

Base on my experiences and research regarding creative houses and how the UI/UX team includes or not product desiners I learned communication is the key to keep the project works well plus saving time and money.

I’ve created a kind of checklist that contains the most common deliverables for designers to create something amazing.  I’ve combined the deliverables according to UX activities.

Are you pitching or doing?

I have divided deliverables into two sections of each project, for sure the very first will be all needs to be part of a successful pitch as well as when designers are done with prototypes and they are about to share it with developers.

1.1 Brief

A clear brief is the main document that designers create at the research stage. It includes all the needed information to starts crafting the UX  and UI for the product. This could include simple documents as below:

  • Product name

    Project or product name is a must to have, this will help to well organise your documents.

  • Purpose of usage

    What purpose a client wants to achieve with the help of this product

  • Modernization

    What tasks should be done to reach product’s purposes

  • Project manager

    If the client is going to monetise and/or sell this product, if yes-how?

  • Key functions

    What functions product should be able to perform

  • Business need & competitors

    What purpose a client wants to achieve with the help of this product and how other competitors in market do.

  • Target Audience

    Who are client's targets? what is their personas and how is possible to help/lead them to achieve their goals.

  • Limitations

    Time, development, etc could limit your activities, something design and other departments should be aware of as well as client.

  • Technical requirements

    What is Platforms(CMS) to use, Is it well supported os all versions, /browsers for different screen sizes?

This document could be in any format like just a black document to use Microsoft Word/Google Doc, or well structured in Microsoft Excel/Google sheets, but creativities always could be interesting to present dry documents.

1.2 User persona

User Personas help the designers to understand the target audience (real users of product) to create a product for their needs.

By personas, the team can prioritize specific pains, opportunities, users behaviours and their motivations of usages the product. They serve to check whether the software product corresponds to its stated goals.

UI/UX Designer could ask the project manager’s help to finalise personas if it is not provided by the client.

User persona
  • Demographical data
  • Age and gender
  • Occupation
  • Foal and tasks
  • Motivation
  • Fears
  • Expectations
Environment

The context of usage: where and when the user interacts with a software.

 

 

 

Tasks

Tasks to be done by the user with the help of your product.

 

 

 

1.3 Screen section scheme/sitemap

Screen section schemes show the main product sections and the screens within each one. For example, if the software has a “Login” section, it may contain the following screens: Registration,  Login with Facebook. Login with Google Account, Forgotten password … and more

This could be in sitemap/chart figure to make it easy to understand for all designers, stakeholders, and developers.

1.4 UI/UX audit test (usability) report

Usability testing is a way to see how easy a product is to use by testing it with real users. A usability Audit test report summarizes usability findings in a clear if clients has a product and want to revamp or improve their current product., concise and descriptive way, helping the project team to identify issues and work towards a solution.

To audit any product UX team/designer should come up with a checklist to measure product’s look & feel, Usability and Functionality.

1.5 Competitor Study

Does the design team work on UX strategies? if yes don’t miss out on checking other competitors in the market. An analysis of competitors will map out their existing features in a comparable way.

This report helps designers to understand the market’s standard and recognize opportunities to innovate in a given area. This could share with clients to understand the product’s design and functionality directions.

2. In-project deliverables

Right after you got a green light from the client/project manager to start a project, it’s time for UI/UX team to shine and prove that all pitching time ideas were the best practical directions for the product.

2.1 Wireframes

The design team has personas, sitemap, and competitor study’s report. All these are good enough to start to create and present visuals to the client.

Wireframing is the main stage of product design and an important one for visualizing what potential deliverables will look like. But what is the role of a UX designer? A designer plays a significant role in all steps as a designer should do the following work:

1- Put requirements together

2- Create the structure of the future product/application

3- Define the future appearance and set of interface elements.

Understanding the product’s structure helps designers to define the necessity of additional research and choose optimal technological solutions for further development.

2.2 User Behaviour Diagram (wireframe flow)

Depending on the tasks, UI/UX designers can create user diagrams and/or wireframe flow. Wireframe flow, which is most commonly used in the team, is based on the sections and screens inside the system. This wireframes flow is dependent on the requirements of the project manager/client.

2.3 Visualisations / Mock-Ups

In this stage designers work on visualisations and branding of the product’s interface elements. this is to put colors, images and final layout for product.

In this stage design team might get more feedbacks from client to re-touch o even re-work on some part of it. The best way to buy a smile on client face is to give 2 o 3 different conceptual UI designs to client.

But we can’t just pass the ball to designers, team needs some requirements as below:

  • Brand Guidelines (Logo, Color Palette, Fonts)
  • Copy (UI/UX team allows to use dummy content if they are not working on wordings.)
  • Imaginary (What type of images or preferences from project manager/client is there.)
 
Rushing to design interface will make serious problems, its better to keep some pre-design activities to gather and hear more ideas from team, don’t forget this stage is time to judge and get benefits from.
 
One designer in a team can lead to create a digital board to have a neat Mood board to put all ideas in it, then team could list down all inspirations.
Having a brainstorming  session will be the last but not least team activity before designers start to design mockups.

2.4 Assets

When the UI/UX Team got confirmation from the project manager or client on mockups it’s Slicing time to export Assets (Visuals) from the Adobe Xd working file.

Visuals

Best Format

Alternative Format

Size

Logo

.svg

.png

1x & 2X

Icons

.svg

.png

1X (2X png)

Images

.jpg & .png

.gif

1x & 2X

Animations

.json

.gif

1X

Video

.mp4

.gif

1x

Guidelines

.pdf

.jpg

1x

2.5 Tests

The second Audit test will happen after development team code that it can quickly and cheaply show how a code follows provided mock-ups, which saves time and valuable resources.

A/B testing is another possible activity that  allows you to evaluate two variants of a webpage, for example, and find out which of them is more effective.

Almost any content and settings can be tested:

  • web pages and their elements
  • ads
  • management strategies and approaches
  • emails and mailing list items
  • and cetera

UI/UX Team will plan for A/B testing if it’s necessary. Development team will be responsible for developing and coding A and B options.

Conclusion

We are aware of agency life and how designers experience too much pressure sometimes that could hurt everybody in business, but having a clear communication with other departments as well as clients this won’t be a problem.

For sure having a good plan is a real boost for design team, but we can’t leave designers alone in the scope, by having clear check list of all activities or deliverables, we will turn lights in the darkest room for UI/UX designers.

This check list should includes all stages of the projects from pitching clients to publishing the product.