Back to all articles

Mobile app security best practices for product managers

mobile app security
Paul Calnan
Paul Calnan
iOS Platform Lead
Date
7 November 2022
mobile app security

Your customers entrust you with a considerable amount of private information within your apps. 

A single data breach by a malicious third party can result in both reputational and legal problems for your app and company, not to mention the costly effort of finding and fixing the exploited vulnerability. 

That is why product teams must be diligent in practicing good in-app security hygiene. Here are some best practices to follow that will help you to minimize the number of security vulnerabilities in your app

Please note, though, that this is far from an exhaustive list of security considerations, and each app’s security requirements are different.

Balance app security with usability

User authentication sits squarely at the intersection of security and usability.

Many apps require their users to log in before using the app. In some cases (for example, social media apps), users only need to log in once and the app keeps those credentials until they are changed elsewhere. In other cases (for example, banking apps), users need to log in and enter their passwords every time they open the app.

When building an app, you need to balance security with usability.

Requiring a password to enter an app increases security but also increases friction. Biometrics like Touch ID or Face ID make this easier on the user but can complicate the user experience. You need to design when biometrics will be used, how it interacts with your username-and-password-based login screen, and what to do when biometrics fail or are unavailable.

Protect user-generated information

Apps are built to handle user-generated information. This can be any data that the user enters into the app. This can also include any information related to the user that gets pulled down from the network. 

If the information is stored on the device, you should use the highest encryption setting possible given other requirements (see this article for details).

Be aware that the networking subsystem of your app may cache network requests and responses. If this contains sensitive data, you will need to adjust your cache policy or encrypt the cache. Usernames, passwords, cryptographic keys, and other highly sensitive data should only be stored in secure storage, like the iOS Keychain.

Network communications

Most apps communicate over the internet with a server. Therefore, keeping data secure while being transferred across the internet is important. 

At a minimum, your app should use the Transport Layer Security (TLS) protocol to protect the data being sent and received. In many cases this is sufficient. However, there are tools like Charles Proxy that allow users to inspect the contents of TLS-encrypted communications on their devices. The man-in-the-middle (MITM) approach used by Charles Proxy can also be used by an attacker on an unencrypted Wi-Fi network to intercept and record TLS-encrypted communications.

To mitigate such attacks, apps can perform validations on the server’s certificate chain to ensure that communications have not been tampered with. This process, known as certificate pinning, will only allow communications with a server if its certificate meets certain criteria. While this mitigates the risk of a MITM attack, your system needs to take into account many new failure modes that this can introduce. Also, the use of certain VPN software (for example, Zscaler) can interfere with certificate pinning.

Sometimes the certificate of a server will be revoked or updated — if your app is only pinned to the server’s old certificate, this will require an update to allow it to continue to connect to that server.

Screen privacy on mobile apps 

Screen privacy is an often-overlooked area of app security. iOS takes a screenshot of your app when it moves to the background and shows that screenshot when using the multitasking app switcher.

If your app shows sensitive information on the screen (e.g., a bank account balance), you should obscure the contents of your window when entering the background. Otherwise, that sensitive information will be stored as an image in the operating system and will be visible any time the user is switching between apps.

More insights?

View all insights

The easiest (and most cost-effective) way to practice good app security hygiene is to do it early and proactively. 

Get your team thinking about security best practices from the very beginning of the project. For instance, try using STRIDE modeling to help identify any potential vulnerabilities in your app’s ecosystem. You should do this before any UI has been drawn up or any code has been written to help inform your team’s design choices. 

Back to all articles

The future of commerce is composable, cookieless, sustainable, & personal

future of commerce 1
Kelsey Anderson
Kelsey Anderson
Sr. Content Marketing Manager
Date
25 October 2022
the future of commerce

Each year, DEPT® Commerce Day brings the brightest minds in e-commerce to share their expertise and vision.

The following talks from October 2022 highlight the future of e-commerce and actionable steps brands can take to accelerate their e-commerce strategies across marketing and technology. 

The future of e-commerce is composable

In this discussion, Tim de Kamper & Jonathan Whiteside (DEPT®) talk about why composable commerce is soon to be the leading architecture for sophisticated e-commerce stores. 

Top takeaways

  • More than likely, all brands will move to composable commerce in 3-5 years.
  • Composable commerce is about selecting the best-of-breed e-commerce tools/solutions and bringing them all together to compose and build your own experiences. 
  • The reason brands are selecting composable commerce is that no single vendor can offer all the applications needed to deliver e-commerce experiences that meet the demands of today’s customers. 
  • The typical components that brands are seeking out for best-of-breed include content, search, merchandising, payment, shipping, taxation, product management, and marketing automation. 
  • While we’re big fans of composable commerce, there are a few drawbacks, namely, managing several vendors and contracts, development resources, and more complex architecture. Before diving in, brands should reach a level of digital maturity. 

It’s not just best of breed, it’s also a matter of being able to quickly change certain components in your architectural landscape without overhauling the whole system.

Tim de Kamper

The future of e-commerce is cookieless

Lisanne Maatman (Lead Data Consulting at DEPT®) reviews the new cookieless and privacy-driven reality, and how to handle your data going forward. 

Top takeaways

  • The cookieless future affects all industries but impacts e-commerce most of all, and it’s already had a massive impact. While Chrome has delayed its cookie policy, Safari has already updated its browser to purge this data. A future-proof data strategy is imperative. 
  • There are four layers of data management that e-commerce teams need to be aware of: consent, identity, audience, and campaign data.
  • In order to gain consent to track additional data, brands need to offer something of value via content. 
  • Think about implementing the privacy sandbox from Google or start working on a CDP roadmap so you can combine all types of data (online, in-store, CRMs) and use it. 
  • We will all depend on our self-collected first-party data or the “public” gardens of Google, Amazon, etc. 

You want to be able to connect that user across all touchpoints – the way you do that is by merging that data in one central database.

Lisanne Maatman

The future of e-commerce is sustainable  

Anusha Couttigane (Head of Advisory at Vogue Business) reveals research on consumers and sustainability, showcasing how brands can communicate their initiatives effectively. 

Top takeaways

  • Consumers are willing to do research to make sustainable choices. In fact, 71% of people will choose a luxury brand that supports sustainability over one that does not (Vogue Business Index, 2022).
  • Consumers in the West are more likely to trust legacy media, such as magazines and websites, over social media. In other words, if brands tout their sustainability on social media, it will not be as effective. 
  • Only 15% of brands put sustainability information on product pages on their e-commerce sites. 40% of brands have zero information on sustainability and another 38% bury it in the footer. 
  • Brands should be more upfront with consumers about their sustainability practices–putting information at the point of sale. 
  • Consider sustainability services (repair, warranties) as an extension of your customer service lines. 

The more information we provide to shoppers at the point of sale, the more confidence they will have in your product and brand.

Anusha Couttigane

The future of e-commerce is personal

