Previously Solved Problem

@antwansherif

Senior Software Engineer @Shore

@antwansherif

Antwan Sherif

Store on the Go

Digitalizing Vodafone Retails Services

Store on the Go

Digitalizing Vodafone Retails Services

R10

Overview

Overview

Provide self-services to Vodafone customers

where they can manage their account(s) as well as search, display,  compare and select products and services and add them to basket

Objectives

  • Customers have all the information they need to reach a buying decision
  • Customers can search, filter and sort all products/services according to their preference as well as eligibility.
  • Increase sales conversion and provide opportunity to cross-sell related products (insurance, accessories)
  • Promote Vodafone seasonal offers (promotion/ discounts) as part of the selection process.

Build a product selector where users can browse, compare and add products and services to basket

MVP

  • Pilot Market: Vodafone Turkey
     
  • Supported Devices: Tablets, PCs

MVP

Dev & Product Team

_VOIS

Architecture/ Product Management/ Marketing

Vodafone Group

Pilot Market

Vodafone TR

Stakeholders

Group

Team Structure

Dev Product Owner Scrum Master QA

          Backend Dev

          Frontend Dev
 

 
Delivery Manager

R10 Squad

0

Planning

0

Research into the integration model with local markets

1

Technical Kick-off

3

Public Rollout in all Vodafone Turkey Stores

2

First successful integration

4

Next phase(s)...

Milestones

Planning phase included the following activities:

  • Top-level features refinement
  • Features t-shirt sizing
  • Determine MVP scope

Planning

0

Planning

0

Research into the integration model with local markets

1

Technical Kick-off

3

Public Rollout in all Vodafone Turkey Stores

2

First successful integration

4

Next phase(s)...

Milestones

Separate Apps
 

Navigate back & forth between the 2 apps.

1.

2.

Micro-FEs Approach
 

Use a MFE solution

3.

Componentization
 

Turn our app into a web- component/ alternatives then use inside host app.

How to Integrate with the

Host App

3.

Componentization
 

Turn our app into a web- component/ alternatives then use inside host app.

Winner

# Integration model
# Integration model

Embedded App POC

POC code & demo on GitHub

Web Components

  • Not natively supported in all browsers.
  • Probably not compatible with Angular 4
  • More targeted to components rather than fully fledged apps

1.

2.

angular-react package

  • App is bundled as npm package
  • Preserves routing, state management, static assets, etc.
# Integration model

Integration Steps

In Host App

  1. Configure .npmrc to refer to our nexus registry
  2. Install the package (a specific version)
  3. Configure routing
  4. Import our styles
  5. Render the component with the expected props (e.g., msisdn, etc.)
  6. Configure angular.json to read our static assets (e.g., images/
    logos) from node_modules

0

Planning

0

Research into the integration model with local markets

1

Technical Kick-off

3

Public Rollout in all Vodafone Turkey Stores

2

First successful integration

4

Next phase(s)...

Milestones

Technical Kick-off

  • React
  • Redux
    • redux saga VS redux observable
  • react-intl
  • Material UI VS Semantic UI
  • jest, Enzyme & Cypress
  • ... others

Technologies to use:

Team Structure

# Technical Kick-off
Dev Product Owner Scrum Master QA
          Technical Lead

          2 Backend Devs

          4 Frontend Devs

          2 Infra-structure
 		          

 
Delivery Manager

R10 Squad

Testing Manager

3 Manual Testers


1 Automated Tester

My Role

& Contributions

  • Point of contact between _VOIS and VF Turkey dev teams
  • Involvement with stakeholders from VF Group and _VOIS in business visits, slides preparation, status checks, etc

Communication
with stakeholders: 

# Role/ Contributions
  • Feasibility checks
  • Implement POCs
  • Technical Refinement and gap analysis
  • Alignment with UI/UX team
  • Participate in PI Plannings

Participate in Discovery activities:

# Role/ Contributions
  • Technical breakdown
  • Estimates
  • Discuss high-level test scenarios with QA

Participate in Planning activities:

# Role/ Contributions
  • Work on difficult tasks
  • Code reviews
  • Incidents debugging
  • Build own component library
  • Improve tests
  • Documentation

Participate in Development activities:

# Role/ Contributions
  • On-board new team members
  • Pair-programming
  • Encourage others to speak up and engage in technical decisions.

Supporting the team:

# Role/ Contributions

Development Lifecycle

  1. Pick a task to work on (from the sprint/cycle backlog)
  2. Open a PR. Ask for reviews.
  3. After merging, the CD pipeline does the following:
    • ​Publish a new version of the package to Nexus
    • Deploy to ST and SIT environments
  4. After manual, automated and UAT testing passes, communicate
    with VF Turkey to start the E2E testing on their side.

Challenges

People Challenges

Tech Challenges

People Challenges

# Challenges
  • Tech lead doesn't have FE background
  • Some team members coming from Node.js and Angular backgrounds
  • Poor quality

Tech Challenges

  • Random bugs that result from the integration with the host app
  • Managing feature flags per market
  • Some UI bugs occurs only on tablets
  • Conflicting styles
  • Complex data model (TMF)
# Challenges

0

Planning

0

Research into the integration model with local markets

1

Technical Kick-off

3

Public Rollout in all Vodafone Turkey Stores

2

First successful integration

4

Next phase(s)...

Milestones

First Successful Launch

0

Planning

0

Research into the integration model with local markets

1

Technical Kick-off

3

Public Rollout in all Vodafone Turkey Stores

2

First successful integration

4

Next phase(s)...

Milestones

Public Rollout in Turkey

The app rolled-out and have been used in all VF Turkey Stores

(~5000 store)

0

Planning

0

Research into the integration model with local markets

1

Technical Kick-off

3

Public Rollout in all Vodafone Turkey Stores

2

First successful integration

4

Next phase(s)...

Milestones

Next Phase(s)

  • Integration with VF Spain
  • Build (and use) the App Framework

Acheivements

  • Recognized as React SME
  • Recognized as a Top Performer Employee
  • Involvement in business & technical decisions

Acheivements

  • Recognized as React SME
  • Recognized as a Top Performer Employee
  • Involvement in business & technical decisions

Lessons Learned

Things I'll do differently

Integrate with storybook early enough

Use state management solutions like react-query​

Use TypeScript

Rotation across features development

Maintain a decisions record

Made with Slides.com