Optimize labor efficiency and enhance the employee experience simultaneously. Legion’s industry-leading, AI-powered WFM platform optimizes labor efficiency and employee experience simultaneously – at scale.
Attracting and retaining critical frontline hourly employees requires new thinking and modern solutions that achieve your business outcomes and enhance employee experience.
Our data-driven WFM approach produces highly accurate forecasts, schedule automation, and actionable insights so you can control labor costs, increase productivity, and minimize your compliance risk.
At the same time, Legion transforms the frontline employee experience – through schedule empowerment, early access to earned wages, and modern communications – so you can attract and retain employees.
As a result, businesses that use Legion WFM have achieved 13x ROI, cut scheduling time in half, and have over 95% employee adoption – ensuring a successful workforce management transformation.
Legion is an AI-powered solution to manage hourly workforces. Businesses leverage it for self-service reporting, analytics, and configuration to boost employee engagement.
It offers demand forecasting, time and attendance management, advanced analytics, and more.
Optimize labor efficiency and enhance the employee experience simultaneously. Legion’s industry-leading, AI-powered WFM platform optimizes labor efficiency and employee experience simultaneously – at scale.
Attracting and retaining critical frontline hourly employees requires new thinking and modern solutions that achieve your business outcomes and enhance employee experience.
Our data-driven WFM approach produces highly accurate forecasts, schedule automation, and actionable insights so you can control labor costs, increase productivity, and minimize your compliance risk.
At the same time, Legion transforms the frontline employee experience – through schedule empowerment, early access to earned wages, and modern communications – so you can attract and retain employees.
As a result, businesses that use Legion WFM have achieved 13x ROI, cut scheduling time in half, and have over 95% employee adoption – ensuring a successful workforce management transformation.
Legion is an AI-powered solution to manage hourly workforces. Businesses leverage it for self-service reporting, analytics, and configuration to boost employee engagement.
It offers demand forecasting, time and attendance management, advanced analytics, and more.
Legion’s rapid product growth over the years was unstructured in terms of product design, i.e., lack of a design system. This led to severe user experience inconsistency across platforms.
Responsibilities
We were part of a cross-functional team that had weekly meetings to sync about this initiative. And my duties varied from research, definition, UI design, Documentation…
Legion’s rapid product growth over the years was unstructured in terms of product design, i.e., lack of a design system. This led to severe user experience inconsistency across platforms.
Responsibilities
We were part of a cross-functional team that had weekly meetings to sync about this initiative. And my duties varied from research, definition, UI design, Documentation…
When elements are closed together, they are seen as grouped. The usage of proximity makes designers create content more comfortable to perceive by users. The pages are more scannable.
When elements are closed together, they are seen as grouped. The usage of proximity makes designers create content more comfortable to perceive by users. The pages are more scannable.
Emphasis is to control how a user will experience your design by making elements stand out.
Contrast helps us design better interfaces. It’s not only about light and dark color opposites or small and big sizes: it’s more than that. Contrast helps us organize our content in a better way, and also it helps users to focus on certain elements. Aim at creating just the right amount of contrast by playing with:
Size * Color * Weight * Styles * Fonts * Fill
A balanced composition feels stable and pleasing to the eye while an unbalanced design can create instability and distraction. Visual balance is about having both negative and positive elements in equal proportions in the design.
Inconsistency
As you can see, our product had many inconsistencies, be it in colors, components, guidelines…, which can have detrimental effects on the overall experience & the brand image.
Redundancy
For designers, not having a library of components means you’ll have to do repetitive design work to create your product screens. This also applies to the implementation, since developers would have to spend more time and effort to create new components.
“We don’t have a clear theming for our semantic components (Errors, Warning, Confirmation…)” – Engineering Manager
“I can’t re-use a component from another project, since they don’t have a similar structure.” Omar — Front End Engineer
Rigidness
For designers, not having a library of components means you’ll have to do repetitive design work to create your product screens. This also applies to the implementation, since developers would have to spend more time and effort to create new components.
Benchmark
In the benchmarking, we deeply analyzed the documentation of the guidelines and the components of popular design systems.
Inconsistency
As you can see, our product had many inconsistencies, be it in colors, components, guidelines…, which can have detrimental effects on the overall experience & the brand image.
Redundancy
For designers, not having a library of components means you’ll have to do repetitive design work to create your product screens. This also applies to the implementation, since developers would have to spend more time and effort to create new components.
“We don’t have a clear theming for our semantic components (Errors, Warning, Confirmation…)” – Engineering Manager
“I can’t re-use a component from another project, since they don’t have a similar structure.”
Omar — Front End Engineer
Rigidness
In-existence of a buttons’ hierarchy nor a clear structure for the different states of the components used across platforms.
Benchmark
In the benchmarking, we deeply analyzed the documentation of the guidelines and the components of popular design systems.
As an outcome of the benchmark, we found out that these popular design systems share some common principles. Based on our needs, we picked 3 principles as the pillars of our design system.
Accessibility :
For a product that’s used by millions, we need to accommodate our different types of users, including the ones with visual, auditory, and motor impairments to create inclusive experiences.
Flexibility :
The systems’ modularity ensures maximum flexibility in execution. Their components are designed to work seamlessly with each other and in whichever combination suits the needs of the user across platforms. Also, when it comes to color theming, Google Material has practically approached this through their *principles of color,* which is aligned with our long-term vision of verticalization.
Communication :
Commonly, a design system should have a consistent structure in which textual elements and feedback messages are formed. More than that, it should have a library of illustrations that are user friendly to strengthen the brand’s feel within the product and help convey complex ideas in a simple way.
User Research
Part of our company’s values is being user-centered. For that, we attended a weekly meeting to discuss and stay updated with the user feedbacks that come through different sources, e.g. NPS, reviews on app stores, customer service reports, Hotjar surveys, or yearly workshops (as you can see on the image).
Key Findings
One of the most frequent user feedbacks we got is related to the UI. Users found the visual aspect of the products to be outdated.
Definition
To learn the proper approach for the definition of the structure and guidelines of our components, we set up a team of designers and engineers. Our high-level objective was to have a set of elements that could coherently co-exist within a larger system, which is why we adopted the Atomic Design methodology.
Atomic Design
As Moroccans, we take huge pride in our traditional culture. Part of that is the famous style of tiles. Building a wall of traditional tiles starts with putting smaller and smaller pieces together. And this has inspired us to name our Design Language System Mosaic.
Building a website isn’t easy. There are many websites with good content, but the design is poor. Also, a site with good design lacks maintenance. Web development isn’t about implementing the codes on a website; web design also plays an essential role in the development process.
Design
Language
Design
Kit
Component
Library
Developer
Sandbox
Documentation
Site
Team Collaboration
Integrated Governance
Accelerated Innovation
Automated Workflows
Integrated Governance
Accelerated Innovation
Colors and Theming
Color themes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another.
1. Primary color
2. Secondary color
3. Light and dark variants
Hierarchical
Color indicates which elements are interactive, how they relate to other elements, and their level of prominence. Important elements should stand out the most.
Legible
Text and important elements, like icons, should meet legibility standards when appearing on colored backgrounds.
Expressive
Show brand colors at memorable moments that reinforce your brand’s style.
Fonts for apps play a major role in your users’ experience. Helvetica Neue has made a powerful emergence in many noted places from where it received vast acclaim. From using it on Logos to websites and Posters, you can make extended use of Helvetica Neue on every possible platform.
Grid systems are aids designers use to build designs, arrange information and make consistent user experiences. They include rule of thirds, golden section, single-column, multi-column, modular, baseline and responsive grid systems. For example, responsive adapts content to screen size and orientation, for consistency.
Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take. They are typically placed throughout your website UI, and they should be easily findable and identifiable while clearly indicating the action they allow a user to complete.
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
Container
Containers improve the discoverability of text fields by creating contrast between the text field and surrounding content. A text field container has a fill and containers improve the discoverability of text fields by creating contrast between the text field and surrounding content.
Fill and stroke
A text field container has a fill and a stroke (either around the entire container, or just the bottom edge). The color and thickness of a stroke can change to indicate when the text field is active.
Rounded corners
The container of an outlined text field has rounded corners, while the container of a filled text field has rounded top corners and square bottom corners.
Discoverable
Text fields should stand out and indicate that users can input information.
Clear
Text field states should be clearly differentiated from one another.
Efficient
Text fields should make it easy to understand the requested information and to address any errors.
The process of solving this issue has been a major learning ground for us. We are not experts in building design systems, not just that, we are new to UX Design and most of the principles and techniques mentioned in this case study were learned on the go. However, we experienced many challenges that allowed us to improve our soft and hard skills. Here are a few of the challenges:
1. Limitation of time and resources
2. Getting everybody on the same page and working together as a unit. Coordinating between designers, developers, and other stakeholders.
Like many things, a design system isn’t ever a finished thing — it’s a journey. How we go about that journey can affect the things we produce along the way. While we’ve learned a lot, there’s still a lot further to go. There will always be new challenges, and change is good.