Ali Mcclintock (Managing Director at BYTE/DEPT®) walks us through an example of scaled personalization for the e-commerce brand Just Eat

Top takeaways

  • By not personalizing ads and brand messaging, you risk inefficiencies by wasting ad dollars on unqualified markets or audiences.  
  • It’s all about showing the right message to the right person at the right time. To do that effectively, you need paid media, data, and technology. 
  • To create a single personalized piece of content, you need to take into account the market, funnel stage, customer mindset, product, brand attribute, and desired behavior.
  • Automating personalization as much as possible frees up marketing teams to work on things like sponsorships, partnerships, and innovation. 
  • In fact, Just Eat’s automated personalization project was 400% cheaper than manual asset production. 

Today there are too many options. With personalization, brands have the opportunity to say, ‘I think I know what you might like.’

Ali Mcclintock

The future of e-commerce is phygital 

Max Pinas (Executive creative director at DEPT®) gives examples of how digital and physical commerce are blending into one “phygital” experience. 

Top takeaways

  • AR is becoming more relevant than ever. We are shopping at home away from the main shopping streets, but we still want to see things. We want to know: how does this look, or how does this fit?
  • A lot of big names are reverse engineering tech toward stores. We call that “phygital,” where physical and digital meet. 
  • Two examples of this are Amazon and Nike–Amazon opened their own first fashion retail store, and Nike has opened Nike Style. These experiences feature a green screen studio where you see digital screens that are really intermixed with physical experiences. 
  • Shopify has said, “the future of retail is going to be retail everywhere,” and they are set on making this happen. Currently, they have a partnership with Pinterest, Twitter, and YouTube that support in-app purchases 

If you look around, e-commerce is getting integrated into everything we do.

Max Pinas

View all insights

Questions?

Sr. Content Marketing Manager

Kelsey Anderson

Back to all articles

How to face the e-commerce challenges of today

online shopping
Tim de Kamper
Tim de Kamper
VP eCommerce Europe
Date
19 October 2022

E-commerce is booming

From 15% of total retail sales in 2019, global e-commerce surged to 21% in 2021 in response to the restrictions caused by COVID-19.

Research companies like Morgan Stanley, Statista and McKinsey forecast further growth of up to 25%, despite an overall slowing of economic activity.

But to continue thriving and staying ahead of the growth curve, organizations need to tick a growing number of boxes. From marketing and technology to data and creativity, there are key challenges to address to keep e-commerce growth going.

online shopping

Last year, global retail e-commerce sales reached $4.9 trillion and are expected to exceed $7.4 trillion by 2025. This year, B2B e-commerce adds $14.9 trillion on top of that.

While many factors contribute to this continued digital growth, the two leading factors are the emerging digital presence of companies and the accelerated consumers’ digital maturity. The way companies sell and people shop has changed permanently.

However, this doesn’t mean that the e-commerce pie is shared equally. 

Fiercer competition requires better experiences

The e-commerce landscape is getting more competitive as more companies pivot to launch or optimize their digital commerce operations. In the race to gain consumers’ attention, the cost of advertising has increased and the return on ad spend (ROAS) has decreased.

CPMs on Facebook rose 47% in 2021 when compared to 2020, and Google, YouTube, TikTok and Snapchat are demonstrating a dramatic increase in advertising costs year-over-year. Smaller players with less financial means find they cannot rely as heavily on advertising as before. Additionally, advertising data is becoming less valuable as privacy concerns lead to stronger regulations and restrictions on third-party data worldwide.

The best way to stand out from the crowd is by creating exceptional digital experiences that inspire and attract consumers:

  • 54% of shoppers enjoy browsing and discovering online more than in-store. 
  • 74% of consumers are likely to buy based on experience alone, according to a recent Forbes study on the value of CX. 
  • 32% of customers would consider breaking up with a favorite brand after only one poor customer experience.

The standard for a good customer experience is rising every year. So it is no small wonder that customer experience was named a CEO priority for all respondents in an IBM survey of 3000 CEOs across 50 countries and 26 industries.

The big challenge to realizing a differentiated customer experience has the right technology architecture in place.

Technology drives e-commerce growth

Delivering optimal digital experiences is difficult when tools and technology are outdated, inflexible, and disconnected.

Research by Gartner finds the CMO’s top concern for 2022 is, therefore, rebuilding the marketing engine for flexibility in a changing environment. Customer journeys today have become complex, spanning a proliferation of devices and touchpoints. This results in new marketing challenges like managing content, keeping branding and messaging consistent, and connecting the marketing teams that work with their own systems.

True omnichannel – integrating all the channels into one seamless customer experience that is both relevant and high quality – is challenging to pull off. Meanwhile, new channels keep coming and gaining momentum, from podcasts, AR, VR, and Metaverse, to voice assistants, smart home devices, and car commerce. 

Marketers also see more urgency to launch digital products and iterate in today’s rapidly changing digital world. The ability to experiment, analyze, pivot, and deploy at the right time depends on agile solutions. All these developments lead to the need for a higher level of involvement from back-office technical roles. Because in today’s modern marketing environment, technology has become a cornerstone of doing business.

Every company is a tech company

The growing dependency on technology has led the marketing department to collaborate closely with the IT department.

From data collection to personalization and hyper-targeting to focusing on high-value customers, technology enables it all. The IT department has seen its responsibilities grow to support a growing number of systems, including CMS, CRM, data warehouses, and now CX platforms. The traditional gatekeeper role of the IT department has evolved to become a business driver.

Every company is turning into a technology company, because, as Forbes puts it, “Today, no company can make, deliver or market its product efficiently without technology.”

Historically, the leading choice for numerous organizations has been ‘monolithic’ platforms that contain a general solution for their most frequent marketing and e-commerce needs. These suites provide an all-in-one answer that addresses prevailing challenges with out-of-the-box solutions that ‘fit all.” The monolithic architecture is also associated with various cons, such as slow go-to-market timelines, inflexibility, lack of agility, complexity, and scaling issues.

In response to these concerns, a new approach arose that decoupled the front end and the back end.

The rise of headless

The term “headless” comes from the analogy of chopping the “head” (the front end) from the “body” (the back end).

By decoupling the presentation layer from the back-end processes, content can be easily served to whichever digital channel is connected. One head becomes many heads. This means that developers can build whatever they want and however they want, without having to worry about how it will be presented to the customers.

The rigidity of a coupled system is replaced with the flexibility of having two or more systems, loosely coupled with APIs. By going headless, developers can also address the pain points that have appeared due to increased smartphone adoption and create a mobile-optimized shopping experience. The flourishing of mobile commerce is one of the key reasons why headless became so popular. When headless solutions entered the market, the available full-suite solutions proved inflexible to address the growing mobile traffic and the growing matrix of buyer touchpoints, unlike headless.

Other cited technical reasons for choosing a headless architecture are flexibility, faster time-to-market, and stability. Companies also prefer not to be too dependent on one system and one full-suite supplier to reduce vendor lock-in.

