Selangor FC Logo Selangor FC

(Un)Official Mobile App

Mobile App Sports B2C
Selangor App Mockup

Selangor FC is one of the most successful professional football clubs in Malaysia, representing the state of Selangor Darul Ehsan. Nicknamed the Red Giants, Gergasi Merah, the association was established on 22nd February 1936 when two football entities, Selangor Association Football League (SAFL) and Selangor Football Association (SFA), merged to form a new club. Currently, Selangor FC does not have an official mobile app, managing club news, jersey and merchandise shop, and ticket selling through their official website instead.

Tools
Platform
Role
Duration
Figma
Mobile App
UI/UX Designer
6 Weeks

The Problem

Without an official app, fans are left managing everything through a browser experience that was not built for mobile.

This creates a few problems:

UI experience is not convenient Making a purchase through browser is unsafe Opportunity to propose digital team card

Selangor FC Mobile App proposes feature improvements that help increase the effectiveness of the app and provide users a convenient and better experience while using the app.

Selangor App Mockup

Research Strategy

I conducted a usability testing with a group of Selangor FC fans to uncover problems in the design, discover opportunities to improve the design, and to learn about users behaviour and preferences. The research revealed that the website homepage did not provide the league fixtures and standings information, the website feels not secure when making purchases and also, the whole UI design is not mobile friendly.

Based on the research, I made my design choices based on several goals in mind.

1. REDEFINE

Proposing digital team card as the new main focus of the app

Redefine Mockup

Design Improvement

  • Proposed digital team card as the new main focus of the app
  • Added Anchored Team card button on navigation bar for easy access
  • Introduced digital version of the team card to create user friendly product
  • Added 'Refer a Friend' feature to encourage fans become part of SFC Community

2. REIMAGINE

Proposing a new user experience, different from the website

Redefine Mockup

Design Improvement

  • Proposing a new user experience, Different From the website
  • Change the static hero image to hero slider to maximize product advertisement
  • Added Match Fixtures and Calendar features for practicality
  • Added Customizable and attractive Account page to create enjoyable user experience

3. REDESIGN

Propose new UI outlook with user accessibility in mind

Redefine Mockup

Design Improvement

  • Propose new user interface outlook with user accesibility in mind
  • Centralized store for buying SFC products through mobile app for safety transaction
  • Added Track Order features with real time delivery tracking
  • Categories button designed at the top to create clear userflow

User Flows

The flow of the app is relatively unchanged to retain familiarity. However, several features are added to ease the overall workflow of the app.

Selangor App User Flows

Design System

A consistent set of components, colors, and typography built to keep the app cohesive across every screen.

Selangor App Design System

Design Comparison

The most important parts — the problem of each page from previous designs, and my proposed design solutions. Only some pages are shown as they have more distinct differences.

Selangor App Design Comparison

Key Takeaways

The development and implementation of Selangor FC mobile app marks a significant stride towards enhancing fan engagement, fostering a sense of community, and expanding the club's digital presence.

Through this platform, fans can access exclusive content, stay updated on the latest news, purchase tickets conveniently, and interact with fellow supporters, players, and the club management.

Selangor FC all screens
Back to top
Say Hi