Writing a Design Overview
Terminology
Being UX and Product design a relatively new field, there are discussions and discrepancies regarding naming of the processes and terminologies. That’s why we are listing here the most important concepts to be taken into account and how we apply them within BEAT81 Product Design team.
Interaction Design (IxD)
“Interaction Design is the creation of a dialogue between a person and a product, system, or service. This dialogue is both physical and emotional in nature and is manifested in the interplay between form, function, and technology as experienced over time.”
John Kolko, Author of Thoughts on Interaction Design (2011)
Information Architecture (IA)
“Information architecture is all about organization of information in a clear and logical way. Such organization follows a clear purpose — helping users navigate complex sets of information.”
Nick Babich, on Adobe Blog
User Interface Design (UI)
“User Interface Design is the discipline of designing software interfaces for devices, ideally with a focus on maximising efficiency, responsiveness and aesthetics to foster a good user experience.”
These are the 3 most important dimensions for all of our decisions within BEAT81 Product Design, and we could summarise them the following way:
Interaction Design: WHAT is the user doing and WHEN would this happen.
Information Architecture: WHERE is this process happening, or where is an element placed.
User Interface: HOW does it look like.
We should always provide with a WHY behind all these decisions, aligned with Product and Business.
Templates
We are currently using 2 different templates in order to facilitate the Documentation process:
Design - Feature template
Design - Research template
These can be easily applied by selecting them when starting to create an article, after clicking on the button Create, located in Confluence’s top navigation.
Writing a Design-Feature article
The following are the essential elements that a Design-Feature article should contain.
Top information
Designer: Tagging the responsible designer or designers of the project
Product owner: Tagging the Product owner or owners of the project
Status: Giving an update regarding the status from design side.
Backlog: the project didn’t start yet to be tackled by design.
In progress: the project is ideated, executed or tested at the moment.
Blocked: the project is no longer being tackled. In this case, the status should contain a reason behind.
Delivered: the project is finished by design.
Clubhouse: We include a link to its Milestone, Epic or Story within Clubhouse.
Prototype: We include a link to the Designs in Figma.
Product Feature Page: We include a link to the Feature documentation from Product side.
Screens
Description: Overall and brief description of the project.
Screens: Each screen should be wrapped as a section, containing the following elements.
Title: Brief, clear and descriptive. The number should be consistent with the order of the designs within the Figma boards.
Goals: Define the ultimate purpose of these screens.
Hypotheses: Define the intentions behind the overall decisions taken for these screens.
Screen elements: Each important or new element included in each screen, should be described in the following categories:
Interaction Design (IxD): We explain the decisions behind overall interactive behaviours (transitioning between screens, activating/deactivating elements, etc.) and how it relates to the customer and business goals for the given screen or project.
Information Architecture (IA): We support the design solutions with descriptive reasoning regarding visual hierarchy, positioning and structure.
User Interface (UI): We describe the process of choosing specific visual solutions in terms of style: colour, contrast, stroke, border radius, etc.
Writing a Design-Research article
The following are the essential elements that a Design-Research article should contain. Although, some of this information can vary depending on the nature of the research, as we can have different type of approaches for Interviews, User Testing, Guerrilla Testing, Surveys, etc.
Top information
Designer: Tagging the responsible designer or designers of the project.
Moderators: Tagging the person responsible of moderating - in case of User Testing or Interview format.
Support: Tagging any other stakeholder who helped during the process.
Prototype: We include a link to the Designs in Figma.
Research files: Links to those files related to the research process such as spreadsheets, questionnaires, video or audio recordings, etc.
Project tested at the same time: in case it was a research involving multiple projects or screens, we include a link to their Design-Feature pages.
Date: Date or approx date when the research was performed.
Project definition
Goals: description of the outcomes to be achieved after the execution of the research.
Method: the specific details of the execution and performance of this research.
Others: any other extra information to be taken into account.
Findings: main outcomes obtained after the execution of the research.
UX recommendations and next steps: these are the advices that Design propose to Business and Product to take into account prior to the next Design integration.
Interaction Design (IxD): changes and improvements to be performed regarding the user interaction with the feature.
Information Architecture (IA): changes and improvements to be performed regarding hierarchy decisions.
User Interface (UI): changes and improvements to be performed regarding style decisions.
Last updated
