When creating web products, mockups include the whole range of viewports from 320p up to 1920p. A default viewport size is selected (e.g., 1280), and for that size, mockups cover all screens and screen states. For the rest of the viewports (e.g., 320p, 768p, 1024p, 1920p), the crucial screens are available, leaving no room for doubts on how a screen UI layout behaves.
View Mockups for 1280p
View responsive Mockups
Every element of a product needs defined reasons to exist. One way to communicate that with other stakeholders is by using prototypes and the commenting feature of the design software. That way, the design decisions can be briefly explained. Consequently, the conversations with stakeholders are more on the point.
View an Example of a Prototype with Comments
Using mind maps helps document every aspect of the design process, whether it's working on a feature or a new product. Apart from the project requirement, technical limitations, and business goals, the mind map includes other aspects. For example, behavior change design elements, motivations of people using the feature or product, the environment, experienced emotions, and a description of the design process itself.
Mind maps are also useful when working on multiple tasks since a quick review helps to get back into the zone.
The main focus of a competition audit depends on the project and its' goals. We created a competition audit for the Lettermin website project with four designers (potential buyers of fonts). Observing and getting qualitative feedback while they were using competing websites has been one source of primary research.
We also documented the content usually found on these type foundries and the font edit options they offer to potential customers.
View a Competition and Content Audit
Experience maps are one of the foundations of research. It forces the design team and involved stakeholders to push their assumptions on their customers or users. For the Felicity Autogenic Training app, we used the tool to understand the core target market better.
The tool is invaluable. It presents the context, behavior, and emotional state of the person. Done correctly, it also reveals some of the opportunities for product design.
View an Example of an Experience Map
The Kano Model is a tool that helps to categorize the features that need to be included in a product based on feedback from people. The feedback is grouped into five categories, from features people don't desire to those that delight them.
It helps to prioritize feature development and is one way of highlighting the features where it's worth increasing effort and time. The Kano model is based on user feedback and provides a snapshot of how people feel at a particular moment. You can see a stripped version of the Kano model for an iOS app called Audiosume.
View a Kano Model Example
Personas provide a multi-dimensional overview of the person relevant to the product. It's a tool created by primary and secondary research and allows the design team and stakeholders to have a more precise direction when discussing potential features and design solutions.
View an Example of a Persona
With different stakeholder groups in a larger organization and a larger design team, getting a clear sense of direction when creating a new product or a redesign is crucial.
Product filters are established to help with product and design decisions. To validate a decision, it has to go through the filters to comply with the high-level direction of the product design & development.
Below you can review some of the product filters used on a redesign project at Welltok Inc.
View an Example of Product Filters
The user flow indicates the steps a person needs to make to achieve a specific goal. The number of each step in the flow matches the number for the corresponding wireframe or mockup screen. Below the number, a description highlights what the person sees and does.
view a user flow example
For every project, product or feature, I create Murphy's list of things that could go wrong. It's a step that involves all stakeholders involved in the product, including business departments.
The result is a list of things that could potentially go wrong and, at the same time, are realistic enough for the team to consider either a) taking steps to prevent it or b) setting up the quantitative and qualitative tools to measure if these scenarios occur.
View an Example of a Murphy’s List
A measurement framework combines the use of qualitative and quantitative tools to get information on usability, usefulness, and satisfaction. Secondly is to evaluate the success of a feature from the business perspective. Does it contribute to the KPIs of the company, and if so, in what way? That evaluation helps decide how much resources a company should put into further developing a feature.
A UI library is suitable when working with startups or projects that don't involve a high number of people. It's a source document with all UI components, colors, text styles, icons, margins, animations, sounds, and anything else needed.
View a UI Library Example
Working remotely requires care when it comes to communication between team members. For that reason, the UX document. It's a tool that's primarily focused on the communication between designers and developers. In addition to specifications, mockups, flows, and other suitable design deliverables, the UX document provides context information on all screens, features, and other essential aspects. It's also a source of documenting any feature and requirement changes during the project.
View UX Document Example
Providing feedback to developers when reviewing the current state of the digital product requires using various communication channels. To make the process faster and helpful for the developers, I use a product feedback report. It consists of taking videos and screenshots from the digital product, applying the correct numbering, and highlighting the issue in a spreadsheet (or tools like Git, Trello, or Jira).
That spreadsheet is then used for status updates. It also allows clients and other team members to quickly gauge the progress by scrolling down the spreadsheet and noticing if the green column flow is disturbed by a red-colored cell that indicates work is still in progress.
View Product Feedback Report
The primary role of the content map is to visualize the content on each screen of the product. The relevant stakeholders have an overview of what content the design and development team already has and what's still missing. When using a tool like Adobe XD, the content map is updated as the required content is delivered.