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:
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.)
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 | .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.