For essential marketing practices like loyalty, A/B testing, and big data analytics, they want the solution that is best in its class. A headless architecture allows you to integrate these kinds of tools into an ecosystem. When a tool becomes inefficient or outdated, replacing it is relatively easy in a best-of-breed approach. This way, headless addresses a prime dilemma for organizations today: adapting to change without having to overhaul the whole architecture.

Headless comes with challenges

With all its pros, headless architecture also comes with cons. You must build what you want from scratch, which requires vision and ongoing development. This also means that marketing becomes IT-dependent for making content changes and running campaigns.

The biggest pitfall of going headless is doing it blindly and losing your head. Want to know more about these challenges?

Read our other blog “What is composable commerce? to learn more about the composable approach or download the whitepaper The Ultimate Guide to Headless and Composable Commerce. In this extensive guide, you will learn how the composable architecture builds on the headless approach and puts marketing back in control of the front-end experience.

Going headless with content and commerce

“The term headless typically refers to a headless CMS that organizes and stores all the content data (images, text, and videos). Popular headless CMSes are Sanity, Strapi, DatoCMS, Builder, Kontent.ai, Prismic, and Contentful.

“The content is delivered via an API to a front end, which can be custom-coded to fit specific needs. In headless commerce, the body consists of an e-commerce platform, which can be a full-suite solution such as Magnolia or Salesforce or a specialized commerce platform such as BigCommerce, Shopify, and commercetools.

“While full-suite platforms offer a native front end, this can come with the disadvantages of using a suite solution. That is why full-suite platforms are now moving towards developing front-end capacities that match better with the headless approach.”

Tim de Kamper, VP e-commerce DEPT®

Headless is booming – for enterprises

In 2016, there was only one headless vendor in the Gartner Magic Quadrant for Digital Commerce. The Magic Quadrant for 2021 now features eight vendors offering headless solutions. The adoption of headless is booming globally, and headless is often called the future of e-commerce. According to research by Vanson Bourne in 2021: 

  • 64% of enterprise organizations are now using a headless approach, a nearly 25% increase from 2019. 
  • 92% of respondents state that implementing headless technologies makes delivering a consistent content experience easier.
  • 92% of respondents recognize digital experiences as essential to their organization’s success.

Still, only 2% of all websites worldwide use headless, primarily enterprises. Why are midlevel and SMBses not embracing headless with the same fervor?

View all insights
Back to all articles

Before you create a design system, do these three things

DEPT Interior 62 1
Logan Bishop
Logan Bishop
Lead product designer
Date
3 October 2022

Creating a design system is typically what you think of in the early phases of your design strategy. 

But before you create a design system, a whole lot of work goes into a website or product’s design strategy. And these steps are essential to be able to successfully create a valuable design system.

Here are the steps to take before designing your system:
 
1. Information architecture
2. Goals of key pages 
3. Zonal definitions 

Let’s run through each of these and why they’re essential to the success of any website or product design project. 

Information architecture

The information architecture answers three important questions 

1. Approximately how many website pages do we need?
2. What is the natural hierarchy of these pages?
3. How will users interact with and flow through the site?

If you start designing without knowing the answer to these three questions, you can easily miss the mark. 

By knowing how many pages you have and establishing the hierarchy of those pages, you can start to imagine how many custom pages, templatized pages, and modules you will need. A good design balances uniqueness, consistent themes, and scalability. By understanding which pages are most important, it gives you more context and color over how you will design. 

sitemap exmaple

For example, think about a SaaS company and the architectures you commonly see (like the image above).

Sometimes you see a single product page that summarises everything the user needs to know in one page. Other times, you see a product overview page and then sub-pages underneath that go further into product features or use cases. You won’t know what you need until you’ve gone through an IA workshop.  

If a user experience team discovers that a single product page is best for users, its future design will need to achieve different things compared to architecture with multiple sub-pages. 

This is how information architecture starts to inform your designs. 

Define the goal of your pages   

Your website has several goals, both qualitative and quantitative. Increased traffic, purchase frequency, demo sign-ups, app downloads, etc.

And of course, some pages are more inclined to facilitate conversions of these goals. 

page goals

Let’s go back to our example of a single product page, where the goal might be to encourage demo sign-ups. Other pages on this website could have goals like: 

– Increase trust in product and brand 
– Navigate to the product demo contact form
– Spark excitement about the product 

Outlining the goals of each page keeps designers focused on strategic outcomes and the holistic user experience. Goal setting also helps designers stay grounded and design for what the given page needs to accomplish rather than indulging in design exploration. 

Zonal definitions 

Once you have an accurate picture of total pages, core pages, and the goals for all pages, move on to zonal definitions. 

Zonal definitions answer the question, “how will we achieve the goals of each page?”

Some common zones include wayfinding, engagement, conversation, and education, but these are highly dependent on your product’s/service’s unique value.

Define all zones in an easy-to-reach list, like the one below.

zonal definitions

Using the same product example, a question that needs answering is “How will we increase demo sign-ups using this product page?” The answer to this question might be something like:

Create some excitement with potential offers, make sure users can find the exact information they need, and showcase how our values align with theirs.

From a page view, this will look like this:

1. Conversion – limited promotion or offer
2. Wayfinding – answers the user question “where am I?” 
3. Engagement – brand values and content 
4. Wayfinding – specific navigation 
5. Engagement – additional content  

By listing out (in order) how you plan to achieve sign-up goals, you’ve naturally created zonal definitions.

You’ve also created a super-low-fidelity wireframe. 

product page with zones goals

Once you’ve done this exercise for all pages, you will start to see some commonalities. Maybe on 50% of your pages, you know you need a “features and benefits” zone. And only one page on your website needs a “brand values” zone. 

In this case, knowing a certain zone is important and used frequently, you might plan to design variations of the features and benefits to keep the design fresh from page to page. And since you know brand values are only featured once, you wouldn’t design more than one. 

From these zones, you can start to understand how many modules, custom pages, and templates are needed. 

Then you can start designing and creating your design system.

Sign up for the DEPT® product newsletter

View all insights

Questions?

Lead product designer

Logan Bishop

Back to all articles

Design systems 101

Dept Office Berlin 17 1200x750 c 1
Simon Fairhurst
Simon Fairhurst
Head of Design
Date
22 August 2022

Welcome to design systems 101, a five-step guide that anyone can use to begin to understand and implement design systems. 

Let’s start with the basics.

Define your team

The first lesson in any design system 101 class is to think about who needs to be involved to bring the concept to life. The people who use the design system will be the foundation of its success. 

As it may be a completely new way of working for your business, it’s imperative to have all key stakeholders involved from the get-go. This will ensure everyone moves forward in the same direction and enable them to collaborate optimally in both the short and long term as the design system is implemented and evolves.

Despite the name, we can assure you that it takes more than a team of designers to develop a successful design system. Design systems bridge the gap between visual designers, UX/ UI specialists, and front-end developers, so each of these teams will need to be involved…but that’s not it.

