HeroDOT 101 is a series of blog posts in which we explain certain key terms that get thrown around in our everyday work.
Remember your school days, when the teacher asked a question and you were 90 percent sure you know the answer, but you still hesitated, fearing the 10 percent chance of embarrassment? It’s as human as it gets to not know certain things, we’re not walking wikipedias.
What we also acknowledge is that in certain situations, such as a client-service provider relationship, it’s a good practice to be familiar with various terms. That way not only the process is more straight-forward but also many misunderstandings are avoided.
That’s why we decided to provide you with a comprehensive glossary of the most commonly used phrases and terms in our everyday work. For starters, design.
Table of Contents
Brief
This is where it all begins. The brief is the single most important document in the entire process of design. It’s impossible to start work without an accepted brief.
- It’s like putting together IKEA furniture without an instruction manual.
- It’s like ordering at a restaurant without a menu.
- It’s like singing karaoke without the lyrics.
- It’s like working on a project for a client that expects specific results, without providing any details or information to start off with, resulting in mutual frustration. Oh, right. That’s exactly what it is.
A good design brief should comprise, among others:
- The project goals
- The project specifics
- The target audience
Don’t be afraid, we perfectly understand how difficult it is to put together such a document. After all, clients don’t always know how to answer certain questions. Unlike it was in school, guessing is much worse than leaving it blank. And what’s even worse is altering a brief after it has been accepted. It’s a short form of text, so keep your briefs brief. But certainly don’t keep your work on them brief.
We offer our assistance in putting together a comprehensive brief. We appoint meetings with our clients in order to collect all the necessary insights and variables. Sometimes stakeholders know they want to achieve this and that in their business, but do not understand what the process really is. That’s when we kick in, helping find the perfect solution and write it down in the form of a brief.
Product Design
These days, UX design is wrongly used to describe most processes leading to inventing a product. We prefer to use a more holistic term, that is Product Design. We define it as the entire route the design travels, from concept to commercialisation.
Most importantly, Product Design is the process of designing a solution, which aims to accomplish a specified set of business goals. At the same time, it complies with the users’ needs and expectations. User Experience, completed with User Interface design, we see as tools that help carry out the process. Branding components lay on a similar level.
Overall, Product Design is the platform where technology meets design, in order to create a problem-solving solution and effectively achieve business targets. And to make it a little more clear, here’s a visual:
User Testing
User testing is basically confronting the design with its target audience. Even though the entire process is based strongly on data, research, feedback, etc., certain assumptions require validation. We’re just human and we’re prone to mistakes, even when designing for ones like ourselves. On the business, or rather — the financial side, testing is a huge money saver. Designing is expensive, and wasting time on doing it wrong is even more of a drain.
User testing is first deployed at the very beginning of designing. It’s crucial to be sure that certain key assumptions are correct. At this point, we verify whether our suggestions respond to the users’ needs.
We iterate testing several more times whenever we need feedback on particular elements. These are usually moderated sessions, where we ask users to perform certain tasks, e.g. purchase a ticket for an upcoming event. We then analyse their behaviour and collect feedback, in order to remove any pain points.
A major chunk of testing takes place even after the product hits the marketplace — that’s when it’s the most crowded and the most data is collected. Strategic changes can be made based on user behaviour, conversion rates, etc.
Wireframe, Prototypes, and Mockups
Depending on the stage of the design process, different methods are used to present current progress. Wireframe, prototypes of differing fidelity and mockups are terms that often get confused.
Wireframe
Wireframe, or in other words, a Lo-Fi (low fidelity) prototype is nothing more than a plain layout of the product’s potential functionalities, allowing basic user interaction. The prototype lacks purely visual elements, as its key task is to verify usability assumptions on early stages of the process.
Lo-Fi prototypes are usually software-based, but another popular method is paper prototyping. In this case, the design is drawn out on paper using simple sketches, aiming to present the layout and functionality. It’s definitely timesaving, but can be deemed as unprofessional.
Hi-Fi Prototypes
These are as close as it gets to the final product’s interface. Hi-Fi prototypes include the visual design (colours, typography, iconography etc.), contain data and content, and most importantly allow complex user interaction. They have three purposes:
- Hi-Fi prototypes are used to conduct user research, as they generate qualitative feedback.
- Hi-Fi prototypes are shown to stakeholders to verify whether the product meets their expectations.
Hi-Fi prototypes are passed on to the developers in the design handoff process.
Mockups
The difference between mockups and Hi-Fi prototypes is that the former does not enable any sort of user interaction. Mockups are flat images, aiming to present the visual design of the product. Feedback they seek to generate is based purely on how the product looks, not how it works.
Version Control
The term “version control” is best known in the habitat of software developers, but it’s certainly not exclusive. Version control can be understood as a system-based timeline of a file, allowing you to recall a certain revision later on.
Although version control software, such as Plant was the industry standard not so long ago, we would recommend moving to cloud-based tools, such as Figma. They allow real-time cooperation between designers, with no need to keep track of versions.
Design Handoff
When the interface design is finally completed, we arrive at handoff. It’s the stage of the project when the finished design gets passed on to the developers. They then become responsible for translating the visuals to code. This is the point where most problems like to surface.
In order to prevent that, it’s crucial to provide the devs with all the necessary information. We’re huge fans of Figma’s Inspect tab, which allows you to read all the properties, components and access downloadable assets.
Mobile-First Design
Not so long ago, it was standard to focus primarily on designing for desktop screens, and then adapting them to mobile. Now, mainly due to the analytical possibilities of today, the process is much less straightforward. Mobile-first design is an emergent trend, responding to modern users’ needs.
We see mobile-first not as a universal design philosophy, but more as a business approach. When briefing a client provides us with information that their main source of traffic comes via mobile, that’s the route we take. Doing otherwise would be like designing a website with elegant, dark colours and a gentleman vibe, knowing your target is mainly kids. They could use it anyway, but they would definitely feel uncomfortable.
For example, when we teamed up with Legia Warszawa to design their website, we found out that around 60 to even 70 percent of their consumer base uses phones. It became obvious that we had to start from mobile design, adapting to bigger screens later on.
Once the mobile design is ready, the next steps are expanding the set of features and enlarging certain key elements, in order to make the experience equally seamless across devices with larger screens.
Design System
A design system, even though it may seem overemphasised or even trivial, is the very core of a brand’s visual communication. It can be seen as a set of coherent UI elements serving the purpose of making the brand recognisable over several differing platforms, such as apps.
For example, when we designed interfaces for several products for TISA, we had to create a design system to harmonise user experience. Every button, every toolbar and effectively every action made by the users is the same across all platforms.
A design system comprises not only the design guidelines, but everything that needs to be known in order to consistently share the brand’s values over all platforms. Here’s a piece we wrote on the topic a while back.
Design Recycling
Sometimes brilliant concepts don’t need to be discovered and designed from scratch. Sometimes they’re just laying at the bottom of the designer’s drawer, waiting for their moment of glory. Every single design process generates dozens of ideas and sketches, only one being finally implemented. And make no mistake, the leftovers aren’t by any means worse — they simply didn’t fit the particular project.
Every unused design can be given a second chance in completely different circumstances. Most designers keep hold of these and will happily share. Drafts of e.g. interfaces, webpage layouts or logo designs can be used directly, slightly altered or just serve as inspiration.
Key Visual
A key visual is a distinctive design theme, reoccurring throughout the whole project. It’s the visual element consumers will associate the product with. It’s like the Big Ben for London or the Eiffel Tower for Paris – it’s what you remember them for. For instance, a major element of HeroDOT’s key visual are the characters we designed, used for blog post cover illustrations.
Look&Feel Design
Look&Feel Design is the client’s first touchpoint with a tangible design asset. We show them a primary concept of how the visuals look, for them to feel the design. These are often really basic – part of a landing page, a simple animation, a logo sketch. They intend to convey the project’s possible direction, but can also provoke discussions that lead to major changes.
Conclusion
These by any means aren’t all the terms design-talk is based on. And what’s more important — these by any means aren’t universal definitions. Look at them as a comprehensive guide of how HeroDOT rolls in the market. They could also prove to be the missing 10 percent of knowledge that will make you more confident when mentioning design in a discovery call, for example.