Logo Arieff H.
Selangor FC Logo SELANGOR FC

(Un)Official Mobile App

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

Introduction

Selangor FC is one of the most successful professional football club in Malaysia, representing the state of Selangor Darul Ehsan. Nicknamed as 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 did not have an official mobile app as they managed their club news, jersey and merchandise shop, and also ticket selling through their official website.

Issues

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

Goals

Selangor FC Mobile App propose feature improvements that help increase the effectiveness of the app and provide the 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 Mockup

Design System

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 Mockup

Design Comparison

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

Selangor App Mockup

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 App Mockup