Filld mobile app: Integrating OAuth or third-party functionality

Filld

Filld is a mobile fueling service for vehicles and fleets wherever they are parked. Filld delivery technicians in safety-compliant trucks follow algorithmically-optimized routes to deliver filtered fuel to vehicles. They currently serve consumers in the Bay Area, Washington D.C., and Vancouver, Canada, and offer B2B service to fleets in the Bay Area, Seattle, Portland, Washington D.C. and Vancouver, Canada.

I was brought on to the project as a freelance designer by a design agency contracted by Filld. I worked as the sole designer on the project under the direction of the design lead.

During this 5-week project, I was responsible for redesigning over a dozen user flows and the associated app screens as well as creating a prototype.

How might we make signing up for and using the app a more seamless experience for users?

Project Goals

The primary objective was to integrate Open Authorization (OAuth) into the Filld mobile application to enhance user flexibility, streamline authentication, and enable secure data sharing across platforms. Key goals included:

Seamless OAuth Integration: Implement OAuth at multiple touchpoints within the app to support token-based authentication and authorization, allowing users to securely connect third-party accounts and services.
Enhanced User Onboarding and Access by: integrating OAuth into the sign-up flow for new users to simplify account creation; incorporating OAuth into the log-in flow for existing users, enabling quicker and more secure access.
Vehicle Data Import: Enable users to import vehicle information from third-party platforms (e.g., connected car services or dealership portals) via OAuth, reducing manual data entry and improving accuracy.
OAuth-Enabled Checkout Experience: Redesign the checkout and payment flows to support OAuth-based payment options (such as digital wallets or payment providers), offering users greater flexibility and convenience during transactions.

Deliverables

Over a dozen user flows, high-fidelity screens, and a prototype of the user journey beginning with a new user signing up for the app via Lexus OAuth and ending with the user successfully placing an order.

OAuth touchpoints

Given the multiple integration points for OAuth, I started by mapping out each touchpoint and creating an inventory of its intended uses—specifically for login, payment, and importing vehicle information from third-party platforms.

Image 1a - Simplified existing user map with OAuth integration points
This image is of a sketch I created of a simplified user map. The integration points that I underlined are log in, select, vehicle, and select credit card
Image 1b - Simplified new user map with OAuth integration points
This image is a more detailed version of the previous image and has been typed rather than handwritten. The map starts at launch screen then branches into two options: explore and sign up (the latter will require a new flow). Sign up takes you to the home screen. From there you can select promo flow, help, settings, and schedule a new fill. Setting branches into vehicle info and payment info, both of which need their flows redesigned. If you choose to schedule a new fill, you will go to the add or select a vehicle screen which will need a new user flow. Then, you will go to the select a delivery window screen, followed by selecting delivery location then select or add new payment method. After that you review your order. From there, you can edit, cancel, or confirm your order.

OAuth Log In

Image 2 - Original log in flow for existing users
This shows 4 app screens that comprised the existing user log in flow before I redesigned it to incorporate OAuth.

*I didn't design the flow pictured in Image 2

As the project progressed, the number of login options steadily grew to include providers like Toyota, Lexus, Amazon, and Google. To ensure the design remained scalable and user-friendly, I evolved the login screen from a static list of options to a more flexible dropdown pattern.

Image 3 - Amazon OAuth existing user log in flow
This shows 6 app screens that comprised the first version of the existing user log in flow I redesigned.
Image 4 - Version 1 of scalable OAuth log in for existing users
This is the first version of a scalable OAuth log in screen I designed.
Image 5 - Version 2 of scalable OAuth log in for existing users
This shows the second version of a scalable OAuth login in screen I created.

Importing vehicle information

Originally, new users were taken directly to the home screen after signing up, and weren’t prompted to enter vehicle information until placing an order. With the introduction of Toyota as a login option, I redesigned the flow to offer users the ability to link their Toyota vehicle data to Filld during sign-up or upon first login after OAuth was implemented. This approach aimed to save users time by eliminating manual data entry and to subtly introduce existing users to the new integration.

Image 6 – New user sign up with Toyota and link vehicles
This shows 11 app screens that comprised the new user sign up flow with Toyota OAuth.

The link icon next to the make of the car on the Select Vehicle screen denotes that the car info was imported from the user's Toyota account.

OAuth Payment Flows

Creating scalable payment screens presented some of the same challenges as the scalable log in screen. Namely, I needed to communicate and present the various options without unnecessarily increasing cognitive load. I began by sketching out some ideas. I then mocked them up, and iterated.

Image 7 – Sketch of scalable OAuth Payment for existing users
This is a sketch I made when brainstorming scalable payment screens.
Image 8 – Sketch of scalable OAuth payment for new users
This is a sketch I made for scalable new user OAuth payment.

I created two sets of interactions: the first set allows users to select from existing credit cards or other payment methods if they’ve previously set them up. If they haven’t, this option would be gray to indicate that it’s disabled. The second set of interactions allows a user to add a new credit card or other payment method. The dropdown for the latter lists the available options.

While technically this solution worked, I wanted to make the screen simpler and really streamline the payment process. My approach to the payment screen for new users (Image 9) inspired my final design for existing user payment.

Image 9 - OAuth payment for new users
This is a mockup of the sketch in image 11.

The obvious difference between the new and existing user payment flows is that a new user won’t have any payment methods saved. However, by tweaking the screen a little to make the credit card box a dropdown, I was able to make the idea work for existing users as well. The dropdown would allow users to select a saved card or add a new one.

Image 13 - Final version OAuth payment for existing users
This the final version of the existing user scalable payment flow.
Image 14 - Final version OAuth payment for existing users with screen
This image offers 3 screen variants for one of the app screens in image 13.


In addition to making the existing user payment screen cleaner, using the same approach on payment screens for new and existing users had the added benefit of consistency in design and in interaction, and that’s important to providing optimal user experience.

Lexus OAuth Prototype in InVision

By the time we were wrapping up this project, Lexus had become the most likely potential partner for Filld so the last flow and set of mockups I created centered on Lexus. The flow below outlines the journey a user would undertake from initial sign up with Lexus account through successfully placing their first order.

Image 15 - New user journey Lexus OAuth
This shows the user journey from sign up through to successfully placing their first order.

Conclusion

This project was an opportunity to thoughtfully integrate OAuth functionality into the Filld mobile app in a way that prioritized scalability, usability, and consistency across user flows. By redesigning key touchpoints—including login, vehicle data import, and payment—I helped create a more seamless and intuitive experience for both new and existing users. The result was a flexible design system capable of supporting multiple third-party integrations, while reducing user effort and enhancing trust through secure, familiar authentication methods. The Lexus OAuth prototype served as a strong final deliverable, illustrating how these improvements could be applied in a real-world partnership scenario and setting the foundation for future third-party integrations.