An ideal team would include

  • Designers to define the visual elements
  • Front-end developers to create modular code
  • Accessibility experts to ensure the system conforms to WCAG 2.1 standards
  • Performance and optimization experts to ensure the system loads quickly on all devices
  • Product managers to ensure the system is aligning to customer needs
  • Leadership team to champion and align the vision throughout the company
  • Content strategists to advise on the tone of voice
  • UX researchers to help you to understand customer needs

Depending on the digital maturity and in-house resources of different companies, it is at this stage that some will decide to work with an external agency that has expertise in delivering these types of solutions.

Some organizations simply do not have the right people or skills to deliver a future-forward solution, while others do but appreciate the impartiality that comes with an external partner that can provide fresh perspectives and really elevate the project to ensure its success.

colors in a design system

Conduct a visual audit 

Before building a design system, it is fundamental to complete an audit of your current design, be that an individual digital product or your entire digital estate.

To understand how small or large the task will be, it is important to take stock of all visual elements such as color, spacing, and typography, as well as UI elements like buttons, cards, lists, and forms, in order to see how much design debt needs to be addressed. 

This can be done as simply as screenshotting different elements of digital assets and storing them in a categorized document where you can review all the elements. However, it’s not a small task, so we suggest getting as many team members as possible involved. 

It is at this stage that many companies realize how inconsistent their brand identity has become without a modern solution in place; with numerous different hues of brand colors, font families and sizes, or variations of the same type of button.

But by gaining a complete and holistic view of these design and UI inconsistencies, the more effectively you will be able to merge or remove different elements to create a more streamlined and robust system. 

Create a visual language

The visual language is the backbone of a design system, this comprises the ‘basics’, ‘elements’, and ‘principles’ mentioned earlier. When looking at basics, there are four key areas that play a role in every component on the screen: color; typography; sizing and spacing; imagery.

Color

Design systems most often have one to three primary colors that represent the brand. Most companies introduce a range of secondary tints to complement each primary color, sometimes with light and dark variants of each, to give designers more options and flexibility. It may be that certain colors are reserved for certain uses, such as calls to action, to maintain consistency in color use. 

Typography

Choosing the right typeface is one of the most important steps in creating a design system. Most design systems include a maximum of two fonts to avoid overloading and confusing users – one for headings and body copy – and a monospace font for code. Keeping the number of fonts low is not only the best practice from a typographic design perspective, but it also prevents performance issues caused by excessive use of web fonts. 

Spatial systems

Spatial systems, grids, and layouts provide rules that give your designs a consistent rhythm. The spacing and sizing system works best when it provides balance between elements. The 4-based scale is growing in popularity as the preferred option due to its use in iOS and Android standards, ICO formats, and even standard browser font size. 

Imagery

It’s important to set guidelines for the use of imagery, treatments, illustration, animation and iconography to ensure brand consistency. You won’t want all image assets to be identical, but they do need to look and feel part of a family. The key here is to have a plan and stick with it. 

color palette

Build a pattern library

With the ‘basics’, ‘elements’, and ‘principles’ defined, you can apply this visual language to build ‘components’ and ‘templates’. 

Components are the reusable parts that form many different pages (e.g. forms, mastheads, navigation, and articles), and templates show how elements and components can be put together in common layouts to achieve an effective design. Created by designers and coded by developers, these UX and UI and interaction patterns are the modular building blocks that will be stored in the pattern library and will become the core content of your design system. 

A pattern library is an online tool to capture, collect and share design patterns and guidelines and how to use and apply them. It enables teams to browse components and see how they can be applied in different platforms and circumstances. They can download source files or code to accelerate the production of their digital asset using these consistent patterns. It can be made available to all or limited stakeholders, either publicly or within a protected secure area. 

Traditionally, a style guide focuses on static elements and styles, such as iconography styles, colors, and typography. A pattern library builds on this to serve more as a toolbox of reusable components that can be combined to create an interface such as user flows, interactions, buttons, and text fields. This broader set of interactive patterns demonstrates how hierarchy can be used to produce consistency, but not at the detriment of flexibility. 

The atomic design methodology really comes into effect at this stage

This encourages consistency and reuse. To ensure this, the pattern library should be built in a hierarchical way.

On the base level, there will be simple design patterns like buttons, text boxes, or labels. At the next level in the hierarchy, you will have more complex patterns that combine a number of these features (e.g. an email submission form that includes a text box, button, and label).

Each ascending level of the hierarchy builds on the simpler patterns found in the previous levels. 

The benefits of this modular methodology are twofold.

First, when documenting a design pattern like an email submission form, the designer doesn’t have to rewrite how buttons or text boxes work. Secondly, the email submission form provides a real-life case study of how to use the button, text box, and label effectively. The atomic design approach and standardization ensure consistency, as well as facilitate ease of use.

Documentation is what separates a pattern library from a true design system. This involves documenting what each component or template is and when to use it. The goal is to create cohesion between design and development teams to ensure the consistent and effective activation of the design system components and templates.

Most design system documentation includes the component’s name, description, example, and code. Others may show metadata, release history, and examples. The most important thing is that it shows what’s necessary for your team to implement that component or template.

Again, the documentation will be hosted with an accessible online tool, such as Frontify, to ensure that standards and guidelines can continue to evolve along with the digital products and assets they serve.

As projects grow and become more complex, everyone knows exactly how to proceed since all details are recorded in design templates and relevant documentation, enabling large organizations with multiple design teams to work harmoniously, and newcomers to the team can jump right in.

Define a governance strategy

Once your design system is in place, focus can turn to maintenance, which is equally important.

Design systems should be kept in constant motion in order to evolve with the business and its continually expanding digital estate, so a strong governance strategy is required to maintain its integrity and effectiveness of it in the long term.

A design system is a living system that needs to be regularly adapted and changed to meet new requirements and feedback. However, to maintain consistency and best practice approaches, changes and additions to the system need to be carefully considered and approved.

Creating a clear governance plan is essential for making sure the design system can adapt and thrive as time goes on.

A solid governance strategy starts by answering some important questions about handling change.

  • What happens when an existing pattern doesn’t quite work for a specific application?
  • Does the pattern get modified?
  • Do you recommend using a different pattern?
  • Does a new pattern need creating?
  • How are new pattern requests handled?
  • How are old patterns retired?
  • What happens when bugs are found?
  • Who approves changes to the design system?
  • Who is responsible for keeping documentation up to date?
  • Who actually makes changes to the system’s UI patterns?
  • How are design system changes deployed to live applications?
  • How will people find out about changes?
  • Page loading times (impact overall experience of our products)
  • The use of animations and transitions

To best manage this, we suggest establishing a design system governance group. This will help to define owners, their roles, and responsibilities, and ensure the ongoing review of digital products and assets in adherence with the design system.

It is also helpful to define workflows for modifying, adding, and removing components or templates as well as education and communication plans to ensure that all relevant teams are made aware of any changes to the system.

