UI/UX Design
Visual Identity
Tooba Naeem
Creative Director
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
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.
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 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.
Empathize
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
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
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.
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
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
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
Design
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
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.
Design
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
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.
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
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.
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.
Too Design is a creative studio creating distinctive brands, digital experiences, and ideas with personality.
Too Design is a creative studio creating distinctive brands, digital experiences and ideas with personality
© 2026 Too Design Us | All Right Reserved
Tell me which world you're in, and I'll send you the right questions — the more specific the ask, the more tailored your proposal.