Briefing the right way: A Guide to UI/UX briefs

Remember high school group projects? Do you remember wondering where to start, how to start, how much of the work you’d have to do yourself because you didn’t trust anyone but you also had sports practice to get to? Totally not talking from personal experience…👀

Imagine having an all-in-one form you could fill out – what gives you a path to follow while encouraging you to think deeply about what you’re trying to come up with. How useful it could’ve been! 

While projects only get bigger as we go through our lives, luckily, we have the tools to deal with them and make sure a dream-project doesn’t suffer from a lack of insight or direction. 

Product briefs

A product brief (or product spec) refers to a document that outlines the goals, benefits and scope of a product. It explains the product’s vision and highlights why it is needed, and how to achieve it. While product briefs can also be surface level, some can go more in-depth to include contextual analysis.

McKinsey researched 5,000 product managers from around the world who work on both internal and external software products in a range of industries, and a whopping 75% responded that product manage­ment best practices aren’t being adopted at their companies, that product manage­ment is a nascent function within their organisation, or that it doesn’t exist at all. 

Product briefs are critical to any business because they can be used they’re the template with which people go about creating a new product, or revamping an existing one. You can use them to keep your team on track, convince potential shareholders, and figure out what marketing strategy you want to take. Additionally, an effective design brief aligns the company and designer’s goals so that everyone can be on the same page with the final deliverable.

UI & UX

UI (user interface design) and UX (user experience design) are crucial to a product and go hand in hand.

(source)

Don Norman, the co-founder of the Nielsen Norman Group Design Consultancy, is credited with coining the term “user experience” in the late 1990s. His definition highlights that regardless of its medium, non-digital UX designs encompass any and all interactions between a potential or active customer and a company.

In the digital world, UX applies to anything that can be experienced—be it a website, a photo booth, or a visit to the supermarket. It involves getting a user from point A to B, and making it easy to accomplish the desired tasks. This is possible by observing and conducting task analyses to see how users actually complete tasks in a user flow.

For example: How easy is the checkout process when shopping online? How easy is it for you to grip that vegetable peeler? Does your online banking app make it easy for you to manage your money?

While user experience is a collection of tasks focused on optimising a product for effective and enjoyable use, user interface design is the face of such functions: the look, feel, presentation and interactivity of a product. User interface design is a purely digital term for the interaction between the user and a digital device or product—like the touchscreen on your smartphone or the touchpad you use to select what kind of coffee you want from the coffee machine. In relation to websites and apps, UI design considers the look, feel, and interactivity of the product.

Very often design is the most immediate way of defining what products become in people’s minds. — Jony Ive

When it comes to product design, UX and UI complement each other, and getting both aspects right is an absolute must. Yet the two require different approaches. 

UI and UX briefs 

A well-written design brief states the main objectives, deadlines, budgets, and overall expectations from a certain project. It should be the document that sets the strategic vision of the project and the basic guidelines for the designers’ team. Each design project is different, and, accordingly, the briefs should be written for those specific needs.

The objectives of the UI design are the most important aspect of the brief. You might want to improve users’ flow, raise the app’s efficiency, or provide your company’s staff with an effective tool for managing projects. It is also important to mention if there is a pre-existing visual identity that you would be working with or would require something from scratch to be made (more on this in a while!). For instance, you might include a link to an online resource that you like using and provide a description of the aspects of the resource that appeal to you. The designer will look at everything and suggest a few different ways your preferences can be included in the final design.

A UX design brief is a concise document that aims at describing your project and ensuring that both the client and the designers are on the same page. If you decide you need UX help, there’s a reason behind it – are you losing users? Has the conversion dropped significantly? It is also necessary to give the project a visual direction as well once you have a project overview laid out along with other pertinent strategic information. ‍It should answer things like “what does the customer want the mobile application to look like if it is a mobile application? If it is a web application, which one would they like to model it after?” 

Jakob Nielsen, a renowned web usability consultant and partner in the Nielsen Norman Group, and Rolf Molich, another prominent usability expert, established a list of ten user interface design guidelines in the 1990s. While the guidelines don’t focus on some specifics of visual identity like typography and such, it’s a good starting point when coming up with a brief. Design behemoth Figma has tons of templates you could go through for this very purpose.

The brief 

For a brief set of guidelines, on which you could create more briefs or go further in depth, these are some of the most important questions you could focus on. Here’s a quick template that sums it all up. 

1. What is your company/product about and what do you want to achieve with the it?

