STC - Telcom

Stc is a leading telecom and technology service provider. They partnered with frog (the company I used to work for) to redesign and implement the entire ecosystem of web and mobile apps. Which was done by creating a whole new Design Language System (DLS).

Client

STC

Project date

2021

Project Link

Objectives

The newly desigend DLS needed to be translated into code and implemented across three different touchpoints. A mobile app and two websites (one B2B and one B2C). To do so we created an extra react component library.

My role

In a team made mostly of contractors, I was the only in house front-end developer working on the websites. As such I was in charge of enforcing best practices, writing code and code reviews, and be the link between developers and designers.

Architecture

The mobile app and the websites were built in a monorepo using respectively react native and react.js so that they could share most of the logic, hooks, state management, types, epics etc..

In order to also share the components across the websites we built a component library using React and Storybook.

Each one of the two website is divided into two main sections/micro frontends: a brochure section and a dashboard section. The first one is almost entirely stateless, backend driven, and server side rendered. The dashboard is the section of the website where the user can interact with STC services and is client side rendered.

Stack

React

Redux

SCSS

Storybook

Typescript

i18n

MoreProjects

Fishing Prediction Maps

React

Mapbox

Data-Visualization

PWA

Frogdesign

Implementing the new design with Next.js, Wordpress and a lot of animations.

Knots Analytics

Design & development - using Next.js and Figma.

Face Blurring Tool

Uses face recognition to detect faces in pictures and blurs them. Built as a tool for design research.

RGB Color Displacement

A starter project for React Three Fiber and Gatsby