Fabric project thumbnail

Shell Box

About

Buy in-store, pay from your phone.

Year

2019

timeline

6 months

What I did

Led the design process end-to-end

Team

Product Manager and Engineer Manager

The Problem

Shell Box already let drivers pay for fuel from their phones without leaving the car. The next step was extending that same convenience to Shell Select, the convenience store at the pump — letting customers buy snacks, drinks, and other items through the app instead of queuing at the register. The challenge wasn't just UX: paying for everyday purchases by phone was still an unfamiliar habit in Brazil at the time, so the flow had to feel as fast and trustworthy as handing over cash.

My Role

I led the design process working closely with a PM and an Engineering Manager — from early research through interface design and handoff, shaping the flow, wireframes, and final UI myself while aligning direction with the team at each stage.

How I approached it

Competitive research → Studied how other payment players handled similar in-person-to-mobile purchase flows, to ground the concept in what already worked elsewhere before designing anything Mapped the full journey → From browsing products in-store to cashier registration to in-app payment confirmation, focused on keeping the learning curve as close to zero as possible for existing Shell Box users Wireframed the core structure → Home → store code entry → checkout → payment confirmation, before moving into visual design Designed the interface → Applied contrast, hierarchy, and feedback principles to make a real-money transaction feel fast and safe on a screen customers were already using daily for fuel Planned for iteration → Defined the metrics that would matter post-launch (time in app, daily frequency, checkout drop-off) so the team could validate and refine the first version once it shipped I left the company before the project launched, so I can't speak to real-world performance — but the flow, wireframes, and UI were fully designed and handed off, along with a clear plan for how the team should measure and iterate on it after release.