https://material.io/

Image courtesy of https://material.io/

Design systems we love

To wrap up design system 101, we recommend browsing the web for examples of design systems. The following are notable design systems that our team of UX/UI designers has selected as benchmarks and inspiration.

Want more? Download our guide to implementing design systems

View all insights

Questions?

Head of Design

Simon Fairhurst

Back to all articles

The basics of mobile-first design

mobile apps
Imogene Robinson
Imogene Robinson
Marketing Copywriter
Date
18 August 2022

Mobile internet usage surpassed desktop usage in 2016, a trend that’s only continued to grow.

Most people have probably experienced a similar transition in their own day-to-days. These days, generally speaking, folks everywhere tend to use their phones and tablets more hours in the day than they use their laptops.

This shift has had important implications for those designing software, putting a new emphasis on mobile design that’s resulted in a series of design techniques collectively called “mobile-first design.”

If you’re responsible for a software experience, how can you use this approach to ensure your mobile design is the best it can be?

JM Mobile app

What is mobile-first design?

Designing with a mobile-first approach makes the most of what a mobile device has to offer by going against the traditional direction of web design. 

Before mobile became the dominant way folks interacted with the internet, designers generally worked large to small; desktop to tablet to smartphone. Hardly surprising, given that the desktop long preceded the mobile phone and the iPhone didn’t debut until 2007. 

Nowadays, given the current ubiquity of smartphones, designers generally work small to large; starting from the pocket-sized screen and scaling up from there. 

This approach forces designers to work with the most limited real estate first, on the screen size users will likely use most. Instead of paring down a desktop design to fit a mobile device, mobile-first designs are optimized for mobile devices and then expanded for desktop.

As a result, mobile-first design is the right approach for most software and web experiences today.

Thinking smaller means thinking smarter

Designing for mobile is a challenge that forces product designers to think practically and clearly define the components that make up the foundation of the UI and UX.

A navigation bar designed for mobile, for instance, is much more minimalist than a desktop nav. Smaller devices require comparatively larger touch targets to make buttons more easily clickable. Mobile devices are also most typically held in portrait orientation, shortening the navigation bar and reducing the available real estate even more.

With these limitations, a mobile navigation bar realistically can fit no more than three or four clearly defined components.

Thanks to the sneaky piece of design innovation known as the “hamburger menu,” however, it’s possible to create additional space for more without overcrowding the main navigation.

Just bear in mind that hiding something under a hamburger menu generally signifies it’s of lesser importance.

Mobile-first means content-first

Top of the list when tackling mobile design is content.

Users expect a mobile experience to contain the same content that they’d otherwise find in a desktop experience. At the same time, finding relevant content should also be just as intuitive.

A clear visual hierarchy of content is a must. Take advantage of different design elements, like high-contrast color palettes, negative space, and large, easy-to-read typography, to present to the user a logical flow of content.

Make it skimmable by trimming down word count and introducing short “above the fold” previews of content to help the user navigate to the content they need.

Organizing content into a hierarchy might be tricky. If it is, it’s helpful to take an inventory of what’s available in a spreadsheet (or even on sticky notes) and arrange those blocks into an order that reflects their relevance to the user.

Prioritize accessibility over looks

Think about the user and what their mobile specifications are.

What’s their demographic? Are they living in a more rural or urban area? Do they access mobile sites with a WiFi or data connection? Are they using an iOS or Android device?

In building a mobile education platform for ASU students in Kenya, for example, we had to tailor our approach to the technical requirements for learners in low bandwidth countries. Cutting-edge responsiveness, animation, and UX would simply not serve learners using a five-year-old Android device on high latency, low bandwidth network. 

Prioritizing accessibility in mobile design doesn’t always require taking into account extreme disparities like those between college students in the US and Kenya.

Compressing images and using asynchronous loading to ensure that key content is displayed quickly—even if other portions of the design take a few seconds longer to appear—is another way of prioritizing accessibility for a user base made up of people who are on the go and experiencing slow connections.

Above all else, however, the best way to prioritize accessibility in a mobile design is through user testing. Putting a product in the hands of real users with real devices will help inform a design that works for everyone

Final thoughts on mobile-first design

A mobile-first approach benefits from a design principle known as “progressive enhancement.” 

Mobile design might be challenging, but the nature of those challenges leads to an outcome that is accessible, intelligently designed, and puts the most essential content front & center. 
Simply put, approaching design mobile-first creates an unbeatably solid foundation that makes enhancing for a larger device easy. 

Considering a mobile-first approach for your product’s design? Learn more about our digital product design services and get in touch with one of our design experts.

More insights?

View all insights

Sign up for the DEPT® product newsletter

Back to all articles

Production Trends: Virtual Production

mandalorian stagecraft 1 scaled
Lidia Weinstein
Lidia Weinstein
Producer
Date
26 July 2022

Virtual Production

Video production is changing rapidly. A plethora of formats which can be played back on a variety of devices dominate today’s digital space. In addition, the implementation of extended reality technologies (augmented reality, virtual reality, mixed reality) has made immersive content accessible to users via smartphone or tablet, opening up a space for almost infinite creative applications.

For some years now, the topic of immersion has also been increasingly explored in the production processes of film and video – virtual production.

The combination of state-of-the-art game technology and film has already made it possible to produce films in immersive studios for several years. Now this technology is mature and ready for use, experts report. What virtual production is and what impact it will have on film and video production in the future – and accordingly on brands and their marketing measures – is the subject of this insight.

What is virtual production?

Virtual production is a collective term that describes many different digital production processes. These include AR, VR, motion capture and volumetric video (more on this shortly). What we have recently become familiar with from productions such as “The Mandalorian” (2020) and what is commonly referred to as virtual production describes the possibility of producing films in an immersive studio. The entire production of a film is made possible by the combination of reality – i.e. actors and actresses, props – and digital backdrops that are generated in real time in game engines.

What does a virtual studio look like?

In principle, a virtual studio consists of an LED surface that runs in a semicircle or elliptical shape around the set and extends over the ceiling. This surface is covered with a digital backdrop, e.g. a mountain landscape with a sky above it. The possibilities for design are, as you might expect, endless. An immersive space is created with which the actors and crew can interact. For example, an actress can look at a mountain in the far distance without just imagining it, as previously on a set with a greenscreen. In addition, it is possible to experiment with the scenery: landscapes can be changed in real time or color moods can be adjusted.

Auf dem Set von “The Mandalorian”. Filmcrew im immersiven Studio von ILM StageCraft, auch “The Volume” genannt.

On the set of “The Mandalorian”. Film crew in the immersive studio of ILM StageCraft, also called “The Volume”.

Technological developments in the gaming sector make this production process possible in the first place. To achieve a perspective match between the backdrop and the shooting angle, the camera movement in the room is tracked. The room is measured volumetrically beforehand – volumetry refers to a technical measuring procedure in which a room is measured three-dimensionally. The computer can then track all the elements in front of the camera lens and place them in a 3D environment. The game engine then renders the 3D environment in real time – currently, the Unreal Engine is probably the most powerful. The Meta Festival initiated by DEPT® and Journee is also based on the Unreal Engine.

