Start designing with anthem

Anthem is TraceLink's design system that establishes platform-wide design guidelines and enables you to create and customize user experiences (i.e. the user interface) to meet your users' business demands, all without the need for an app development background or overhead. The design system provides the framework, grid, styling, components, and patterns that you need to design experiences on the Opus Platform that are consistent with all other experiences provided by TraceLink and other third-party companies who build and customize experiences on the Opus Platform.

The Anthem Design Guide is for anyone creating an experience on the Opus Platform or adjacent to it. While most of the guidelines are specific to building experiences in Customize, these guidelines can also be applied to web pages built outside of Customize or documents created as supplementary material. The best practices and principles apply regardless of where you create the experience.

For more information about building experiences in Customize, see the Customize Help Center.

Design principles

Anthem is built to be consistent, relevant, and global across all user experiences on the Opus Platform. The majority of our users work in supply chain industries and many of our apps work in concert with each other. As users move from one app to the next, often during the same day, it would be disruptive for them to interact with different experiences, so our consistent styles, components, and patterns provide a seamless experience across the Opus Platform.

Consistent

The experience is consistent through the styles, components, and patterns, so whether you're a prospective customer visiting a page within our learning resources or a supplier relationship manager tracking your incidents, you're always able to easily interact with any experience on the Opus Platform.

Relevant

When you use any experience on the Opus Platform, the content you see and the design you interact with is relevant to you and your job. Our roles-based approach, information architecture, and content strategy allows you to find information and complete tasks faster and more effectively because the experience is centered around you.

Global

Each language has its own size and design considerations. Our grid, components, and layouts are responsive, which allows you to use our experiences on any device, regardless of which country you're working in, or which language you need.

App and solution development process

The user experience is part of the solution developed for an app. Use the styles and patterns from this guide to customize your experiences.

This is the typical approach to app development and how the anthem design system and user experience fits in:

  1. Build an app: App developers create their app, which contains a data model with business logic and workflows to perform specific functions. These functions can be accessed via APIs.
  2. Add solutions: Users like you are assigned the Solution Developer role (e.g. app developers, TraceLink Services, third-party companies) create one or more solutions for an app, which organizes the functionality to fulfill a specific business need within the context of that app (e.g. industry types, business segment specific use cases). The solution includes user experience, roles, and policies for the app, in addition to extensions of the data model and workflows within the app. The Anthem Design Guide applies when you create the experience for a new solution using the Solution Designer design studio. Customers can license these solutions just like they do apps.
  3. Customize solutions: Within Customize, you can customize existing solutions and build new solutions for the apps that your company licenses. You can experiment with these customized solutions in the Validation environment before moving the solution to Production and applying it to an app or network. The Anthem Design Guide also applies when you customize existing solutions.

For more information about solutions, see the Customize Help Center.

How to design an experience

The design process relies on correctly identifying the problem, who you're trying to solve the problem for, and designing an effective solution.

1. Familiarize yourself with anthem

Read through the Anthem Design Guide to learn about:

  1. Our brand and how it applies to designing experiences consistent with our values and missions.
  2. The foundations of anthem:
    1. The framework common across all screens on the Opus Platform.
    2. The navigation common across all experiences on the Opus Platform.
    3. The grid that all screens are built on.
    4. Our brand colors and other colors we use.
    5. Our standard iconography.
    6. Our typography styles.
  3. The components that provide the building blocks of any experience.
  4. The patterns that the components build to ensure interactions are familiar:
    1. The common screen flows (also known as wire flows) that allow users to move between screens.
    2. The common screen layouts that make up those flows.
  5. Our writing styles that keep the TraceLink voice simple and consistent.
  6. Downloadable templates and resources that expedite the design process.

2. Define your users and their problems

Going from discovery to definition requires asking the right questions: who, what, where, how, and why. Each question builds on the last. Download the UX definition template to help you with this process.

Who

Who will be using your experience, and what will they need to see and do to reach their desired outcome?

Identify the different user groups your experience will be used by, and create a high-level persona for each. Personas create reliable and realistic representations of these groups and should be based on qualitative and quantitative user research. User groups and personas for enterprise apps focus more on the user's job than other qualities about them. For example, one common user group within TraceLink apps is the IT System Administrator. This person works in the company's IT department and focuses primarily on setting up and monitoring the companies' internal systems and external apps like Master Data Exchange, as well as troubleshooting problems. Within the external apps, IT System Administrators often set up integrations with their company's internal systems (e.g. a Line Management System), add users, assign roles, and configure settings. A persona puts a name and a face to that user group, so stakeholders can understand who they are and empathize with their problems.

What

What is the clearest and most effective way for the user to fulfill their intent?

Define the primary intent for each user group. The intent explains the user's primary goal within the experience and the reason they need to accomplish that goal.

Where

Where does the user go to fulfill their intent?

Identify where uses go to fulfill their intent within the network navigation by defining the network, processes, experience tasks, and screens that users will use to accomplish their tasks.

How

How does the user do their job, including using your experience?

Outline the steps that have to happen in order for the user to accomplish each task. These steps should include what happens outside of the Opus Platform and inside your experience, so everyone fully understands what users needs to do, ensuring the design is relevant to users.

Why

Why are you choosing to use certain patterns in your experience?

Explain your thought process for choosing certain components and patterns, including why they best help the users accomplish their primary intent. Documenting the components and patterns you're using helps ensure consistency for users across all Opus experiences.

3. Plan your designs

Download our templates so you can build your UX artifacts and mockups before you begin configuring components.

4. Build your experience

Log in to the Opus Platform, select Customize in the side menu, and begin creating or customizing your experience. For more information about using Customize, see the Customize Help Center.

Checklist

Use the following source materials to get started designing and building your experience:

  1. Anthem Design Guide – You're already here!
  2. Resources – Download styles and templates to use within your own drawing software.
  3. Customize Help Center – How-to guides for customizing your solutions, including your experience.