ABOUT

INDIAN SUPER LEAGUE is one of the leading brands in the football game. It’s a redesign of responsive UI on desktop, mobile.Briefing: Concept and reimagining the UI of the existing site. In terms of User Experience Design, like; usability, functionality, hierarchy of design element and content. Providing the engaging and highly personalized best stort solutions in the suggested new interface design.Design Problem in the Existing Site:Top Menu: The brand has two versions of the logo, one has white and another has blue background in the exsiting site. The colour of the logo is not properly established on the blue background. Using a white background colour might be easy for the user to differentiate or establish the logo.Font: The typeface is not appealing, engaging and not readable.Masthead Carousel Banner: Image showcasing is not appealing. The chart should not come with the carousel banner itself.Content Harrier key: This is a sport brand website, users expect to view the information of the football game. The existing site doesn’t have any engaging user experience where user can personalize the content.UI Concept: The challenge is to create the best user experience in this design amongst other competitors. The design is very simple and smart it has the football experience which is engaging to the users. The image gallery and match information provides a sport design experience to the end users.Using the brand colour throughout the design establishes the brand personality. Creating a lot of negative space and maintaining the hierarchy of content so the design could look like a highly professional sport brand. To make better visibility of the content, black text is used on the white background as per the best accessibility guidelines.The heading typeface is Roboto Bold which is a Sans Serif font. It has a very classy and personalized character which is engaging to the users. Roboto font family is used in the body content. This particular typeface has good line height and a wide character which provides better readability.Tools: The UI design is created in Figma, it is an advanced level of Figma by creating the component library and variant to complete the design. Creating text styles and colour styles in the component library as well. As per the image editing part Photoshop and Illustrator is used.Note: In some places, other player images are used due to the unavailability of proper images.
Style Guide:
Mockups on The Desktop View:
UI / Visual Design on The Desktop View
Mockups on The Mobile View
UI / Visual Design on The Mobile View