Creating an Intuitive dashboard for Athletes Mobile App
An App that empowers athletes globally, offering innovative platforms for talent showcasing, networking, & opportunity attraction, revolutionizing the sports engagement landscape.
ROLE
Senior Product Designer
DURATION
2022- Present
TOOLS
Figma & Adobe Creative Suite
TEAM
Software Engineers, Tester, Marketing Team, & Operations Technology.
MY CONTRIBUTIONS
Building a Comprehensive Design System from the Ground Up.
Crafting and Defining Cohesive Brand Guidelines.
Redesigning and Enhancing the Mobile Application While Integrating New Features.
Leading Design Reviews to Maintain Consistency and Deliver High-Quality User Experiences.
Collaborating Cross-Functionally with Researchers, Engineers, and Project Managers to Align Priorities and Implement Feedback Seamlessly.
PROBLEM STATEMENT
How might we create an app that empowers athletes globally, therby revolutionizing the sports engagement landscape?
SOLUTION
Empowering athletes worldwide with a dynamic platform to showcase talent, build networks, and seize opportunities, transforming the future of sports engagement.
To revolutionize the sports engagement landscape and empower athletes globally, we will create an app that will feature comprehensive athlete profiles, including portfolios and embedded media, robust networking and community-building tools, talent showcasing and discovery capabilities, career development resources, and real-time engagement features. It will also support multiple languages and include accessibility and cultural inclusivity features, ensuring a diverse and global reach. This app will help athletes showcase their talents, build networks, and access opportunities, transforming how athletes engage with the sports world.
IMPACT
The nXIvl connect feature (Intuitive Dashboard) increased user engagement by 65%, boosted app downloads by 25%, and led to 45% increase in sports properties.
The nXlvl Build Your Activity Profile, boosted a revenue of $3M.
The improvement of the digital assets, boosting user satisfaction through refined user interfaces and technological advancements, increased user engagement by 35%.
PROCESS:
Started with benchmarking. Concluded with A/B testing to maximize business imapact.
When I joined as a volunteer, I quickly realized that things were not in good shape—everything felt unstructured and disorganized. Seeing this, I took the initiative to highlight the importance of a well-defined Design System and Brand Guidelines, explaining how they could drive long-term consistency and efficiency. This marked a turning point, and I took the first step toward making it happen. The journey began with thorough research, benchmarking industry best practices, and laying the foundation for a more structured and cohesive design approach
Furthermore, designing the spectrum of features, encompassing onboarding screens, the home screen, user profiles, search navigation, discovery mechanisms, and messaging interfaces, culminating in successful deployment., required understanding of the existing design and ensuring consistency. I began by exploring the current NEXT LEVEL App service. Additionally, I incorporated experimental designs to create a distinctive design. To assess its effectiveness, I conducted A/B testing after the launch, leading to design optimization based on the results.
DESIGN STEPS
1. Establishing Brand Guidelines
Brand Guidelines are a set of rules that define how a brand's identity should be represented consistently across all media. They include details on logo usage, typography, colors, imagery, tone of voice, messaging, and legal usage.
2. Creating a Design System
A Design System is a collection of reusable components, patterns, and guidelines that ensure consistency in design and user experience across a product. It includes visual elements (colors, typography, icons), UI components (buttons, forms, navigation), and rules for their usage, along with development standards.
3. Conducting User & Market Research
Competitive Analysis: Study similar apps and industry trends.
User Surveys & Interviews: Gather insights from potential users.
Define User Personas: Identify user needs, pain points, and goals.
Analyze Existing Pain Points: Understand issues in the current system.
4. Creating Wireframes & User Flows
Sketch low-fidelity wireframes to define basic layouts.
Develop user journey maps to ensure smooth navigation.
Validate structure with stakeholder and user feedback.
5. Designing High-Fidelity UI & Prototyping
Create detailed high-fidelity screens in Figma.
Design micro-interactions and animations for better UX.
Develop an interactive prototype for usability testing.
6. A/B Testing & User Validation
Test different UI versions (A/B testing) to find the best-performing design.
Conduct usability tests with real users and gather feedback.
Iterate on designs based on test results.
7. Developer Handoff & Implementation
Organize Figma components for seamless developer handoff.
Provide detailed design specifications and assets.
Collaborate with developers to ensure pixel-perfect implementation
FEATURE DESIGN
What is nXlvl connect?
nXlvl Connect is a feature within the nXlvl ecosystem designed to help student-athletes build and manage their personal brands, connect with fans, and engage with brands for NIL (Name, Image, and Likeness) opportunities. nXlvl Connect offers athletes the ability to create personalized profiles that showcase their achievements, social media presence, and highlight reels, which can be easily discovered by recruiters and brands.
A part of high-fidelity UI of nXlvl Connect
Explore the complete User Guide for nXlvl Connect.
SUPPORTING FEATURE DESIGN
How to build your activity profile?
The "nXlvl Build Your Activity Profile" feature is designed to help athletes and creators showcase their achievements and talents in a comprehensive and engaging way on the nXlvl platform. This feature allows users to create a detailed profile that highlights their skills.
A part of high-fidelity UI of Build your activity profile
Explore the complete User Guide for Build your activity profile.
8. Market Release & App Store Deployment
Conduct final QA testing to ensure smooth performance.
Prepare App Store & Google Play Store assets (screenshots, descriptions, branding).
Launch the app and monitor post-launch user feedback & analytics
App icon
Feature Graphics
Currently, the app has 4.5 star rating!
Check out some awesome reviews below
TAKEAWAY
Building from scratch to leading a team, crafting an end-to-end design system has been a journey of growth, collaboration, and innovation—turning challenges into opportunities and vision into reality.
Working on the end-to-end design system has been both a deeply rewarding and enriching experience. It has been my first time building something from zero upto leading a team and independently driving a feature, which came with significant responsibilities but also immense growth. Collaborating in a dynamic environment, where diverse perspectives converge into a unified creative vision, has been truly inspiring. Additionally, stepping into a developer's mindset at times has enhanced collaboration, fostering smoother workflows and more impactful outcomes. This journey has not only strengthened my skills but also deepened my appreciation for cross-functional teamwork and innovative problem-solving.
