Hop In Dashboard

Part 1: Understanding Business Goals and Needs

Introduction

To align the UX roadmap with Hop In Technology’s strategy, I first identified core business needs and challenges.

Business Goals

Short-Term (6-12 Months)

• Increase revenue by enhancing product value
• Provide insights & analytics (e.g., census data)
• Showcase hiring pool for recruitment & retention
• Expand shuttle services & tracking (live maps, insights)

Long-Term (2-5 Years)

• Integrate with workforce management apps
• Establish Hop In as a leader in public transportation

Needs & Challenges

Core Product Needs

• Shuttle tracking & boarding
• Route creation & optimization
• Shuttle management & shift planning

Differentiation

• Mobile integration for boarding, scheduling, booking, & payments

Key Challenges

The main hurdle is clearly presenting Hop In’s value proposition. Improving the dashboard’s UX/UI and analytics will enhance usability and showcase insights effectively.

Additionally, the existing dashboard had several critical issues:

• Unprofessional UI – The design was bare-bones, default-looking, and lacked thoughtful execution.
• Lack of Presentation Confidence – The team wasn’t proud to showcase it to potential clients or investors.
• Sales & Investment Impact – A refreshed UI would help attract more sales and investment interest.
• Urgent Turnaround – The project had a tight deadline as the team needed to present it to a client soon.

This redesign will help Hop In achieve its business goals while optimizing the user experience.

Old Dashboard:

‍

Part 2: Understanding Users & Creating User Personas

To design a user-centric dashboard, I focused on identifying key user types and their needs. Through research and discussions with stakeholders, I developed three distinct user personas that represent Hop In’s primary users:

• Persona 1 – Corporate Admin: Manages workforce transportation logistics.
• Persona 2 – Shuttle Company Admin/Driver: Oversees shuttle operations and ensures smooth scheduling.
• Persona 3 – Super Persona (Sales Account Executive): Focuses on client relationships and business expansion.

The following screenshots provide an in-depth look at these personas, highlighting their goals, pain points, and interactions with the platform.

Part 3: Researching Implementation

In order to achieve the speed required to turn this project around, I opted to find an existing UI dashboard kit rather than designing everything from scratch. This approach allowed for faster development while maintaining a polished and functional design.

To ensure a smooth and scalable design process, I researched the best UI design kit that met three key criteria:

1. Robustness – Comprehensive UI components and features.
2. Compatibility – Works seamlessly in both Figma and Next.js (the frontend tech stack).
3. Developer Alignment – Supported by strong documentation and community support.

I collaborated with the product manager and development team to evaluate three possible UI kits:

1. Vuexy
2. Tailadmin
3. Metronic

While all three were strong options, Vuexy stood out as the best choice due to:

• A comprehensive library of UI components, strong data visualization tools, and flexible layouts.
• Pre-built logistic and map pages, which could be leveraged for ride tracking.
• Excellent documentation, active support, and a proven track record as the #2 best-selling admin template on ThemeForest.

With Vuexy selected, I proceeded to rebuild the UI dashboard design, refining the UX while ensuring a seamless integration into the development process.

‍

Part 4: Finalizing the Refreshed Design

To ensure a functional, visually clean, and user-friendly UI, I applied UX and visual design principles while keeping user personas at the forefront.

• Intuitive Simplicity – I followed familiar UI patterns to accommodate users with varying levels of tech comfort, ensuring an intuitive experience.
• Improved Information Organization – For content-heavy pages like the dashboard and organization pages, I introduced tabs to streamline navigation and provide a clear overview at a glance.
• Consistent & Branded Design – I incorporated Hop In’s branding while maintaining a polished, professional look, applying principles of visual hierarchy, emphasis, and layout structure.

This approach created a refined, user-friendly dashboard that enhances usability and engagement.

‍