Shell Box App

Introduction

Problem Statement

Shell recognized the need to enhance the Shell Box app to meet evolving user demands and support business goals. Shell Box is a loyalty app that lets drivers refuel with discounts, pay from the app, and accumulate points for rewards. However, the app faced usability challenges and lacked key features, leading to suboptimal engagement and missed revenue opportunities. The goal was to redesign the app to be more intuitive, feature-rich, and aligned with both user expectations and Shell's strategic objectives.

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

Exposition

Role and Contributions

I led the design and development of new features for the Shell Box app, focusing on improving navigation and overall user experience. Through comprehensive user research, I identified key pain points and opportunities, ensuring our design solutions were user-centered. I also created high-fidelity visual designs aligned with Shell's brand, maintained a style guide for consistency, and collaborated closely with developers to implement the new features seamlessly.

This work aimed to simplify payment and promotions, engage customers through a new communication channel, increase frequency while reducing supply time, enhance loyalty and satisfaction, and redesign the gas station finder.

Shell Box app home screen with options to pay for fuel, view balance points, and locate gas stations. Designed by Lui Spadarotto, Product Designer.

Step-by-Step Execution

Action-Oriented Process

User Research & Analysis

I conducted targeted competitive research and engaged in discussions with key stakeholders to identify the main pain points and opportunities for improvement within the Shell Box app. These insights guided the strategic direction for enhancing the app’s user experience.

Design & Development

Based on the research findings, I designed and developed new features such as intuitive navigation, improved payment options, and personalized offers. My focus was on creating high-fidelity designs that aligned with both user needs and Shell’s business objectives.

Collaboration & Iteration

Working closely with developers, I ensured that the designs were implemented accurately. Through continuous testing and iteration, the app was refined to meet high standards of usability and performance.

Style Guide Development

I developed a comprehensive style guide to ensure consistency across all digital platforms. This guide helped maintain a cohesive brand identity and seamless user experience throughout the Shell Box app.

Design Deliverables

Product Showcase

Shell Box app side menu displaying options like gas station locator, payment methods, history, discount codes, benefits, and account settings. Designed by Lui Spadarotto, Product Designer.

Shell Box app map view showing nearby Shell gas stations with icons indicating location and special offers. Designed by Lui Spadarotto, Product Designer.

Shell Box app search function allowing users to input an address to locate nearby Shell stations. Designed by Lui Spadarotto, Product Designer.

Shell Box app results page displaying a list of nearby gas stations with additional services offered. Designed by Lui Spadarotto, Product Designer.

Shell Box app displaying search results on a map, highlighting nearby Shell stations and their offers. Designed by Lui Spadarotto, Product Designer.

Shell Box app screen showing a special offer notification for a specific Shell gas station. Designed by Lui Spadarotto, Product Designer.

Shell Box app screen detailing offers available at a specific Shell gas station, including services like oil change and ATM. Designed by Lui Spadarotto, Product Designer.

Shell Box promotional screen offering a R$20 discount for app users. Designed by Lui Spadarotto, Product Designer.

Shell Box app promo code screen offering vouchers and instructions for redeeming discounts. 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.

Pedro Caluzni

Worked with Lui @ Shell Brazil / Raízen

I highly recommend Lui for her exceptional creativity, dedication, and collaborative spirit. She is not only hands-on and solution-oriented but also generous in sharing her knowledge.

Lui is always at the forefront of innovative design practices, adeptly navigating challenges with a keen understanding of User-Centered Design, Data-Driven Decisions, and User Research. Her advocacy for accessibility is particularly noteworthy.

Success Metrics And Outcomes

Everyone likes results

30%

Boost in User Engagement

Post-implementation, user engagement with the Shell Box app's promotional offers increased by 30%, driven by intuitive navigation and personalized features tailored to user behavior.

Elevated User Satisfaction

User feedback highlighted significant improvements in the app's usability and the relevance of the new features, leading to a noticeable uptick in overall satisfaction.

Consistent Brand Identity

The updated style guide ensured a cohesive and consistent brand experience across all digital touchpoints, reinforcing brand recognition and trust among users.

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

Handoff screen featuring the "Offer Alert" component of the Shell Box App, with tabs and button measurements detailed for developer reference. The design specifications are provided to ensure consistency in the app's interface. 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

Concept exploration created with Flinto.

Conclusion

Work impact

The redesign of the Shell Box app was a resounding success, resulting in a significantly improved user experience that not only met but exceeded user expectations. The app's new features and intuitive design led to a 30% increase in user engagement and higher conversion rates for in-app transactions, directly contributing to Shell's revenue growth. The consistent application of a well-developed style guide also ensured that the app remained visually cohesive and true to Shell's brand identity across all digital touchpoints. This project highlights my ability to leverage user-centered design principles and collaborate effectively with cross-functional teams to deliver impactful solutions that align with both user needs and business objectives.

Other Projects

Gas station Dashboard | Shell

Developed a dashboard to streamline operations at Shell gas stations, enhancing management efficiency.

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