MOHAMED ABDEL FATTAH

project / nlogic design system

WORK

CONTACT

MOHAMED ABDEL FATTAH

project / nlogic design system

WORK

CONTACT

MOHAMED ABDEL FATTAH

project / nlogic design system

WORK

CONTACT

nlogic-design-system

SYNOPSIS

STATUS QUO

CHALLENGE

PROCESS

DISCOVER

DEFINE

DESIGN

DELIVER

RESULTS

MOHAMED ABDEL FATTAH

MOHAMED ABDEL FATTAH

MOHAMED ABDEL FATTAH

MOHAMED ABDEL FATTAH

MOHAMED ABDEL FATTAH

WORK

CONTACT

WORK

CONTACT

WORK

CONTACT

WORK

CONTACT

WORK

CONTACT

Project

nlogic Design System

Client

nlogic Canada

Role

Product Designer

Design Advocate

Disciplines

Product Design

Branding

Design Leadership

notice

Data and product details have been redacted for confidentiality. Designs shown are illustrative to reflect the design philosophy of the nlogic product suite, not live or client-specific work. The company logo is live work and remains the property of nlogic Canada.

Synopsis

Numeris, founded in 1944 (formerly BBM Canada), is Canada’s largest not-for-profit organization for cross-platform audience measurement and the parent company of nlogic Canada. nlogic Canada delivers radio, television and digital media data through reporting, planning and analysis tools. Established in 2006, nlogic’s software had become outdated. It was reliant on legacy UI kits and reactive engineering, which resulted in a complex, hard-to-use product suite. As nlogic’s sole product designer, I led the reinvention of all their products, core brand, and sub-brands. I did this by creating an unified design system and visual language to streamline design-engineering.

Numeris, founded in 1944 (formerly BBM Canada), is Canada’s largest not-for-profit organization for cross-platform audience measurement and the parent company of nlogic Canada. nlogic Canada delivers radio, television and digital media data through reporting, planning and analysis tools. Established in 2006, nlogic’s software had become outdated. It was reliant on legacy UI kits and reactive engineering, which resulted in a complex, hard-to-use product suite. As nlogic’s sole product designer, I led the reinvention of all their products, core brand, and sub-brands. I did this by creating an unified design system and visual language to streamline design-engineering.

Numeris, founded in 1944 (formerly BBM Canada), is Canada’s largest not-for-profit organization for cross-platform audience measurement and the parent company of nlogic Canada. nlogic Canada delivers radio, television and digital media data through reporting, planning and analysis tools. Established in 2006, nlogic’s software had become outdated. It was reliant on legacy UI kits and reactive engineering, which resulted in a complex, hard-to-use product suite. As nlogic’s sole product designer, I led the reinvention of all their products, core brand, and sub-brands. I did this by creating an unified design system and visual language to streamline design-engineering.

Numeris, founded in 1944 (formerly BBM Canada), is Canada’s largest not-for-profit organization for cross-platform audience measurement and the parent company of nlogic Canada. nlogic Canada delivers radio, television and digital media data through reporting, planning and analysis tools. Established in 2006, nlogic’s software had become outdated. It was reliant on legacy UI kits and reactive engineering, which resulted in a complex, hard-to-use product suite. As nlogic’s sole product designer, I led the reinvention of all their products, core brand, and sub-brands. I did this by creating an unified design system and visual language to streamline design-engineering.

Numeris, founded in 1944 (formerly BBM Canada), is Canada’s largest not-for-profit organization for cross-platform audience measurement and the parent company of nlogic Canada. nlogic Canada delivers radio, television and digital media data through reporting, planning and analysis tools. Established in 2006, nlogic’s software had become outdated. It was reliant on legacy UI kits and reactive engineering, which resulted in a complex, hard-to-use product suite. As nlogic’s sole product designer, I led the reinvention of all their products, core brand, and sub-brands. I did this by creating an unified design system and visual language to streamline design-engineering.

Numeris, founded in 1944 (formerly BBM Canada), is Canada’s largest not-for-profit organization for cross-platform audience measurement and the parent company of nlogic Canada. nlogic Canada delivers radio, television and digital media data through reporting, planning and analysis tools. Established in 2006, nlogic’s software had become outdated. It was reliant on legacy UI kits and reactive engineering, which resulted in a complex, hard-to-use product suite. As nlogic’s sole product designer, I led the reinvention of all their products, core brand, and sub-brands. I did this by creating an unified design system and visual language to streamline design-engineering.

(First image) previous nlogic logo designed by a third-party. (Second image) redesigned nlogic logo designed by Mohamed Abdel Fattah. (Third image) the interface for “Video Planner”, a tool within nlogic’s flagship product “Lens” used for planning ad campaign performance on video platforms.

(First image) previous nlogic logo designed by a third-party. (Second image) redesigned nlogic logo designed by Mohamed Abdel Fattah. (Third image) the interface for “Video Planner”, a tool within nlogic’s flagship product “Lens” used for planning ad campaign performance on video platforms.

status quo

Nlogic is a long-standing team of 30–40 broadcasting experts known for trusted insights, strong client relationships, and a culture that balances professionalism with a playful edge. However, its muted branding and convoluted, nested user experience failed to reflect this culture. This made innovation harder in an already complex industry; they needed a simpler, more intuitive system.

challenge

How can we make reporting functional and personable?

How can we make reporting functional and personable?

discover

The first step was to get a bird’s eye view of the problem space. With all the problems in one place, I could group them and identify the highest leverage issues to solve for to make everything else easier or unnecessary to solve. I set up one-on-ones with people from inside and outside the company including the COO, product managers, engineers, account executives, sales executives and end-users. This helped gather a pattern for their culture and what each person thought was a pressing product issue.

The first step was to get a bird’s eye view of the problem space. With all the problems in one place, I could group them and identify the highest leverage issues to solve for to make everything else easier or unnecessary to solve. I set up one-on-ones with people from inside and outside the company including the COO, product managers, engineers, account executives, sales executives and end-users. This helped gather a pattern for their culture and what each person thought was a pressing product issue.

key stats

3 client-facing apps

1 internal permissions manager

Serves 90% of Canadian broadcasters

3 client-facing apps

1 internal permissions manager

Serves 90% of Canadian broadcasters

3 client-facing apps

1 internal permissions manager

Serves 90% of Canadian broadcasters

3 client-facing apps

1 internal permissions manager

Serves 90% of Canadian broadcasters

3 client-facing apps

1 internal permissions manager

Serves 90% of Canadian broadcasters

problems

Operational issues

Operational issues

Operational issues

Operational issues

Operational issues

The back-end engineering team was resistant to front-end work. This was because of fears around work-debt. The features were developed reactively and there were many UI kits in use at once. This made the UX/UI fragmented.

Neglected users

Neglected users

Neglected users

Neglected users

Neglected users

Users ranged from seasoned pros to novices but, there wasn't a unified way of speaking to all audiences. User-testing was rare due to tight release windows.

Miscommunications

Miscommunications

Miscommunications

Miscommunications

Miscommunications

The brand identity and UI was muted in tone. It felt disconnected from their lively business culture. More product documentation work fell on client services.

insight

Use vividness to unite personality and functionality

Use vividness to unite personality and functionality

define

With all the research I conducted, I managed to uncover the patterns and sharpen my focus on solving for operational excellence, user delight and cohesive visual communication. I also noticed I was solving for multiple parties at once. I’ve mapped out the basics of the user and stakeholder personas.

ethos

The Playful Professional

The Playful Professional

The Playful Professional

The Playful Professional

The Playful Professional

demographic

Stakeholders

Stakeholders

Stakeholders

Stakeholders

Stakeholders

Software Engineers

Software Engineers

Software Engineers

Software Engineers

Software Engineers

nlogic Software Engineers wanted something easy to implement and maintain over time. They also wanted something with as little front-end work as possible, at least until they hired a front-end developer to help.

Account Executives

Account Executives

Account Executives

Account Executives

Account Executives

These nlogic professionals work closely with clients to troubleshoot and instruct how to use nlogic products. Client Services needed an app that is easy to understand and use so, they might articulate how best to use the software, if any instruction would be needed afterwards.

Product Managers

Product Managers

Product Managers

Product Managers

Product Managers

The nlogic Product Managers wanted to create a product suite that was cohesive and adhere to product design best practices. They also wanted to create products that harmonized the different departments and ultimately pleased our end-users.

Marketers

Marketers

Marketers

Marketers

Marketers

nlogic Marketers needed guidance on how to align their material to the products.

End-Users

End-Users

End-Users

End-Users

End-Users

Seasoned Buyers & Sellers

Seasoned Buyers & Sellers

Seasoned Buyers & Sellers

Seasoned Buyers & Sellers

Seasoned Buyers & Sellers

There are a series of broadcast professionals spanning TV, Radio, Streaming and Cross-Platform experiences who want software that is intuitive to their understanding of the industry. This includes complex acronyms, jargon and other conventions unique to broadcasters. We also needed make apps that are self-explanatory and instructionally obvious—some users are elder and we found out while user-testing that some users that they did not do well with complex steps or heavy text layouts.

Novice Buyers & Sellers

Novice Buyers & Sellers

Novice Buyers & Sellers

Novice Buyers & Sellers

Novice Buyers & Sellers

On the other end, there are fresh grads and industry newcomers who prefer software that reflect their muscle memory and conventions used with other software they use daily (ex. Gmail). It would be important to create an experience that ignites a desire to create as much as they are expected to produce reports for this demographic.

objectives

Make something simple to build

Ensure apps are easy to maintain

Create a self-communicating UI

Use vividness for UX & UI

Make something simple to build

Ensure apps are easy to maintain

Create a self-communicating UI

Use vividness for UX & UI

Make something simple to build

Ensure apps are easy to maintain

Create a self-communicating UI

Use vividness for UX & UI

Make something simple to build

Ensure apps are easy to maintain

Create a self-communicating UI

Use vividness for UX & UI

Make something simple to build

Ensure apps are easy to maintain

Create a self-communicating UI

Use vividness for UX & UI

design

I revamped the product suite by firstly redesigning Lens, nlogic's flagship product, and solving it's most complex product issues. The legacy version of Lens was full of complexity—there were hidden menus, poor hierarchy and numerous workarounds that added to the user's workflow. I took my time to analyze each page, understand the core functionality and desired user goals and distilled the aim of the product into a new approach. Through various meetings with the stakeholders and users, I was able to distill the essential layouts to the following two layouts.

wireframes

all-products

Users simply wanted to review what they had made, easily create something new and have an straightforward experience while making their reports. Since Lens was the most complex app, these wireframes proved to scale across the majority of nlogic products which made for a highly intuitive experience based on muscle memory and less on instruction. I also used colours to aid in visual instruction. I created a global colour database with over 600 unique colours and would extract a fixed number of colours for product use. I did this across all 4 nlogic products using the same naming conventions. Below is a sample of colours applied to Lens product.

Users simply wanted to review what they had made, easily create something new and have an straightforward experience while making their reports. Since Lens was the most complex app, these wireframes proved to scale across the majority of nlogic products which made for a highly intuitive experience based on muscle memory and less on instruction.

With the layout and breakpoints set up, I was open to explore more granular design elements like colour and type. For the colours, I created a global colour database with over 600 unique colours and would extract a fixed number of colours for product use. I did this across all 4 nlogic products using the same naming conventions. Below is a sample of colours applied to Lens product.

Product Colours

lens (flagship-product)

colour / main / light-mode /

/ focus

/ emphasis-high

/ emphasis-mid

/ emphasis-low

/ border

/ surface

/ surface-button

/ background (bg)

/ bg-modal

/ state-hover

/ state-pressed

/ state-selected

…/ dark-mode /

/ focus

/ emphasis-high

/ emphasis-mid

/ emphasis-low

/ border

/ surface

/ surface-button

/ background (bg)

/ bg-modal

/ state-hover

/ state-pressed

/ state-selected

colour / alert / light-mode /

/ focus

/ emphasis-high

/ emphasis-mid

/ emphasis-low

/ border

/ surface

/ surface-button

/ background (bg)

/ bg-modal

/ state-hover

/ state-pressed

/ state-selected

…/ dark-mode /

/ focus

/ emphasis-high

/ emphasis-mid

/ emphasis-low

/ border

/ surface

/ surface-button

/ background (bg)

/ bg-modal

/ state-hover

/ state-pressed

/ state-selected

typescale

all-products

Head 1

Head 1

Instrument Sans

Semi-bold

64 px

Used as a page or section indicator; also for promotions

Head 2

52 px

Head 3

48 px

Head 4

32 px

Head 5

24 px

Head 6

20 px

Subtitle 1

Medium

16 px

Used as a label or precursor to body-1, in-line text interactions or for promotional purposes

Subtitle 2

14 px

Used as a label or precursor to body-2 or in-line text interactions

Body 1

Regular

16 px

Used for promotional large bodies of text

Body 2

14 px

Used for general large bodies of text

OVERLINE

Medium

12 px

0.25 em kerning

Used for subtext before large bodies of text

Button

Semi-bold

14 px

Used for interactive text within components or independently

Caption

Regular

12 px

Used for subtext after large bodies of text

The colour-picking proved to be efficient across all 4 products (Lens, Conex, RadTracker and nlogic Permissions).

The colour-picking proved to be efficient across all 4 products (Lens, Conex, RadTracker and nlogic Permissions).

The colour-picking proved to be efficient across all 4 products (Lens, Conex, RadTracker and nlogic Permissions).

colour samples

dark-mode & all-products

Component samples

all-products (lens-colours, not-true-size)

buttons-main

buttons-alert

table-tabbed

snackbars

chips

card

tooltip

field

load-indicator

toggle

User flow

log-in → video-planner → report-results

The user logs in through nlogic’s main website and is taken to a single sign-on screen, after which registered users proceed to the Lens dashboard. From there, they click Create New to open a modal and choose an activity—Analyze, Plan, or Track—and in this demo select Plan, then Video Planner, which redirects them to the Video Planner homepage to configure a video-planning report. After reviewing the available options, the user runs the report and sees a loading indicator while it’s generated in the backend. Once complete, the report results populate the page, where the user can expand the workspace by hiding the Summary panel and, if satisfied, export or save the report to access later from the Home dashboard.

The user logs in through nlogic’s main website and is taken to a single sign-on screen, after which registered users proceed to the Lens dashboard. From there, they click Create New to open a modal and choose an activity—Analyze, Plan, or Track—and in this demo select Plan, then Video Planner, which redirects them to the Video Planner homepage to configure a video-planning report. After reviewing the available options, the user runs the report and sees a loading indicator while it’s generated in the backend. Once complete, the report results populate the page, where the user can expand the workspace by hiding the Summary panel and, if satisfied, export or save the report to access later from the Home dashboard.

deliver

Through ongoing user testing, stakeholder feedback and close collaboration with engineering, I iteratively refined the design system and its documentation. This resulted in a robust foundation that made building new solutions faster, easier and more cost-effective.

Results

Outcomes

Shrunk engineering time by 91%

87% satisfied with work collab

60% user-task success rate

Design turn-around = 1-2 days

+1 Front-End Developer hire

+1 launch event

+$XXX,XXX via. Video Planner

Shrunk engineering time by 91%

87% satisfied with work collab

60% user-task success rate

Design turn-around = 1-2 days

+1 Front-End Developer hire

+1 launch event

+$XXX,XXX via. Video Planner

Shrunk engineering time by 91%

87% satisfied with work collab

60% user-task success rate

Design turn-around = 1-2 days

+1 Front-End Developer hire

+1 launch event

+$XXX,XXX via. Video Planner

Shrunk engineering time by 91%

87% satisfied with work collab

60% user-task success rate

Design turn-around = 1-2 days

+1 Front-End Developer hire

+1 launch event

+$XXX,XXX via. Video Planner

Shrunk engineering time by 91%

87% satisfied with work collab

60% user-task success rate

Design turn-around = 1-2 days

+1 Front-End Developer hire

+1 launch event

+$XXX,XXX via. Video Planner

Assets

Design system

Documentation

CreativeOps system

Brand Identity

Design system

Documentation

CreativeOps system

Brand Identity

Design system

Documentation

CreativeOps system

Brand Identity

Design system

Documentation

CreativeOps system

Brand Identity

Design system

Documentation

CreativeOps system

Brand Identity