top of page

Goal Design System

Brief

Outdated look of the apps/websites.

Users moving to competitor products for better user experience

and more modern user interface.

​

Solution

Alongside with the creative design team we have underwent a

re-branding and a re-fresh. That included building a whole Design System from scratch.

​

Choosing new colour palletes, fonts (for 20 different language editions, including Arabic, Chinese, Thai...), new grid, dark/ligh mode and creating new components for web and apps.

​

Due to the research we have also merged two older apps (Goal News and Goal Live Scores) into one Goal app that allows users to check both news and scores (with no need to switch between two).

Image by Connor Coyne

Process

Leading the creation of the design system based on the new branding. (grid, layout, componetns, typography, etc.)

Bringing two separate apps (News and Scores) into one unfied app.

Creating branding for all our products (other apps and websites).

About

Design system

  • an interesting method of communication between designers, developers, and the entire product team

  • a combination of a UI library, components, patterns, guidelines and good practices

  • dynamic and due to evolve

  • the way to align everyone

  • the representative of a coherent UI, UX and ergonomics that will be respected by all

  • the representative of accessibility, affordance and consistency

  • a mean to unify the experience to represent the brand

  • a source of truth for the brand

Methodology

  • Study and research other similar platforms and what components they use (such as football club logos or country flags)

  • Create colour and font guidelines for all screen sizes/ countries and editions​

  • Create grids for responsive designs

  • Build components and enhancements in Figma

    • Build components, states, and behaviour

    • Facilitate sessions with UX team

      • Review/ validate changes

      • Ideate on most complex components

  • Build guidelines and good practices (UX/UA)

  • Build patterns: ways of using the components together

  • Focus on accesibility

  • Communication with tech teams - devs and product managers

Frame 427319775.png
bottom of page