Company E logo

2018-2019 Dev Handoff

3 Geo React Global Design System

Description Native Apps | eComm/SAAS | BtoB/C

Enabled a complete react global design system that would be leveraged by Tolino (Europe), Kobo (North America +) and Kobo 日本 (Japan). The system would driven by design patterns that would be the source of truth for the eReading domain, and enable 3 main objectives: 1 Dev Velocity, 2 Costs of Build, 3 Consistient CSAT & UX, to enable 30M eCommerce users, 6M eBooks, in 77 Languages, and 190 Countries.

Kyle Keele’s Role: Head of Design, partnering with: All Global Teams

  • Company Goal
    1. Increase development velocity by sharing code across multiple platforms and reducing technical debt
    2. Decrease total cost of ownership for Rakuten by reducing duplication across similar businesses by increasing the usage of components developed by any team
    3. Increase customer satisfaction and product performance by streamlining and optimizing key user interfaces using best practices and patterns
  • My Approach

    Across all geographies, jobs to be done were leveraged and compiled. We were able to address Japan and Germany’s use cases within a source of truth:

    1. Align on the Journeys & JTBDs
    2. UX Design the pattern that solves the users job and aligned by all Geos
    3. Identify configs and variants
    4. Create a white label pattern library
    5. Build in React across Native and Web Repositories sharing source, but enabling provisioning per Geo
  • Org Mindset Shift
    • "We are more similar, then we are different"
    • “Domain driven design enables shared capabilities, features, and learnings to scale our offerings”
    • “Scale learnings: Audio and subscriptions can be shared with Japan, and manga to the rest of the world.”
    • “Acceptance Criteria may be unique per geo, underlying code and UX can be shared”

1 - Dev Framework Aligned

Anders brand wordmark in white placed on top of an image of a modern interior design.

2 - Platform> Capabilities> Feature Configs> Geo App

Anders brand wordmark in white placed on top of an image of a modern interior design.

3 - Design Team by Journeys

Anders brand wordmark in white placed on top of an image of a modern interior design.

5 - System Design Components Aligned

Anders brand wordmark in white placed on top of an image of a modern interior design.

4 - JTBDs Aligned to Journeys and Geos

Anders brand wordmark in white placed on top of an image of a modern interior design.

6 - Screen Configs and Variants Aligned

Anders brand wordmark in white placed on top of an image of a modern interior design.

3 Geos

Japan, Germany, Toronto united

100%

Provisionable to each Geo

1 Source

Global Design System w/ Market Congifs

KYLE KEELE.🍁

20+ Years Experience UX and User Research Leader

3 Geos

Japan, Germany, Toronto united

100%

Provisionable to each Geo

1 Source

Global Design System w/ Market Congifs

Company E logo

2018-2019 Dev Handoff

3 Geo React Global Design System

Description Native Apps | eComm/SAAS | BtoB/C

Enabled a complete react global design system that would be leveraged by Tolino (Europe), Kobo (North America +) and Kobo 日本 (Japan). The system would driven by design patterns that would be the source of truth for the eReading domain, and enable 3 main objectives: 1 Dev Velocity, 2 Costs of Build, 3 Consistient CSAT & UX, to enable 30M eCommerce users, 6M eBooks, in 77 Languages, and 190 Countries.

Kyle Keele’s Role: Head of Design, partnering with: All Global Teams

  • Company Goal
    1. Increase development velocity by sharing code across multiple platforms and reducing technical debt
    2. Decrease total cost of ownership for Rakuten by reducing duplication across similar businesses by increasing the usage of components developed by any team
    3. Increase customer satisfaction and product performance by streamlining and optimizing key user interfaces using best practices and patterns
  • My Approach

    Across all geographies, jobs to be done were leveraged and compiled. We were able to address Japan and Germany’s use cases within a source of truth:

    1. Align on the Journeys & JTBDs
    2. UX Design the pattern that solves the users job and aligned by all Geos
    3. Identify configs and variants
    4. Create a white label pattern library
    5. Build in React across Native and Web Repositories sharing source, but enabling provisioning per Geo
  • Org Mindset Shift
    • "We are more similar, then we are different"
    • “Domain driven design enables shared capabilities, features, and learnings to scale our offerings”
    • “Scale learnings: Audio and subscriptions can be shared with Japan, and manga to the rest of the world.”
    • “Acceptance Criteria may be unique per geo, underlying code and UX can be shared”

1 - Dev Framework Aligned

Anders brand wordmark in white placed on top of an image of a modern interior design.

2 - Platform> Capabilities> Feature Configs> Geo App

Anders brand wordmark in white placed on top of an image of a modern interior design.

3 - Design Team by Journeys

Anders brand wordmark in white placed on top of an image of a modern interior design.

4 - JTBDs Aligned to Journeys and Geos

Anders brand wordmark in white placed on top of an image of a modern interior design.

5 - System Design Components Aligned

Anders brand wordmark in white placed on top of an image of a modern interior design.

6 - Screen Configs and Variants Aligned

Anders brand wordmark in white placed on top of an image of a modern interior design.

3 Geos

Japan, Germany, Toronto united

100%

Provisionable to each Geo

1 Source

Global Design System w/ Market Congifs

Company E logo

2018-2019 Dev Handoff

3 Geo React Global Design System

Description Native Apps | eComm/SAAS | BtoB/C

Enabled a complete react global design system that would be leveraged by Tolino (Europe), Kobo (North America +) and Kobo 日本 (Japan). The system would driven by design patterns that would be the source of truth for the eReading domain, and enable 3 main objectives: 1 Dev Velocity, 2 Costs of Build, 3 Consistient CSAT & UX, to enable 30M eCommerce users, 6M eBooks, in 77 Languages, and 190 Countries.

Kyle Keele’s Role: Head of Design, partnering with: All Global Teams

  • Company Goal
    1. Increase development velocity by sharing code across multiple platforms and reducing technical debt
    2. Decrease total cost of ownership for Rakuten by reducing duplication across similar businesses by increasing the usage of components developed by any team
    3. Increase customer satisfaction and product performance by streamlining and optimizing key user interfaces using best practices and patterns
  • My Approach

    Across all geographies, jobs to be done were leveraged and compiled. We were able to address Japan and Germany’s use cases within a source of truth:

    1. Align on the Journeys & JTBDs
    2. UX Design the pattern that solves the users job and aligned by all Geos
    3. Identify configs and variants
    4. Create a white label pattern library
    5. Build in React across Native and Web Repositories sharing source, but enabling provisioning per Geo
  • Org Mindset Shift
    • "We are more similar, then we are different"
    • “Domain driven design enables shared capabilities, features, and learnings to scale our offerings”
    • “Scale learnings: Audio and subscriptions can be shared with Japan, and manga to the rest of the world.”
    • “Acceptance Criteria may be unique per geo, underlying code and UX can be shared”

1 - Dev Framework Aligned

Anders brand wordmark in white placed on top of an image of a modern interior design.

2 - Platform> Capabilities> Feature Configs> Geo App

Anders brand wordmark in white placed on top of an image of a modern interior design.

3 - Design Team by Journeys

Anders brand wordmark in white placed on top of an image of a modern interior design.

4 - JTBDs Aligned to Journeys and Geos

Anders brand wordmark in white placed on top of an image of a modern interior design.

5 - System Design Components Aligned

Anders brand wordmark in white placed on top of an image of a modern interior design.

6 - Screen Configs and Variants Aligned

Anders brand wordmark in white placed on top of an image of a modern interior design.