Introduction
Filld is an on-demand service to help car owners with a regular inconvenience: having to fill up on gas. The Filld app has been widely used in different markets across the country since 2015, but up until now, their website has been purely informational. I assisted in the process of designing new desktop experiences to facilitate new user attraction and signups on a brand new website: getfilld.com.
Project Details
- Duration: 3 months/ongoing
- Team: David Leøng and others
- My role: UI/visual design, building out flows, creating developer notes
- Tools used: Sketch, Photoshop, InVision
The Challenge:
How can we better enable more users to place a first-time Filld order?
Introducing GetFilld.com.
Flow and Wireframes
The first step was to create wireframes to illustrate the basic flow, making sure to include all of the client requirements. A user needed to be able to look up gas prices in their area, pick a time slot, enter their payment information and vehicle information, and finally, create an account. The following is the user flow for a first-time order.
I then translated the steps in the user flow into wireframes. The challenge was to adapt the entire order flow from mobile to desktop, but to portray it appropriately for the different platform.
Iteration/UI
As I received more updated client requirements, I had to make changes to the flow, which manifested in the wireframes. An example of one change was moving the vehicle location section from the basic vehicle information page to the very end.
As I was given updated wireframes, I also incorporated specific graphics, icons, and UI elements, and polished them to match the style of the brand (see below). Each layer and element was examined and adjusted if necessary, in order to achieve precise padding. When all this had been achieved, I put together annotated specs for the developers (see right).
Finishing Touches
In the advanced stages of the project, I was tasked to incorporate a promotion to incentivize first-time users: five gallons free on the first order. I did this by adding a banner on the home page and slight adjustments on the order confirmation page. I also made a clearer separation of the "Create an Account" and "Order Information" sections.
Prototype
With the flow defined, the pages brought to life, The finer interaction details taken care of, and the UI polished, I put together a prototype of the website using Invision. Play the video below to check it out.
Results
These designs have been shipped, and the website went live at the end of 2017.