Add Your Heading Text Here

A mesmerizing scenery of green  mountains with cloudy sky background

Services​

UI/UX Design 
Visual Identity

Designer

Tooba Naeem

Role

Creative Director

Project Overview

Islamabad United, one of the top franchises in the Pakistan Super League (PSL), sought to strengthen their digital presence by creating a comprehensive website. Known for their dynamic fan base and strong team identity, Islamabad United aimed to provide fans with an engaging platform to access player profiles, stay updated with the latest news, and conveniently purchase official team merchandise. The new digital hub was designed to enhance fan interaction and reinforce the team’s brand, positioning Islamabad United as a leader both on and off the field.

The Challenge

Problem Statement

Despite having a dedicated fan base, Islamabad United lacked a centralized online platform to interact with fans effectively. Fans struggled to find reliable sources for player statistics, team news, and official merchandise. Additionally, there was a need to enhance fan engagement and loyalty by providing exclusive content and membership benefits.

Objective

To design a user-friendly, interactive website for Islamabad United that strengthens fan engagement, provides easy access to player and team information, enables merchandise sales, and fosters a sense of community through exclusive content and membership programs.

The Solution

Add Your Heading Text Here

The solution involved designing a user-friendly website for Islamabad United, featuring player profiles, a real-time news section, and an online store for official merchandise. A membership program provides exclusive benefits, while responsive design and social media integration foster a vibrant fan community, enhancing overall engagement and loyalty.

Competitive Analysis

Empathize

Research​

Competitive Market Analysis

Started by mapping out the digital landscape of other PSL teams, not just to see what was already out there, but to identify where Islamabad United could lead. Most team websites offered basic match updates and player info, but lacked intuitive structure, mobile responsiveness, and features that truly centered around fan engagement.
Winning teams showed strong branding, yet their platforms offered little beyond surface-level content. There was a clear gap, no team had created a seamless, exclusive, and emotionally engaging digital experience for fans.

Insight:
This analysis revealed a clear opportunity for Islamabad United to differentiate through a well-structured, mobile-optimized platform that delivers exclusive content, a smooth shopping experience, and builds a stronger, more connected fan community.

User Interviews

Key Focus

The research phase focused on understanding how fans interact with the Islamabad United website and identifying areas for improvement in usability, content, and engagement. The interview framework was developed through multiple iterations to ensure clarity and alignment with key research goals.

Areas to explore 

What do you like most about the Islamabad United website?

What drives repeat visits and long-term engagement?

What challenges prevent fans from fully utilizing the platform?

How does the website influence users’ emotional connection with the team?

Survey Questions included 

What do you like most about the Islamabad United website?

How often do you visit the site, and for what purposes?

What challenges have you faced while using the website?

How does the site impact your connection to the team?

Findings

Uncovering Core Needs

These interviews revealed valuable insights into both functional issues, such as inconsistent mobile performance and limited merchandise options, and emotional drivers, including the desire for exclusivity, team closeness, and a stronger sense of community. The findings provided a solid foundation for a fan-first redesign grounded in user needs and expectations.

User Personas

Fans wanted more than just updates, they were looking for content that made them feel closer to the team, such as behind-the-scenes footage, player moments, and interactive media.

Users expressed clear interest in buying team kits and branded gear, but the absence of an official merchandise store left them relying on third-party platforms or unverified sellers.

Interviews revealed that fans craved a sense of belonging, wanting to support Islamabad United beyond watching matches.

Navigation and performance on mobile devices were inconsistent, users had trouble locating key information such as match schedules, player stats, or news updates

Findings

Project Goals

To align user needs with business objectives, the Venn diagram served as a strategic checkpoint. It clarified the shared goals and ensured the design direction remained focused throughout the process.

For Islamabad United, both the fans and the franchise aimed for a deeper connection—through exclusive content, a smooth mobile experience, and stronger engagement. The alignment around a merchandise store, a loyalty program, and mobile-first access formed the foundation of the design. As long as the final product delivers on these shared goals, both fan satisfaction and business success are achieved.

Ideation

Turning Pain Points into Features

