Learn how to create digital products that deliver more value for your customers and employees, using the latest design methods and tools.
Read our full guide to digital product design
In a recent blog article, we discussed why digital products are increasingly vital for any organisation wanting to remain competitive and relevant today. These products may be digital tools and platforms that help you serve customers better – or that enable greater productivity for your employees.
But how do you actually create world-class products that deliver on their full potential? The key is great digital product design. In this article, we’ll explore a range of the latest methods and tools that expert designers use to equip organisations with more usable and powerful digital products.
Iterative design and high-fidelity rapid prototyping
In a traditional product development process, design happens early and is soon locked-in, making later improvements difficult. The preferred alternative approach today is iterative design.
As the name suggests, iterative design uses a sequence of iterations – incremental improvements based on feedback. Rather than being purely linear, the process moves forward as an Agile series of iteration cycles. Each cycle involves design, prototyping and testing – with feedback and insights being incorporated in the next cycle.
Using iterative design and development, you can build better products with much less risk of failure. The approach optimises each part of the product design process and builds confidence for all participants. This modern product design methodology also discards the conventional use of wireframing – replacing it with rapid prototyping.
Rapid prototyping uses realistic-looking digital mock-ups of pages and screens, rather than non-representative wireframe diagrams. These “high-fidelity” prototypes are built with the same digital technologies as the final product – HTML, CSS and JavaScript – so they can have clickable UI elements and accurately demonstrate how user interactions will work. From the start, stakeholders and testers are given a much clearer vision of how the final product will look and function.
Using this approach means that moving from prototypes to usable products is a relatively seamless journey. Annotations from designers and developers can be included as comments within the actual HTML code during the process, rather than existing as separate and disconnected documentation.
Rapid prototyping allows a product team to iterate swiftly, validate design choices and get valuable feedback. All members of the product team can be involved in creating and evaluating prototypes – helping to build a stronger team and a better product.
Developing consistent and scalable design systems
An expert designer can help improve your digital product delivery with the creation and management of a design system.
A design system is a managed and evolving collection of design guidelines, methods, documentation, tools and assets, specific to an organisation and its products. With a clearly defined design system, product designers and engineers can focus their efforts on meeting user needs, rather than re-creating and re-inventing design and UI components.
Through your design system, the product designer gives your teams a “single source of truth” on design issues, it helps team members maintain design consistency, rapidly create high-fidelity prototypes to test solutions – and iterate products faster.
Building Agile teams of designers and engineers
An expert product designer will work closely with your product delivery team. They can also act as a natural conduit from product strategy to product delivery – possessing a clear understanding of both areas.
Most digital product delivery processes today are run using Agile software development methodology. Agile focuses on improving product delivery through the collaborative work of self- organising and cross-functional teams.
While product designers were not originally given much consideration in Agile methods compared with developers and engineers, today they can work highly effectively as integrated members of Agile product delivery teams.
An Agile product designer will work responsively, collaboratively, pragmatically – and with focus on user and customer needs. They undertake various key activities within Agile product delivery teams, as they move through regular work phases or sprints. These include concept design for product features and releases, detailed product design of elements for the next sprint, design support to engineers for the current sprint – and design validation of work on previous sprints. The activities may be performed by one multi- tasking designer – or shared among multiple designers with different areas of focus.
Applying best-practice product design methods
Expert product designers continuously identify and adopt new methodologies and approaches to improve the quality and effectiveness of their work – such as:
Lean brand: Successful organisations understand that their brand is in many ways the most important aspect of the business. Brand defines the entire relationship a business has with its customers and the experience it provides. Lean brand development is about creating successful, innovative and disruptive brand relationships with customers. It focuses on experimentation, iteration, and elimination of wasted effort. It offers a scalable framework, with ongoing cycles of improvement based on customer testing and validation of value hypotheses.
Jobs To Be Done: In the Jobs To Be Done (JTBD) framework, the needs of users or customers are analysed in terms of “jobs” – the tasks, objectives or outcomes that a user wants to achieve. Once the underlying tasks have been identified, the JTBD framework helps design teams to reshape or reinvent their product to meet those needs. JTBD allows designers to break down user needs into a series of specific process steps, creating a “job map”. This gives product teams a powerful structure for translating real customer needs into better digital products.
Grounded theory: As the name suggests, grounded theory aims to generate product insights that are ”grounded” in data – such as user interview recordings or transcripts, collected and gathered in a database. The product designer will then work through and analyse the data, organising their findings into concepts, issues, categories and themes. Finally these can be refined into a set of core insights – valuable evidence-based learnings that can have a real positive impact on the development and direction of a digital product.
Atomic design: The huge and increasing variety of devices and screens has led designers to seek ways to bring more order and structure to digital design. The methodology of “atomic design” breaks down user interface (UI) design into small, manageable components that can be combined to build any desired layout. The five key stages of atomic design thinking are atoms, molecules, organisms, templates and pages. By bringing modularity, hierarchy and reusability to digital product UI, atomic design encourages consistency, efficiency and quality – and has been rapidly adopted by designers as the basis of their design systems.
Design tokens: Managing brand implementation and design consistency across multiple digital channels is complex. Helping to address this challenge, design tokens are small pieces of code that represent an aspect of a UI – such as a colour, a typeface, or a transparency value. If a brand element needs to be changed, only the relevant token value needs to be updated in a central repository – and the change will be quickly and easily propagated to every UI element using that token, across every platform. Along with atomic design, design tokens are becoming a key building block in many organisations’ design systems.
Utilising modern collaborative design tools
To maintain the effectiveness of remote and distributed product teams, designers and their software engineer colleagues were among the earliest adopters of remote asynchronous collaboration tools.
Such cloud-based tools do not require all the team to be active at the same time. Team members can add their contributions to a shared digital space or conversation, whenever they want and wherever they are.
While team messaging or chat tools such as Slack have proved their powerful remote collaboration benefits, designers have also adopted a variety of other specialist tools to support the requirements of digital product creation, such as:
Figma, an asynchronous design collaboration platform with powerful plug-ins, and an integrated online whiteboard, FigJam.
Miro is another tool for visual online collaboration.
Notion is an online workspace that provides a great way to build a store of knowledge around a problem area or design challenge to solve.
Dovetail is a customer research knowledge platform, ideal for capturing user insights, and spotting themes and patterns in user research.
Maze is a collaborative product research platform, useful in gathering user feedback quickly to help guide concept creation.
New powerful tools are emerging all the time, so an expert designer will stay abreast of the latest potential additions to their tool-set – in order to keep remote teamwork and collaboration as effective as possible.
Example: Creating a design system for digital products
Here’s a real-world example of how a major organisation applied the latest design tools and methods to improve their digital products – working with Elsewhen as their consultancy.
Inmarsat is a leading satellite communications company, providing global connectivity products and services to business customers in a wide range of industries – including maritime, logistics and aviation.
The business needed a way to maintain brand consistency across its current and future digital product experiences, and to speed up design and development processes. This had to be consistent for designers and developers, both internal and for their partners, and be resilient to changing requirements and the development of new products.
Inmarsat engaged Elsewhen to develop a cohesive design system – a toolkit of guidelines, methods, assets and resources to enable design consistency. We started with a tight focus, developing a framework to empower a single team. We then grew this out for use with multiple teams across the wider organisation. Finally, this was opened out beyond internal usage, to be accessible for Inmarsat’s partners. At the end of the engagement, we showed Inmarsat how the design system can continue to evolve with the needs of the organisation.
The new design system emerged from the real-world needs of Inmarsat teams. It provides time-saving features and supports better, faster workflows. The system has helped to unify all of Inmarsat’s products into a set of consistent and familiar experiences – and can now be used by them to build out a clearly integrated suite of products.
Not only is Inmarsat’s design system helping product teams become more collaborative and create more consistent products – it also helps them reduce their time to market for new products and offerings, saving money and effort overall.
Unlock more insights on becoming a digital product organisation!
Download a free guide that highlights some success stories and strategies for achieving product design excellence.