Since the backdrop is already part of the production, the post-production is brought forward and integrated into the pre-production. In some cases, post-production is not necessary at all, since the backdrop exists for every scene and the light emitted by the LED surface already creates the desired color world. The green screen can still be used to achieve certain effects. It is then simply projected over the LED surface as well. 

A selection of films made on virtual sets: “The Batman” (2022), “The Mandalorian” (2020), “Ripple Effect” (2020), “Lion King” (2019), “First Man” (2018). Another innovation in the field of virtual production is volumetric video.

What is volumetric video?

Volumetric video is produced in a special volumetric studio and refers to a video where pixels have not two but three spatial coordinates – giving it volume. In a volumetric studio, cameras are installed so that the object is recorded from all perspectives. Through this recording process, the object can later be viewed from any perspective, similar to gaming, with the difference that the degree of representation is much more realistic.
 
This technology is particularly interesting for use in the metaverse, e.g. for the creation of photorealistic avatars. A film in which volumetric video was used is, for example, “Matrix Resurrections” (2021). Many shots from the film were created in the Babelsberg studio Volucap

Das Volucap Studio in Babelsberg.

The Volucap Studio in Babelsberg.

Volumetric video has the further advantage that the camera perspective can be changed in post-production and is not limited by the camera movement as before. This is particularly interesting for interactive films in which the viewers can explore the space themselves. 

The possibilities of virtual production grant filmmakers unprecedented control over all elements and brings great flexibility. For example, the film crew is no longer dependent on local weather conditions and can avoid long journeys to locations. Scenes can be replicated afterwards, as lighting conditions and backdrops can be recreated exactly. 

Virtual production has also accelerated production processes tremendously. This is reflected above all in production costs, which means that virtual production is increasingly becoming the focus of producers.

What do these developments mean for future film and video production?

The transition to digital production will change the professional field from the ground up; for example, think of production designers who will no longer build physical sets but digital ones in the future. Art departments will become virtual art departments or hybrids. Virtual set objects will become reusable and monetizable, e.g. in the form of NFTs

There are several arguments in favor of entering virtual production: maximum creative control, flexibility, sustainability – the elimination of building huge sets on locations, transporting film crews and the associated logistics – and correspondingly lower costs.

Will virtual production replace conventional production? Not quite, because it doesn’t make sense in every case. It is therefore worthwhile to subject a project to a proof-of-concept at the beginning to determine which production method is best suited. Nevertheless, one can follow this development with interest.

DEPT® has experts on hand to advise and support you throughout all phases of production. Further information is available on our Production service page. We look forward to working with you!

View all insights

Questions?

Producer

Lidia Weinstein

Back to all articles

How to accelerate your omnichannel retail strategy

iStock 1160939955
Lizzie Powell
Lizzie Powell
Strategy Director
Date
29 June 2022

The face of retail is forever changing

With constant changes in consumer behavior paired with increased competition, it’s becoming difficult to gain a competitive advantage–not to mention the heightened pressure on a brand’s bottom line.

Retailers are well aware of their expectations of them. According to Adobe, 53% are expecting demands on their digital experience to accelerate beyond what they’ve already witnessed over the past two years.

And although we might be headed for a “retail reset,” there is still an opportunity for retailers to deliver out-of-this-world shopping experiences to strengthen consumer connections and drive sales.

And it’s not all about digital. Foot traffic at brick-and-mortar stores is ticking back up to pre-pandemic levels

The future of retail isn’t solely digital or in-store, it’s “phygital.” Believe it or not, customers still want that in-store experience, but they want a seamless brand experience across all touchpoints, wherever they may be. 

Ultimately, being ahead of the curve is going to be essential to thrive. So how can retailers stay ahead, stand out from the competition and ensure they are present and optimizing every stage of the customer journey? 

apple store

Omnichannel has been a hot topic for a number of years, but retailers are struggling to execute it. 

Long-term survival requires retailers to move from a multichannel to an omnichannel approach to deliver the frictionless brand experiences your customers are demanding. 

Almost half of the e-commerce decision-makers in Europe and North America agree that omnichannel strategies are ‘very important.’

But what about the other half?

This suggests that not everyone is getting it right and improvements are required to deliver results and push omnichannel up the importance list! But let’s refresh, what is omnichannel? And how is it different from multichannel? 

A multichannel approach treats each channel as its own independent entity, delivering a consistent brand message but not necessarily connected. Therefore the way customers interact with each channel is siloed, preventing internal teams from having a full view of their customers and data.

You could have an amazing website and an engaging social media campaign, but if they’re not working together then your not giving the customer a seamless experience.

Whereas omnichannel marketing is all about coordination activity across all channels to deliver a personalized brand experience with the customer at the heart, removing any friction along the buyer’s journey, whether that’s online or in-store.

This also allows internal teams to build a full customer profile with valuable data to continuously improve and deliver personalization. 

The future of omnichannel

To us, the future of omnichannel is all about delivering an actual ‘phygital’ shopping experience.

Phygital retail is all about combining the best of physical and digital into one. A popular example of this now is click-and-collect, but that’s only touching the iceberg. We’re seeing more immersive brand experiences bringing both worlds together, from Charlotte Tilbury’s virtual store to H&M’s virtual showroom

Taking this a step further, we expect to see these virtual stores and showrooms, as well as brick and mortar stores harnessing the power of data to become more and more personalized to the customer in the future. Whether that’s a sales assistant knowing what is in your favorites, or a customized virtual store showing you the products you’re running low on. The possibilities are endless. 

Here are 3 key considerations for retailers when implementing an omnichannel strategy.

Get ready for a cookieless world 

Data is at the heart of any personalized experience retailers deliver. Therefore the demise of third-party cookies will pose a challenge, but it also presents an exciting opportunity for brands to optimize their omnichannel strategy. At the end of the day, the more first-party data retailers have at their disposal, the more personalized, omnichannel experience they can deliver.

However, according to Adobe, 37% of retailers believe their organization is ill-prepared for the post-cookie world. And surprisingly, only 16% of senior executives chose “improving our ability to establish identity without cookies” as one of their top two investment areas in 2022. 

It may have been postponed until 2023, but that’s not an excuse to put it on the backburner this year. It’s time for brands to up their first-party data strategies now, in order to stay ahead. Value exchange and complete transparency are key here. Consumers aren’t going to part with their precious data unless they trust you and what they get in return is of high value to them. 

omnichannel retail

Using data the right way

First-party strategy nailed? Good. Now use it… but in the right way!

Let’s be honest, there’s no point having all of this valuable data to hand if it’s not used correctly. Nearly a third of retailers say they are ineffective in using their first-party data to personalize the customer experience. 

