Gas Station Dashboard

Introduction

Problem Statement

Shell's gas station management faced challenges in optimizing daily operations, effectively utilizing real-time data, and streamlining decision-making processes for station managers. Recognizing the critical need for a robust solution, we set out to design a comprehensive dashboard that would address these pain points, empower managers, and enhance overall operational efficiency.

*Some details have been altered or fictionalized to protect client confidentiality while preserving the core insights and design process.

Exposition

Role and Contributions

As a product designer, I spearheaded the creation of a user-centered gas station management dashboard for Shell. My responsibilities encompassed conducting in-depth user research, where I shadowed station managers to gain insights into their daily operations and challenges. This allowed me to gather critical requirements that informed the design process. I then developed high-fidelity prototypes, focusing on ease of use, accessibility, and alignment with Shell's business goals. Additionally, I collaborated closely with cross-functional teams to ensure seamless implementation and adherence to Shell’s design guidelines, guaranteeing a consistent brand experience across all digital products.

Mobile view of the Shell Gas Station Dashboard displaying key metrics such as consolidated payments, total mix, campaigns, and reviews. Designed by Lui Spadarotto, Product Designer.

Desktop view of the Shell Gas Station Dashboard showing consolidated payments, total mix, and recent campaigns with detailed metrics. Designed by Lui Spadarotto, Product Designer.

Challenges

Risk Assessment

This assessment identifies key risks, evaluates their potential impact, and proposes mitigation strategies to ensure the project's success.

Risk Category	Description	Potential Impact	Likelihood	Mitigation Strategy	How Identified
Technical Integration	Difficulty in integrating the new dashboard with existing systems such as POS, inventory management, and CRM.	Delays in project delivery, increased development costs, user frustration.	Medium	Conduct thorough technical assessments before development, use APIs for seamless integration, and involve technical experts early in the project.	Identified through the need for integration with multiple systems outlined in user interviews and task analysis.
User Adoption	Station managers may resist adopting the new dashboard due to unfamiliarity or satisfaction with current manual processes.	Low adoption rates, failure to meet project objectives.	High	Provide comprehensive training, create an intuitive interface, and demonstrate clear benefits to managers.	Identified from user interviews where managers expressed concern about adapting to new technology.
Data Security and Privacy	Ensuring compliance with data protection laws and safeguarding sensitive customer and transaction data from breaches.	Legal ramifications, loss of trust, potential financial penalties.	Medium	Implement robust encryption, regular security audits, and compliance with local data protection regulations.	Highlighted by the need for handling sensitive data as identified in the requirements gathering phase.
Performance and Scalability	The dashboard may not perform well under heavy loads or as the number of users and transactions increases, leading to slow response times or crashes.	User dissatisfaction, loss of revenue, and increased support costs.	Medium	Design with scalability in mind, conduct stress testing, and plan for incremental scaling.	Identified during the analysis of potential future expansion and increased user load.
Feature Creep	The project could expand beyond the original scope if additional features are requested, leading to delays and budget overruns.	Delays in delivery, increased costs, and a complicated user interface.	Medium	Clearly define the project scope, prioritize MVP features, and manage additional requests through a controlled change management process.	Noted as a common risk in dashboard projects during initial project planning discussions.
Usability Issues	The dashboard may not be intuitive or user-friendly, leading to frustration and reduced efficiency for station managers.	Low user satisfaction, reduced productivity, and increased training costs.	High	Conduct usability testing with real users, iterate on design based on feedback, and ensure the interface is aligned with users' daily workflows.	Highlighted in user interviews and task analysis where managers expressed concerns about usability.
Data Accuracy and Integrity	Inaccurate or delayed data could be displayed on the dashboard, leading to poor decision-making and mistrust in the system.	Poor decision-making, loss of trust in the system, potential financial losses.	Medium	Implement real-time data updates, validate data sources, and set up alerts for data discrepancies.	Identified during discussions on the importance of real-time data in inventory and sales management.
Training and Support	Inadequate training and support for station managers could lead to improper use of the dashboard and frequent errors.	Increased support requests, low efficiency, and user frustration.	High	Develop a comprehensive training program, provide easy access to support, and create a knowledge base for common issues.	Recognized as a critical need in the interviews where managers requested training support for new systems.

Workflow

DAILY OPERATIONS

A detailed look into the typical day-to-day operations of station managers at Shell, as observed through shadowing and interviews. This understanding of their daily workflow informed the development of the management platform to better support these real-world tasks.

Check Fuel Levels

Fuel levels are adequate?

Fuel levels are low

Place Orders Immediately
Inform Staff to Monitor Fuel Usage Closely

Yes

Manage Staff

All staff present and on time?

Staff member is absent

Call Replacement Staff
Adjust Shifts to Cover the Absence

Yes

Check System Status

POS systems operational?

POS system failure

Attempt System Restart
Contact Technical Support if Restart Fails

Yes

Prepare for Opening

Cash register setup without issues?

Discrepancy in cash register

Recount Cash
Report Discrepancy to Supervisor if Unresolved

Yes

Monitor Inventory

Inventory levels sufficient for the day?

Low inventory detected

Place Emergency Order
Inform Staff to Ration Stock

Yes

Process Sales

Transactions processed smoothly?

POS system slows down or crashes

Switch to Manual Transactions
Contact Technical Support for Immediate Assistance

