Context & Initiative
Business Context
The Sports Connect Admin Landing Page serves as the primary entry point for users who monitor and manage their clubs. The primary objective was to immediately present users with key metrics and insights so they could understand their club's strengths and areas for improvement. Delivering this critical information at a glance was essential for an effective admin experience.
Initiative
- Design wireframes and prototypes for the Admin Landing Page with a focus on critical information at a glance
- Present users with key metrics and insights to help them understand their club's strengths and areas for improvement
- Enable users to customize their dashboard so they could view the most relevant information
- Enhance navigation and efficiency by linking dashboard elements directly to their respective pages
My Role
I designed the wireframes and prototypes for the Admin Landing Page, from layout and component structure through to a comprehensive prototype in Adobe XD, adhering to Material Design guidelines and a 4px grid system, and applying Sports Connect branding for a cohesive platform experience.
Discovery
Landscape
Admin users need to monitor and manage their clubs effectively. That requires immediate access to key metrics and insights so they can see strengths and areas for improvement without digging through multiple screens. The landing page had to support both at-a-glance understanding and efficient navigation to deeper content.
Research & Data Inputs
The design was driven by the stated objective of presenting key metrics and insights at a glance and by user-centered design principles. Users needed the ability to tailor their view to the most relevant information, which informed the decision to use a customizable card layout with a card library.
User Segments
- Club administrators: Users who monitor and manage their clubs and need key metrics, insights, and quick access to related pages
Problem Definition
Admin users needed a landing page that delivered critical information at a glance (key metrics and insights to understand their club's strengths and areas for improvement) without requiring them to navigate multiple screens first. They also needed the flexibility to tailor their view to the most relevant information and to move quickly from the dashboard to detailed pages. The solution had to support both clarity and efficiency while maintaining consistency across the platform.
Process & Rationale
Approach
- Define objective: Focus the landing page on delivering critical information at a glance
- Card layout and customization: Employ a card layout so users could add or remove cards from a library
- Cards as shortcuts: Design each card to function as a shortcut linking directly to its respective page
- Prototype and standards: Build a comprehensive prototype in Adobe XD with Material Design guidelines and a 4px grid
- Branding: Apply Sports Connect branding for a cohesive look and feel
Solution
The solution was a customizable, card-based admin landing page that delivers critical information at a glance. Users see key metrics and insights in card format and can add or remove cards from a library to tailor their view. Each card also acts as a shortcut to its respective page, supporting both at-a-glance understanding and efficient navigation.
The prototype was created in Adobe XD, following Material Design guidelines and a 4px grid system to ensure consistency, alignment, and a clean visual structure. Sports Connect branding was incorporated for a cohesive platform experience.
Key Design Decisions
Card Layout with Library
A card layout allowed users to customize their dashboard by adding or removing cards from a library, so each user could display the most relevant information for their needs.
Cards as Shortcuts
Each card links directly to its respective page, turning the landing page into a hub for both insight and navigation.
Material Design & 4px Grid
Adhering to Material Design and a 4px grid in Adobe XD ensured consistency, alignment, and a clean visual structure across the admin experience.
Validation & Iteration
The design was guided by user-centered design principles and by the objective of delivering critical information at a glance while enabling customization and efficient navigation. The prototype in Adobe XD supported alignment to Material Design and grid standards before development.
Outcome & Reflection
Key Achievements
- Designed wireframes and prototypes for the Admin Landing Page with critical information at a glance
- Implemented a customizable card layout so users could tailor their view from a card library
- Made each card a shortcut to its respective page to enhance navigation and efficiency
- Built a comprehensive prototype in Adobe XD using Material Design guidelines and a 4px grid
- Applied Sports Connect branding for a cohesive platform experience
Impact
By focusing on user-centered design principles, I created a dynamic and flexible admin landing page that empowers users to monitor and manage their clubs effectively. The customizable dashboard enhances usability and fosters a more intuitive and engaging user experience.