Information Architecture

To align my solution with user needs, I first created a site map to ensure seamless navigation. I then designed user flows that prioritized quick, intuitive access to personalized support, based on key research insights

A mesmerizing scenery of green  mountains with cloudy sky background

Design

Low-Fidelity Wireframe

After defining core user flows, I sketched key screens to visualize interactions, prioritizing a clean, accessible design to reduce cognitive load. Given the app’s sensitive nature, the goal was to minimize friction and ensure quick access to support.

Design

Visual Elements that Drive the Solution

The app’s branding was designed to be serene, empowering and elegant, with a colour palette and typography that evokes warmth, inclusivity and natural beauty. The imagery and messaging focus on wellness, cultural pride and self-care, aligning with the app’s mission.

Color Palette: A rich, earthy palette with muted tones of black, deep olive green, warm mustard yellow, soft peach and light cream. The colours convey warmth, elegance and inclusivity. These tones feel natural and calming, aligning with the concept of self-care and beauty rooted in nature.

Typography: P22 Mackinac is used for headings, which adds a sense of sophistication with its elegant serif style. Instrument Sans is used for body text, providing a clean and modern contrast. The mix of serif and sans-serif adds balance between tradition and modernity, reinforcing a brand that is both traditional and modern.

Moodboard: The moodboard imagery portrays powerful black women in natural settings and poses, with the messaging centered on wellness, self-care and rewriting narratives of beauty and wellbeing. The photos exude confidence, elegance and natural beauty, aligning with the app’s mission to empower women to embrace their natural hair.

A mesmerizing scenery of green  mountains with cloudy sky background

Design

High-Fidelity Wireframe

After defining core user flows, I sketched key screens to visualize interactions, prioritizing a clean, accessible design to reduce cognitive load. Given the app’s sensitive nature, the goal was to minimize friction and ensure quick access to support.

Usability Testing

Refining for Maximum Impact

I conducted unmoderated usability testing with five users. They were presented with two scenarios; completing the onboarding process and creating a personalised hair regimen.



Scenario 1: You’ve just downloaded the app. Go through the onboarding process and enter basic information about your hair.



Scenario 2: You want to create a personalized hair regimen. Access the custom regimen builder and follow the steps to complete a regimen.

Metrics to track

Time on Task, how long it takes for users to complete each task.

Success Rate, whether users can complete each task successfully without assistance.

Error Rate, record any errors or difficulties users experience during the process.

Satisfaction, use a post-task questionnaire to gauge user satisfaction for each task.

Ease of Use, ask participants to rate how easy or difficult the tasks were on a scale from 1 to 5.

Results

A mesmerizing scenery of green  mountains with cloudy sky background

User Feedback:

Fans wanted more than just updates, they were looking for content that made them feel closer to the team, such as behind-the-scenes footage, player moments, and interactive media.

Users expressed clear interest in buying team kits and branded gear, but the absence of an official merchandise store left them relying on third-party platforms or unverified sellers.

Interviews revealed that fans craved a sense of belonging, wanting to support Islamabad United beyond watching matches.

Navigation and performance on mobile devices were inconsistent, users had trouble locating key information such as match schedules, player stats, or news updates

Usability Testing

Refining for Maximum Impact

I conducted unmoderated usability testing with five users. They were presented with two scenarios; completing the onboarding process and creating a personalised hair regimen.



Scenario 1: You’ve just downloaded the app. Go through the onboarding process and enter basic information about your hair.



Scenario 2: You want to create a personalized hair regimen. Access the custom regimen builder and follow the steps to complete a regimen.

Metrics to track

Time on Task, how long it takes for users to complete each task.

Success Rate, whether users can complete each task successfully without assistance.

Error Rate, record any errors or difficulties users experience during the process.

Satisfaction, use a post-task questionnaire to gauge user satisfaction for each task.

Ease of Use, ask participants to rate how easy or difficult the tasks were on a scale from 1 to 5.

Tell us what you're building

We’d love to hear about it. Share a little about your idea, your goals, and what you need. Let’s create something meaningful together.

```