Yes

Handle Customer Service

Customers served without issues?

Customer complaint escalates

Attempt to Resolve the Complaint Personally
Escalate to Higher Management if Unresolved

Yes

Supervise Staff

Staff perform duties efficiently?

Staff performance issue detected

Provide Immediate Feedback
Arrange Follow-Up Training if Necessary

Yes

Generate Reports

Reports generated without errors?

Error in report data

Verify Data Accuracy
Correct Data and Regenerate Report

Yes

Complete Closing Tasks

All closing tasks completed without issue?

Issue during closing (e.g., system fails to shut down)

Attempt Manual Shutdown
Contact Technical Support if Issue Persists

Yes

Placeholder, Ignore this

Step-by-Step Execution

Action-Oriented Process

Requirements

Conducted in-depth shadowing and interviews with station managers, ensuring the dashboard met all critical operational needs.

Prototyping

Designed high-fidelity prototypes featuring interactive elements, aligning with user feedback and business goals.

Collaboration

Partnered closely with developers and conducted iterative user testing to refine the dashboard design, continuously improving its usability based on feedback.

Style Guide Adherence

Ensured all design elements adhered strictly to Shell's style guide, maintaining consistency with the company’s branding and design standards.

Design Deliverables

Product Showcase

Transactions page of the Shell Gas Station Dashboard with detailed information on each transaction, including product, partner, and status. Designed by Lui Spadarotto, Product Designer.

Campaign management page on the Shell Gas Station Dashboard displaying created campaigns with metrics such as activations and status. Designed by Lui Spadarotto, Product Designer.

Campaign template selection screen on the Shell Gas Station Dashboard, offering various campaign options like First Supply, Partner Drivers, and Shell V-Power 1 Year. Designed by Lui Spadarotto, Product Designer.

Content editing screen for a campaign on the Shell Gas Station Dashboard, allowing users to customize campaign details such as discount amount and activation duration. Designed by Lui Spadarotto, Product Designer.

* The designs were originally created in Portuguese and have been translated into English to ensure clear understanding for a wider audience.
** I revised the original "Campaigns Creator" design and flow, which was initially developed by a teammate, to better align with the project's objectives and my design vision for this portfolio. The version presented here reflects those improvements.

Rafael Mathias

Managed Lui directly @ Shell Brazil / Raízen

As a Product Designer, she was able to analyze the journey of gas station users and propose solutions to improve the customer fueling experience here in Brazil, showing seniority through all stages of the project. She also created data monitoring panels and a performance monitoring tool for each of our retail partners, that were highly praised by everyone in the company.

It would be a pleasure to work again with Lui on any project.

Quoted from Rafael Mathias recommendation letter in December 4th, 2020

Success Metrics And Outcomes

Everyone likes results

25%

Reduced time spent on routine tasks

The dashboard provided real-time data insights, allowing station managers to make informed decisions quickly and to focus on more strategic activities.

Improved user satisfaction

User feedback highlighted the dashboard's intuitive design and ease of use, leading to higher satisfaction among station managers.

Streamlined workflows

The dashboard's user-centered design streamlined workflows, reducing the time required for daily operational tasks and decision-making processes.

Addressing Potential Concerns

Usability: The app's user-centered design approach effectively addressed and resolved usability challenges, ensuring a smooth and intuitive experience for all users.
Consistency: Maintaining a comprehensive style guide was pivotal in delivering a consistent design across platforms, enhancing the user experience and brand continuity.

IMAGE GALLERY & LIGHTBOX

hANDOFF

Spacing specifications for the Gas Station Dashboard showing the header and section layout, including padding, gap, and alignment details. Designed by Lui Spadarotto, Product Designer.

Detailed spacing and layout guidelines for the "Total mix" section of the Gas Station Dashboard, including dimensions and padding. Designed by Lui Spadarotto, Product Designer.

Comprehensive layout and spacing specifications for the campaigns and reviews sections of the Gas Station Dashboard, with detailed measurements and alignment. Designed by Lui Spadarotto, Product Designer.

Zeplin was used for the design handoff, primarily because the design work was done in Sketch. Zeplin's integration with Sketch allowed us to seamlessly export design specs, assets, and annotations, ensuring that developers had clear, detailed guidance directly from the source files.

Additional Insights

Visual Explorations

High-fidelity prototype/aimation created with Flinto.

Conclusion

Work impact

The Shell Station Management Platform project exemplifies the power of a user-centered design approach to solving real-world operational challenges. By deeply engaging with the end users - station managers - through shadowing and interviews, we identified critical pain points and opportunities to streamline daily tasks. This project not only enhanced operational efficiency but also empowered managers with a tool that is both intuitive and robust. The successful integration of this dashboard within Shell's ecosystem highlights the importance of collaboration between design and development teams

Other Projects

Shell Box App | Shell

Improved the Shell Box app's user experience by redesigning navigation and adding user-focused features.

View this project

Vehicle Financing Platform | Votorantim Bank

Simplified the vehicle financing process, boosting usability and engagement for sellers and managers.

View this project

Business-Critical Insights AI Platform | Talka

Designed a platform that uses AI to analyze conversations, providing actionable insights for decision-makers.

View this project

Rebrading, Phase 1 | Medlify

Led Medlify's rebranding, aligning visual identity with its evolving mission and ensuring accessibility and future-proof design.

View this project