EdCast Marketplace Design System & Branding

Design system, design principles, visuals, logo & branding ○ EdCast Marketplace ○ 2018 & ongoing

Team
UX Analyst
UX/UI Designer

Timeline
Project Start: Nov 2018
(ongoing project)

Duration
4 weeks for the original set of elements & guidelines

EdCast Marketplace is a global B2B e-commerce platform that enables corporate L&D teams to source all their training products and services from a single, integrated learning ecosystem. The Marketplace offers an ever-expanding catalog of self-paced and (virtual) instructor-led training programs in Technology, Soft Skills, Leadership, Compliance, and various other subjects, in an agile and on-demand e-commerce environment.

Specifications & Contributions

The EdCast Marketplace Design System was created using the Ant Design framework. As a matter of fact, the selection of this framework was one of the very first steps in this project, and it was completed with a collaboration between the Design and Engineering teams, to ensure that the requirements from a technical, visual, and general user experience perspectives could be addressed.

The Design System consists of three main sets of contributions, namely:

• Extensive List of Visual Resources - such as color schemes, logos, and icons - not only for general UI but also for any type of company-related artifacts (e.g., presentations, cards, or banners)
• Components for UX/UI Design - such as buttons, input forms, and tables - that not only define how the platform looks, but also how it works;
• Rules and Guidelines to use each Component - based on common UX heuristics and general best practices, to address issues with the past experience and to prevent new ones from happening.

Ultimately, the combination of these three contributions ensures that the Design and Engineering Teams are able to produce solutions in an efficient, effective, and consistent manner.

In the following sections, selected examples of the various resources, components, and rules are listed. If you have any questions, please feel free to contact me.

My role

My role as a Lead UI designer on the project was to gather all of the possible requirements, analyze the current product and get familiar with the framework.

The project was developed using the following steps:

• Analyse our backlog projects and possible needs in the future.
• Analyse current solutions and user challenges. What can be done better with simple improvements? (those "quick wins" everyone talks about)
• Develop the basic and most common UI components from the system based on the previous analysis. - Example: buttons, inputs, steppers, typography, and others. Of course, this was created with consideration for our framework.
• Work on the set of rules and guidelines for how to use the components. - For this step, since no previous user data was available, I worked with the UX Analyst (who also just joined the company) and the support team to gather the most common issues and try to understand how to bring improvements. We conducted research on best practices on the web that fit our use cases and will improve the experience.
• Present the new system to the stakeholders and later to the developers. - We worked hard to also present the logic behind every decision. This helped the developers and the stakeholders to understand the system and built trust in it. Later this escalated to our developers being so familiar and such big advocates of it, that sometimes they would come and point out when we deviate from the guideline (usually there is a reason for this, of course).

Branding

EdCast Marketplace Design system is developed as part of the EdCast family. The branding is an essential piece from this process and ensuring consistent use of our color palette, typography and styles are important to build the look and feel of the company throughout the platform.

The set of rules you see below are important not only for the design and developers team but also for our Marketing team. All of the company branding assets are shares and used consistently.

EdCast Marketplace Logo

The logo is one of the core elements for EdCast Marketplace and its visual identity. It should be used thoughtfully and consistently.

The standard use of the logo is Dark on White background. An alternative version for use in a dark background is also provided.

Typography

EdCast Marketplace uses Open Sans as a typeface. Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek, and Cyrillic character sets. Open Sans was designed with an upright stress, open forms, and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.

Styles

EdCast Marketplace uses different font styles to structure information on the public website and on the applications. The different headers and paragraphs are used according to the occasion but with a preference to the primaries.

As you will probably notice, the marketplace is using relatively big fonts compared to similar applications in the industry. The decision to use these fonts was supported by the Accessibility standards we try to follow.

After discussions with the support team and analysis of the current state of the application (before applying the system), we concluded that the user base is challenged by the smaller fonts, and because of the nature of the platform, they often need additional guidance. To support this, one of the essential rules, when we started developing the UI, was to always try to create easy and obvious solutions, even if this means extra clicks.

Stationery

Design System

The EdCast Marketplace Brand Guidelines are central to every interaction users have with the platform.

EdCast Marketplace is a business unit within EdCast. It consists of a corporate training ecosystem and a marketplace, home to owners of training content, assessments, or standards as well as contract instructors who sell a wide range of training-related products and services.

Architected for agility, scalability, and reliability, EdCast Marketplace hosts three integrated marketplaces on one Platform; courseware, certifications, and instructors. It comes with transaction management, an authoring, publishing, distribution, and learning delivery environment to create the customer experience in the digital age and to provide sellers and buyers insights derived from data and analytics.

System Guidelines

For every component in our system, there are sets of rules guiding the use of it. They support the creative and decision-making process, ensure consistency and good experience throughout the platform.

Besides just setting up the rules, our system consists of examples of how to use them and how not to. Both examples turned out very important when presenting the system or working on solutions.

Here are some examples of our documentation: