FROG DESIGN
FROG DESIGN
FROG DESIGN
(2022)
(2022)
(2022)
Empowering Customers through a Best-in-Class Companion Experience
Discover ↓
Building a company wide design language system (DLS) to support stc’s massive rebranding effort
ABOUT
Saudi Telecom Company (STC) is the leading provider of telecommunications services in the Kingdom of Saudi Arabia and it is among the largest operators in the Middle East. The company provides mobile and fixed telephone services, along with Internet and other data services, to residential and business customers.
Saudi Telecom Company (STC) is the leading provider of telecommunications services in the Kingdom of Saudi Arabia and it is among the largest operators in the Middle East. The company provides mobile and fixed telephone services, along with Internet and other data services, to residential and business customers.
JOURNEY SO FAR
Frog’s collaboration with stc started 3 years back, from phase 1 where we did a complete brand and app redesign for the product. We are currently in phase 3 of the product, where we are introducing new features to existing product, we have also introduced new interfaces in this phase such as kiosk machine alongside app and web for some flows.
Frog’s collaboration with stc started 3 years back, from phase 1 where we did a complete brand and app redesign for the product. We are currently in phase 3 of the product, where we are introducing new features to existing product, we have also introduced new interfaces in this phase such as kiosk machine alongside app and web for some flows.
PHASE 3
Introduction of new features and
enhancement of existing features
Introduction of new features and
enhancement of existing features
THE TEAM (7)
Abhigyan Gupta (Interaction Designer)
Basil Jose(Lead Designer)
Sunaina Rastogi (Visual Designer)
Pooja (Visual Designer)
Mohit Gupta (Sr. Program Manager)
Guido Parlato (Design Director)
Lynn Dika (RTL/Arabic Designer)
Abhigyan Gupta (Interaction Designer)
Basil Jose(Lead Designer)
Sunaina Rastogi (Visual Designer)
Pooja (Visual Designer)
Mohit Gupta (Sr. Program Manager)
Guido Parlato (Design Director)
Lynn Dika (RTL/Arabic Designer)
MY ROLE
To lead and maintain DLS for app and web application. Ensure consistency is maintained across systems.
To lead and maintain DLS for app and web application. Ensure consistency is maintained across systems.
Workflow (Old)
Phase 1 & 2
Phase 1 & 2
Workflow (NEW)
Phase 3. Due to Covid, remote working became a new norm and figma was the best tool for remote design collaboration.
Phase 3. Due to Covid, remote working became a new norm and figma was the best tool for remote design collaboration.
Workflow (NEW)
Internal Design workflow and responsibilities
Internal Design workflow and responsibilities
The DLS
stc’s design library practice has been one of the key success factors for the project to be run with tight timelines and constraints over a long period of time.
The libraries were built during phase one of the project which has carried over till phase 3 ensuring design consistency and adherence to the design language system.
stc’s design library practice has been one of the key success factors for the project to be run with tight timelines and constraints over a long period of time.
The libraries were built during phase one of the project which has carried over till phase 3 ensuring design consistency and adherence to the design language system.
PROBLEM STATEMENT
To Craft a system of branded screens, components, behaviors and interactions following atomic design principles, helping to reinforce the new STC brand vision across ecosystem touchpoints.
To Craft a system of branded screens, components, behaviors and interactions following atomic design principles, helping to reinforce the new STC brand vision across ecosystem touchpoints.
PROBLEM STATEMENT
We took a systemic approach to design the experience, utilizing an Atomic Design approach to best use time/effort during design sprints.
We took a systemic approach to design the experience, utilizing an Atomic Design approach to best use time/effort during design sprints.
COMPONENTS
Smaller elements are group in context to related features and relevant compound components.
Smaller elements are group in context to related features and relevant compound components.
Templates & Pages (Signatures)
Components are assembled into re-usable templates and pages; following hierarchies that reinforce experience principles and key features.
Components are assembled into re-usable templates and pages; following hierarchies that reinforce experience principles and key features.
ALL PURRPOSE DESIGN SYSTEM
The Challenges
Since the project has been going for more than 3+ years, through different phases and teams, we had a huge library in place. With every phase of the project the library was getting more complex to maintain and work with.
Since the project has been going for more than 3+ years, through different phases and teams, we had a huge library in place. With every phase of the project the library was getting more complex to maintain and work with.
KEY PAIN POINTS
Library too big to maintain
Consistency issue over time due to shift in teams during different phases
Multiple copies of sketch files, hard to identify and mantain
Teams unable to find/use correct components, slows down the process
Library too big to maintain
Consistency issue over time due to shift in teams during different phases
Multiple copies of sketch files, hard to identify and mantain
Teams unable to find/use correct components, slows down the process
SOLUTIONS
Document the modifications
Set up naming conventions, modify style guide
Migrate to figma for better collaboration
Make a single source of truth (Figma file + Confluence)
Document the modifications
Set up naming conventions, modify style guide
Migrate to figma for better collaboration
Make a single source of truth (Figma file + Confluence)
Implementation
When we initially migrated from sketch to figma, we had to recreate components from scratch.
When we initially migrated from sketch to figma, we had to recreate components from scratch.
New tools were fully utilised to scale down the library. With the help of Autolayout and Variants, we were able to reduce redundancy across component levels.
The team was quick to adopt this practice. Additionally we also maintained a library log to make note of changes or modifications in the library.
New tools were fully utilised to scale down the library. With the help of Autolayout and Variants, we were able to reduce redundancy across component levels.
The team was quick to adopt this practice. Additionally we also maintained a library log to make note of changes or modifications in the library.
We were the first project within frog to implement library practice at such huge scale and we have seen the impact it had on speeding up our workflow.
We were the first project within frog to implement library practice at such huge scale and we have seen the impact it had on speeding up our workflow.
PROGRAM OUTCOMES
Program outcomes for this project
Program outcomes for this project
+53%
+53%
APP STORE DOWNLOADS
APP STORE DOWNLOADS
Increase in downloads of the MySTC app across regions has increased significantly.
Increase in downloads of the MySTC app across regions has increased significantly.
2
2
DESIGN AWARDS
DESIGN AWARDS
frog has been co-awarded 2 design transformation awards together with Interbrand (our brand partner on the account)
frog has been co-awarded 2 design transformation awards together with Interbrand (our brand partner on the account)
12
12
MONTHS/ TIME TO MARKET
MONTHS/ TIME TO MARKET
The team has moved across two regions with a general velocity of 12 months from initiation to market launch; working hand in hand with stc.
The team has moved across two regions with a general velocity of 12 months from initiation to market launch; working hand in hand with stc.