If this is for a product, and you already have a brand identity, it is best to specify what you’re working on, and why such a product is important for your company. A new product’s outline doesn’t need to match the company’s design, but it would benefit designers to know what the overarching principles you’re going for. For example, by choosing visual elements and language that aligns with your brand, you could have brand-aligned and consistent UX and UI. Here’s a good study on how such companies like Headspace and Spotify have aligned their UX and UI.

(source)

Say, for instance, you wish to revamp a newsletter your company offers. Here’s a handy template you could use!

However, if you don’t yet have a brand identity, it would serve you well to come up with one to guide further projects and products. Here is a good example of how to make one, complete with the thought process behind the logo, the colours used, and the products that could be created out of it. Moodboards are your friend in this process: scour through the internet for inspiration from other companies and brands in the same space as you. 

(source)

Ask yourself what you want to achieve with this project. In what ways will the outcome help the business? Would it: 

• Increase the number of visitors?
• Grow sales?
• Enhance user retention time on the website?
• Simplify user flows?
• Gain brand visibility?
• Encourage users to sign up for the newsletters?

You could add to this section by working with developers in understanding the pain points of the business, and with the designer on how to best align it with the company’s themes. 

2. Who’s your target audience?

Here, you could add who you’re making this product for. Why should someone use this product instead of the others? What market are you trying to tap into? Perhaps people have told you what they want, or you’ve undertaken a survey to see what resonates better. Design is always subjective and while you could have a user persona in mind, you aren’t always only designing it for a specific client – you are creating something that would resonate with a larger target audience as well. Figure out the audience age, demographics, type of content they consume, purchasing capacity, lifestyle choices, etc. 

3. What is the scope of your project?

The project’s scope depends on the number and complexity of your assigned tasks to the chosen team. Whether you need to build a mobile app for an existing product or create the software from scratch, the professionals need to know where to start and how large the project is. Here, the essential details regarding the project’s scope are to be added. For instance, if you want to design a new landing page, mention what data to visualise, what didn’t work earlier, and add inferences from the previous two questions on what you wish to achieve. 

If there is existing research, the brief will list these UX artefacts to show what you’re working with such as:

• User personas
• Product analytics
• Moodboards, user journeys, etc.
• Interviews
• Competitor and market research
• Existing design files (wireframes, mockups, prototypes, etc.)
• Brand assets (logos, colors, fonts, etc.)

(source)

4. What are the project goals?

This section should highlight what you wish to achieve, preferably analytical, offering tangible goals.  These are typically business or marketing-related metrics. For example, “to increase the current conversion rate from 1.5% to the industry average of 4-5% by Sept. 10, 2023.

This section also sets realistic expectations of the task: it helps understand what to expect out of a design project or product. Remember to set specific, measurable, attainable, relevant, and timely goals aka SMART goals. 

Answer questions like this: 

• How will that design goal be measured in terms of success?
• What design objectives do you need to achieve to reach that design goal?
• What design challenges will the design team face and how will they be addressed?

If you need to redesign an existing product, make sure to mention the metrics and KPIs you want to be improved. 

(source)

5. What’s your budget & expected deadline?

Perhaps the most important metric in terms of conducting a new project or revamping the old one, a budget estimate will help you draw the kind of solution you can realistically provide.

(source)

Best practice here is to itemise costs so as not to surprise or overwhelm. You’d also need to have seperate equipment needs explained.

Try asking these questions to gather the information you need:

• What are the budget constraints on this project?
• Have research, development, and testing costs been considered?
• In what circumstances would there be budget flexibility?

Coming to an understanding of the project schedule is as important as laying out a clear budget to help manage expectations while still respecting any internal deadlines. Try and figure out:

• What internal deadlines this project needs to align with—for example, product launch dates or industry events.
• What are the key milestones within the project itself?
• How would you like to handle review periods and revisions?
• How much flexibility does this schedule allow, if any?

When it comes to implementing a brief, there are numerous product methodologies to run through a variety of iterations of a product, like the Waterfall, Spiral, Rapid Application Development (RAD), Rational Unified Process (RUP), and Agile. 

These development methodologies range from the sequential and structured approach, such as the Waterfall at one end of the spectrum, to an iterative approach, such as the RUP that enables the development to occur incrementally, to the entirely iterative approach, the Agile.

Conclusion 

All in all, a product brief for your new UI and UX projects are bound to benefit the overall project. A start-to-finish guide for the project, it helps keep the project in check and make sure deadlines and budgets are not exceeded, getting you the app or look that you want to wow your customers.