An omnichannel strategy will help to collect customer data from each touchpoint, but it’s important to manage and analyze your data to develop a full customer profile and get a deep understanding of their wants, needs, and motivations. 

Then it’s all about using that data to be in the right place, at the right time, with the right message to deliver a strong personalized experience to the customer.  

And H&M does just that.

On their app, you can ‘activate in-store mode’ which allows your shopping assistant to help you find what you’re looking for, whether that’s checking your favorite items are in stock in a local store or whether another size or color is available. Using their customer’s data and providing them with the exact information they need at the right time and in the right place gives them the convenience and ease of use they are wanting. They also serve personalized offers based on your previous shopping habits, all of which can be used either online, in-store, or on the app. 

Put the user first

Customer loyalty is dwindling, especially with such fierce competition in the retail space. But we all know it costs less to retain customers than it does to acquire new ones, so a personalized, omnichannel customer experience could pay dividends.

The essence of an omnichannel strategy is all about putting the customer first.

If your customers feel valued, a part of your brand, and always have a positive interaction at every touchpoint, then they’re likely to become repeat customers, which in turn increases your customer lifetime value – a no-brainer. And, there are so many ways you can deliver just that, whether it be through loyalty programs, timely emails, or exclusive in-store events.

By preparing for the cookieless world and then using your first-party data in the right way, you’ll already be making great strides in improving customer loyalty and retention rates.

KFC partnered with DEPT® to deliver an omnichannel digital transformation.

We created an online and mobile experience by using insight-driven personalization to give customers a fun and convenient experience, connecting online ad in-person experiences. In the app, customers were able to re-order their favorites as well as be served recommendations based on their previous purchases and behaviors. The app also included new features such as progress bars and digital ticketing, to help enable a seamless which enables a more seamless pick-up and drive-thru. 

More insights?

View all insights

Choosing the right architecture for your omnichannel strategy 

Traditionally, retailers kept e-commerce and their in-store tech architecture separate, but this hinders retailers from being able to implement a true omnichannel experience.

The right technology solution can provide seamless integration of online and offline channels, facilitating the end-to-end customer experience, as well as providing retailers with the ability to manage data at scale. But how do you know which solution is best? There’s no one-size-fits-all, it boils down to each brand’s unique requirements. 

A headless technology stack is becoming increasingly popular. This has meant that many DXP providers have started to move away from the monolithic approach to offer a hybrid solution: composable DXPs.

These allow retailers to have a greater degree of flexibility, breaking free from the constraints of large implementation updates and platform lock-ins. It also lets teams adopt a best-of-breed methodology. 

But a composable solution is by no means the only option.

A ‘Monolithic’ digital experience platform, also referred to as suites, can provide retailers will everything they may need to execute an omnichannel strategy. Providing a single platform to manage and optimize all stages of the customer journey could be the ideal solution. It does however come with some limitations, such as being locked into a single vendor or technology. 

Ultimately, it’s all about having a platform with the right systems connected to enable omnichannel and that is best suited to your business. 

The phygital shopping experience is here to stay, and an omnichannel retail strategy allows brands to deliver just that. Retailers need to invest now or risk being left behind. With the right solution in place and a strong omnichannel strategy, you will take your customers on a seamless, personalized experience, however, and wherever they choose to shop with you. 

Get in touch with our experts today to find out how we can help you define or accelerate your omnichannel retail strategy.

Back to all articles

How to create a product vision backed by users

product vision meeting
Imogene Robinson
Imogene Robinson
Marketing Copywriter
Date
21 June 2022

“Product” in the digital world is a catch-all term for things like apps, software platforms, and websites. 

An effective product is one that has a meaningful purpose that is beneficial to the people using it. 

That purpose is created with a product strategy. 

Product strategy encompasses quite a bit. Everything from how the user navigates the product (the UX), to the design of the product’s components and features, to the long-term plans for the product’s future. 

That said, how do you go about creating a product strategy? And what can you do to ensure that it leads to a successful product? 

It all starts with the product vision.

Here is how to create a product vision, led by user research. 

woman writing on post its

Put your users first

In her book Escaping the Build Trap, product management expert Mellissa Perri defines “the build trap” as what happens when organizations measure their success by outputs rather than outcomes.

Put another way, it’s what happens when organizations focus on simply launching products or new features instead of thinking about what value these provide for the user. 

In defining your product vision, you need to pay attention to the value you’re trying to provide with your product. 

For instance, DEPT® recently assisted with a homeowner’s insurance app that wasn’t performing well. 

When we unpacked the original product vision, we learned that the app was created to help policyholders complete routine maintenance tasks on their homes and, if they used it, they would receive a financial reward when they needed to file an insurance claim. 

The problem with the company’s original product vision was that the value of the product came late and, moreover, came during a comparatively unhappy, stressful time for the user: when they needed to file an insurance claim. 

By assessing the product vision behind the app, the company was able to pivot on its vision, doubling down on home care reminders and education. In doing so, they successfully increased the app’s performance. 

Creating a product vision is a vital reference when building out a product. It’s also important to have in the future when updating or adding on to the product. With a clearly defined product vision, brands are able to take a proposed new feature and measure how well (or not well) it serves the app’s intended purpose.

Conduct user research to eliminate assumption

Once you have created a clear product vision, it’s time to turn to the users themselves. 

User research eliminates assumptions in your product vision and strategy. It gives you direct insight into your user base’s wants, needs, and expectations. Ideally, these all align with your product vision and provide a foundation for what needs to be accomplished as you flesh out your product strategy. 

Here’s an example

Last year, we helped the financial planning company eMoney conduct user research. They wanted to attract a new audience to their product: millennials. 

Traditionally, financial planners and tools have been used by older generations. But with the world on the cusp of the greatest generational wealth transfers in recent history, eMoney needed to recalibrate its product strategy.

DEPT® kicked off eMoney’s user research by interviewing millennials. We needed to understand how they seek financial advice and what they want from it. We also wanted to identify how they interact with their money.

Through this research, we learned that millennials require greater control, access, and adaptability when it comes to financial advice. An educational component was important to have too. 

These key learnings were distilled into insights, potential opportunities, and idea creation. Working with the eMoney team, we came up with five concepts to implement in their product strategy and connect them to their new user base. 

Some of these were a part of the original product vision, and some were new opportunities.

Ultimately, eMoney’s user research stage became one of the main drivers for their new product strategy. It all goes to show, that it’s a vital part of the process and not something to miss out on. Skipping user research, whether it be because of time, budget, or even Melissa Perri’s build trap, can result in a product vision and strategy that fails to provide for your users by relying too much on guesswork. 

product vision meeting

Put one dumb foot in front of the other

Barry Diller, the famous American businessman, once said that the secret to building a successful business is to “put one dumb foot in front of the other and course-correct as you go.”

As much careful thinking and research as you do, the best way to strengthen your product strategy is to put it to the test. Take the plunge, and then assess and course-correct as needed.

One of the best ways of doing this is with a technique pioneered by Google and practiced by product professionals, the design sprint.

