Redesigning the SoCal 511 Admin Portal for Improved User Experience

SoCal 511 IVR System

The Admin Portal is a critical tool used by authorized users from the Los Angeles County Service Authority for Freeway Emergencies (LA SAFE) and system administrators from IBI Group to operate and manage the Southern California 511 Traveler Information Interactive Voice Response (IVR) system.

The existing Southern California 511 IVR service had an outdated interface that needed a modern refresh. Our challenge was to create a modular and easily understandable interface to replace IBI's outdated approach. We needed to create a design that was simple, clean, and easy to use, while also accommodating the evolving needs of the users and the system.

As the product designer entrusted with the redesign of the SoCal 511 Admin Portal, my objective was to improve both the aesthetics and usability of the existing portal.

Admin Portal  |  Design Audit

  • Conducted a design audit on the current dashboard to:

  • Understand previous design efforts.

  • Identify areas for improvement.

  • Prioritize usability efforts.

  • Discovered the dashboard lacked a cohesive design language.

  • Noted the dashboard was designed by a developer without design input.

  • Identified significant scope for enhancing usability and the overall aesthetic of the dashboard.

Admin Portal  |   User Research

Engaged in walkthroughs of the dashboard with potential stakeholders to:

  • The existing tool.

  • User interaction with the tool.

  • User behavior, patterns, and challenges.

    Inquire about context of use.

  • Identify target users.

  • Understand implementation constraints.

    Created a design document to:

  • Share with the client for validation of goals, objectives, users, and use cases. Research outcomes revealed two primary user groups, each with distinct use cases.

Admin Portal  |   Concepts & Sketches

  • Based on user insights, developed potential concepts for the Home Page and Reports, and shared with the client for direction on design.

  • Received approval for initial rough ideas, then polished the screens to create high-fidelity wireframes.

  • Presented two design options to the client:

    Direction 1: Directs specific users to respective landing pages based on their login information (e.g., Reports page for LA Staff and Floodgates Page for Traffic Operations).

    Direction 2: Home page features quick links to both Reports and Floodgates, among others, for broader accessibility.
    The client decided to proceed with Direction 2 for its inclusive and accessible design approach.

Taking this direction further, I started to flesh out our ideas into concepts and wireframes. This is the home page concept.

Admin Portal  |   Prototypes

Prototyping was a crucial step in our dashboard project, serving to:

  • Visualize our ideas concretely for comprehensive understanding.

  • Ensure client alignment with our plans.

  • Test user interaction.

  • Identify and resolve potential issues promptly.

  • Time and cost savings in the development process.

    Utilized feedback from the prototype to:

  • Refine the dashboard.

  • Optimize the design and functionality before full-scale development.

Admin Portal  |   Before and After Designs

Initially, a Home Page was absent, leading to a focus on:

  • Enhancing usability, aesthetics, and functionality.

  • Showcasing our dedication to a user-centric design approach.

    Home Page Redesign:

  • Aimed to refine the Admin Portal’s Home Page for better intuitiveness and user-friendliness.

  • Transitioned from a basic list of functions to a dashboard featuring summary information.

  • Enhanced approach highlights key system usage metrics and floodgate schedules.

  • Ensured users have instant access to critical information, improving the overall user experience.

Reports Functionality:

The "All Reports" tab enables customized report generation tailored to user preferences. Users can:

  • Select specific queries from a provided list.

  • Add these queries to their report.

  • Save their customized reports as favorites for future quick access.

  • Offers download options for generated reports in both JSON and CSV formats.

    These features empower users to:

  • Efficiently manage and generate reports.

  • Download and utilize data for informed decision-making.

Admin Portal  |  Design System

  • Developed a comprehensive design system for consistency, scalability, and efficiency.

  • Created reusable components and standards for a unified visual and functional language across the dashboard.

  • Emphasized simplicity and clarity in visual style, with a color palette reflecting brand identity and user accessibility.

  • Chose primary blue, complemented by neutral blacks and whites, for an appealing and functional interface.

  • Designed typography, button styles, and input fields for legibility and usability, enhancing user navigation and interaction.

  • Component library includes buttons, toggles, drop-down menus, and data visualization widgets (charts and graphs), designed for flexibility and adaptability.

  • Modular approach streamlines design and development, ensuring a cohesive user experience across the dashboard.

Admin Portal  |  Training Guide

  • Created a user-friendly training guide for the dashboard to facilitate task accomplishment. Features include:

  • Clear layout with step-by-step instructions.

  • Supportive visuals such as screenshots and videos.

  • Written in simple language, incorporating practical examples and interactive elements for hands-on learning.

  • Available in both print and online formats, ensuring accessibility to all users.

  • Regularly updated to reflect the dashboard's latest features.

  • Aims to assist new users in getting started and supports existing users in maximizing dashboard utility.

Admin Portal  |  Take aways

Primary goal was to improve user experience while preserving all functionality.

  • Collaborated closely with LA SAFE and IBI Group to ensure:

  • Existing utilities like Audio Repository, Call Flow, and others remained intact.

  • Utilities were easily accessible within the redesigned Admin Portal.

    Achievements of the redesigned SoCal 511 Admin Portal:

  • More intuitive and efficient user experience.

  • Revamped home page and enhanced utility access.

  • Maintained all existing functionalities, aiding LA SAFE staff and system managers in effective IVR system operation and management.

    Challenges of redesigning an old system without altering functionality included:

  • Limited design flexibility.

  • Collaboration with developers was crucial for understanding functional design flexibility.

    Post-redesign benefits for users:

  • Enhanced ability to generate, save, share, and print multiple reports.

  • Operators have a more accessible method to create and manage floodgates.