What is design thinking?
Let’s start with the basics — what is a deliverable? Simply put, a 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 Clay this list usually consists of the following documents:
Now let’s take a look at each one of them in more detail:
User research is an integral part of any project. By utilizing various methods like individual interviews, field studies, and online surveys, we gain additional insights around the customers’ needs, emotions, behavior, and motivation. Besides interviews themselves, we also perform various activities like card sorting, mind mapping, collaborative wireframing, and so on. The results of these interviews and 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 interviews, etc.
UI/UX research( competitors research)
Competitive research is a valuable tool that helps us pinpoint competitors’ strengths and weaknesses. Usually, we pick 5-7 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.
Data and analytics
Many of the giant companies in Silicon Valley are data-driven, and while this may have a bad effect on design , but the data doesn't lie. Take a look at site/app data. Uncover traffic, conversion rate, bounce rates, popular pages and where users are coming from and clicking to.There are now many web tools that can provide you with related services, such as inspectlet .
Once the main research phase is complete, 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 bird’s eye view of the system and shows relationships between its parts. This mind map exercise proved to be very effective when performed in collaboration with stakeholders. 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. Over the years we tried a lot of online and offline tools to create mind maps, eventually ending up with MindNode as our tool of choice.
Wireframes are essentially the skeletal framework of a website or app. 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 stakeholders 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 we prefer the latter. Based on our experience, stakeholders and users tend to understand them better. We don’t have to explain that “this grey block will be replaced with copy later” 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.
Styleboards & Moodboards
Moodboards are perfect when you need to communicate the visual direction in a broader sense and styleboards however are perfect when you need to get more detailed and specific,we have wireframes now so this parse is to define the design style and it save many time . Clients get to have input early in this process and get a higher sense of collaboration and ownership on the work .
When working on a design project it is always useful to make stops along the way to validate assumptions and design decisions. One of these stops is a usability testing. With the help of an interactive prototype (created using wireframes or final visuals), 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. We also share audio and video recordings along with other supporting materials.
As we finalizing the wireframes and workflows for the core features, we start working on the visual side of the project. Whether using branding guidelines (if provided), or coming 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 so developers could start working on their side of the project.
UI key page animations
As a part of the production phase we also deliver short video clips showing the main UI interactions and animations that add delightful moments to the user experience and guide users along the way. The videos and animation specifications are then used by developers as a guide to implement these interactions into the final product.
Design system is a set of design-specification documents that serve as a powerful toolkit for clients’ internal design teams or third-party agencies.
- 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 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 document provides recommendations on navigation, describes used UX design patterns and how to apply them using components library.
Design system helps maintain design and experience consistency of the product, and is used as building blocks to create new pages and add new functionality.
When it comes to development, it’s always important to make sure that the design is implemented as intended. Often times developers willingly or unwillingly ignore small things that may not seem like a big deal, but these small discrepancies between the design and implementation have a snowball effect that may eventually drastically affect the final user experience.
In the past our team would provide a detailed, static PDF document with a description of all UI elements measurements, margins, paddings, etc. The production of this document was very time consuming and difficult to maintain due to constant design updates throughout the project. Developers would frequently complain that it was hard to quickly find needed information and in general navigate around the document.
Thanks for figma. We now have a versatile interactive tool that provides developers with a convenient way of getting what they need when they need it. Besides sizes and margins, figma provides code snippets, allows quick exporting of assets to PNG or SVG formats, has а commenting system to support communication between development and design teams, and is easy to maintain throughout the project.
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, some could start earlier than others. At the end of the project, we provide all final deliverables via shared Google Drive or Dropbox folder. We also transfer to clients ownership of all created projects in Zeplin and InVision.
After everything is delivered, we may continue our partnership by providing design support. It may be something like monitoring the development 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.