Sprints are a great way to test the viability of your product and your product strategy without spending your entire budget building a product that might flop.

Over the course of five days, a selected group of internal and external stakeholders work together to create your product vision, research, create a prototype of the product, and run it through a round of user testing. 

Our work with both the homeowner’s maintenance app as well as eMoney included a design sprint and in both cases affirmed the direction we were headed with product strategy.

When it comes to assessing the viability of your product strategy, it’s important to note that the user testing component of design sprints acts as the determining factor. It puts your product in the hands of the audience you’re trying to attract and allows you to assess whether or not your product strategy is working. 

If it is, make plans to launch your product. 

If it’s not, think about what you need to do to course-correct and try again.

Product strategy is a careful balance of knowing and not-knowing 

It’s creating and understanding your product vision, and users, and confidently making an educated guess. Along the way, steer clear of assumptions by remembering, at the end of the day, you don’t know everything. 

A good product vision can also come as the result of a less-than-good one. Sometimes stumbling once or twice is the best way to learn how to strike that balance. As long as you remember to course-correct and keep putting one dumb foot in front of the other, you’ll find your way.

And, of course, if you’d like to work with DEPT® on creating a product strategy, we’re happy to help! Feel free to get in touch with our experts.

Sign up for the DEPT® product newsletter

View all insights
Back to all articles

Guide to user testing – types & timeline

user testing guide focus group
Jesse Stevens
Jesse Stevens
Senior Product Strategist
Date
14 June 2022

The only way to get a product right is through user testing. 

Assumptions are a wonderful place to begin designing products, but product solutions must be evaluated with real users to see if these assumptions solve the user’s core needs.

In fact, pairing user testing alongside market and product fit is the trifecta in building your product strategy. When teams do these things, they are more efficient in every other area of development, accelerating product roadmaps and finding ROI faster. 

This knowledge only comes from solving your user’s underlying problems, which comes from testing.

In this guide to user testing, we’ll take you through the types of user testing, when each should be used, and how to use them in a realistic product life cycle. 

user testing guide focus group

Types of User Tests 

There are two categories of user testing, qualitative vs quantitative.

Qualitative testing is learning about a user’s interpretations and feelings, while quantitative is number-based and measurable. An example might be interviewing a single user about their needs and motivations vs A/B testing a single interface element or user flow. 

When conducting your quantitative data, be sure to account for statistical significance, otherwise, your results could be by chance and not a real consensus of users. 

For the best results, you need both qualitative and quantitative testing. Here are the top user tests and how they help.  

Usability testing

One of the most important and popular tests, usability testing asks a user to complete a particular task with feedback while a moderator watches and documents. These kinds of tests are essential because they put a real human behind a device.

With this, you can learn about their problems, how they navigate, how they search for information, and what they like/dislike about a certain product. 

Direct observation

With direct observation, you observe without interaction. Seeing a user easily find information or struggle to complete a sign-up can shed light on how easy your application is to use. 

Prototyping

With prototyping, your user is reviewing a prototype, not a full-fledged app. Sometimes these prototypes are low fidelity wireframes, sometimes they’re high fidelity and clickable. Since development is expensive and time-consuming, you don’t want to begin developing without testing some kind of prototype. 

A/B testing

Comparing two options to find the superior one can be a fast way to iterate. Is a user more likely to respond to a “Contact Us” CTA or “Let’s Talk?” Does a blue button work better than a red button? With A/B testing, you can get useful data and make informed decisions. 

Treejack testing

Treejack testing is ideal for information architecture testing, which is essential for any complex website or product. You can ask questions like, “if you wanted to find the location nearest to you, what page would you click on?” and then record all interactions. 

Eye-tracking and heat mapping

Eye-tracking and heat map testing can be expensive, but it’s worthwhile for some products. With these tests, you can measure where your users are looking and where they’re clicking on your app– to understand if you are providing the right information in the right place. 

In-person vs remote

You can conduct all of these tests in-person, remote, or automatically. Remember to take these different environments into account when analyzing data, because different atmospheres can affect users’ opinions and how they interact with technology. 

user testing scaled 1

When & how often should a team test?

Like most answers to design-related questions, “It depends.” 

Minimum viable products (MVPs) need different testing compared to a legacy app. A single-page web app needs different testing versus a large e-commerce store. So, unfortunately, there is no one size fits all solution. 

A robust discovery session is a good practice. This process helps strategists understand the problem space and craft a program to tackle the issue. It also helps designers determine how to test and when. 

However, we can provide some general guidelines which are:

Test often

A strong design process starts with discovery and definition, before diving into ideation. Then, repetition is essential. 

Ideate – Prototype – Test as needed

Ideate – Prototype – Test as needed  

Every time you iterate, you need to ask yourself, “should we test this?” While a single color swap won’t require standalone testing, a new feature will. 

You also have a budget to consider. Testing every small thing will cost you time and money, so have discussions, ask questions, and keep testing on your team’s mind. 

Lightweight iterations = quantitative tests 

There are always exceptions to this rule, but it’s generally true. 

A “lightweight iteration” is difficult to define, but it’s likely something that can be A/B tested and decided upon with analytics. 

Heavyweight iterations = qualitative tests 

Also exceptions here, but when you do more intensive iterations, like developing new features or launching to a new audience, you need to sit down and talk to users. Understanding not just what they like, but why they like it can be incredibly insightful. 

Internal vs external testing 

If you’re in the very beginning stages of product development (think wireframes), we recommend testing with internal stakeholders. 

Don’t go outside of your organization until you have high-fidelity prototypes. After all, every product needs stakeholders to sign off before digging into the design. 

user testing emoney visual dept scaled

Real product testing: eMoney 

Rooted in comprehensive financial planning, eMoney’s products strengthen client relationships, streamline business operations, and drive overall growth. 

eMoney’s goal was to extend its product to a new audience: millennials. 

Together with eMoney, we came up with five concepts that could potentially reach their target of millennial users. We then kicked off a series of design sprints, where we built out prototypes for eMoney concepts and tested them with real users. It became clear that users gravitated towards one of the concepts more than others, which was a mobile app that could provide financial wellness advice and complement the existing eMoney software-as-a-service platform. 

This was the beginning of what became eMoney Incentive.

We learned through testing and development that Incentive appealed to a wider audience beyond millennials.

Because of this rigorous testing, eMoney’s pilot program created a strong pipeline of interested users, including current users, retirement plan advisors, and employers.  

If your product needs a user testing strategy put in place, reach out to the designers and product innovators at DEPT®. 

Sign up for the DEPT® product newsletter

View all insights

Stay in touch!

Personalize your experience

We use functional cookies to make the website work properly, analytical cookies to measure your behavior and marketing cookies for ads- and content personalization. We collect data on how you use our website to make our website easier to use, but also to tailor or personalize communication in advertisements, on our website or apps. Data collected through marketing cookies is also shared with third parties. By clicking accept you agree to this. More information? Read our cookie policy.