How design and data has helped shape Fillr.


In mid-April 2015 we launched Fillr – a powerful autofill application that works as an extension in the Safari mobile browser on iOS devices. In just over three months our growth in users has been rapid and we are on track to meet our ambitious new-user target by the end of the year across iOS and Android. Most satisfying of all is that our users are engaging with Fillr more often than we could ever have imagined. 

So with three months under our belt, it’s a great time to review how we got here and more specifically how the product and design team have been integral in the journey. 

“Experience is simply the name we give our mistakes” – Oscar Wilde

In late 2014, we sat down to plan and design Fillr. In front of us was a blank canvas - a pretty exciting prospect after our previous app, Pop, was a product that evolved slowly over time and in a nonlinear fashion. It continually changed and morphed until it was unrecognisable from the original concept.

Pop was jam-packed full of features and amazing technology, which actually became a weakness. It made it confusing to the user. We analysed many successful productivity apps on the market and decided we needed to launch an app with a very simple proposition and minimal features. Something users could understand easily and use straight away without too much to learn. As the numbers of users grow our plan would be to introduce features based on, among other things, demand.
When iOS8 was released, we realised we could apply the advanced autofill technology that our brilliant engineers developed, into a Safari extension. So we took the opportunity to start afresh with a streamlined product that would be clear in its purpose and razor-sharp in its focus. Finally we could use our knowledge gained from Pop and implement it, starting at the foundations. This meant beginning with the name, the icon and the tagline. 

Get straight to the point

When deciding how to communicate with potential customers, a starting point is often deciding between two opposing principles: clear vs clever.  Both are valid in different contexts and a lot depends on the product and the marketing strategy. For this product we resisted the temptation to use a name that we thought was clever and quirky but was too abstract, and returned to the principle of being clear not clever. We knew the icon needed to be symbolic of what we do and we wanted a tagline that left little to the imagination. We wanted anyone who may come across our app to have no doubt as to what it is and what it does. And so, Fillr - Autofill for Mobile was born.

For our brand colour we wanted something that implied efficiency and reassurance. Pop used a shade of red that was too alarming – a feeling we didn’t want users to have when dealing with data in our app. Basic principles of colour psychology narrowed us down to various shades of green and blue so we used these to come up with the final colour.

Pay attention to the differences between iOS and Android 

In designing the user experience (UX) and the user interface (UI) for Fillr it was important to us that we didn’t deviate too far from the familiarities and expectations iOS users have of a native iOS app or those that Android users have of native Google apps. Both Apple and Google have worked hard in developing a language that is familiar to their users - one that they repeat and use daily - and it made little sense to introduce a new vocabulary just to be able to use Fillr. 

The introduction of Android 5.0 brought with it Material Design - a comprehensive guide for visual, motion, and interaction design across platforms and devices. Using these guides as a starting point provided a great base from which to build, adding enough brand identity and experiences to ensure the app is distinctive and unique.

The list view designs vary across operating systems and devices to cater for the specific users.

The list view designs vary across operating systems and devices to cater for the specific users.

Keep the user’s primary goal front-of-mind

We designed Fillr for iOS first and our initial focus was the design of the extension in Safari as opposed to the app (where a user’s profile is stored). When a user is filling a form their ultimate goal is to buy that pair of shoes or apply for that loan, it’s not to fill the form. Our aim was to make the experience fit in with this as much as possible and to not make the user feel like they had left the form they are filling. 

It made sense that the extension should be a dialogue or pop-up over the form, keeping the form visible. However, Safari ‘action’ extensions (as opposed to ‘share’ extensions) have to be full screen, so we designed part of the extension to recreate the Safari address bar, injecting the url into it, thus giving the impression that the Fillr extension pops up over the form.

This was far easier to achieve in Android, as the extension was not limited to being a full screen take-over. So it actually is a pop-up over the form meaning the address bar you see is part of the browser – no tricks required! This also made designing for Android tablets far easier as we were able to resize the extension appropriately for the larger screens really easily and still see the form behind it.

The Fillr app itself is essentially a series of lists and editable fields. The lists made sense to be styled in exactly the same way as the extension, which were based on native iOS and Android list views respectively.  The dedicated iPad app, which is being built as this goes to press, has introduced slightly different navigation and layout, taking advantage of the larger screen space. We are very adamant about providing a dedicated iPad experience for iPad users because data shows that apps designed for iPhones running on iPads do not retain users.

“To me, error analysis is the sweet spot for improvement” – Donald Norman

User feedback and testing is at the core of our design decision-making. Before we started Fillr we undertook user tests and expert UX reviews of Pop, which gave a lot of valuable insights that shaped the direction of Fillr. This included acquisition analysis (our name, icon, tagline, app store descriptions, etc.), sign-up process, in-app usage and user retention analysis. The results took a lot of guesswork out of the early development of Fillr and, in conjunction with some further testing during beta stage, we feel that we launched with our best foot forward.

That’s not to say the hard work is done or that we haven’t got room for improvement. We constantly monitor our Google app analytics, which have helped further refine aspects of the app and the acquisition process. For example, we’ve been able to A/B test a variety of sign-up and installation processes to reduce the early churn rate (the drop off of users between downloading and installing the Fillr extension in Safari). Our post-comms surveys and in-app feedback has returned valuable data that has also led to many improvements in the UX already.

The future is unwritten

Designing Fillr has been an exercise in thorough planning and designing with data. In many ways, it has also been an exercise in restraint. In my product design background, a kettle was often used as an example when talking about user experience, and it’s a great analogy for an app too. If a user wants a kettle, they expect it to boil water fast and they don’t expect to have to spend time learning how to use it.  The great advantage of an app over a kettle is that we get the opportunity to upgrade the user without them leaving their home. So the scope for future features and creativity is there as long as the original app is wanted and, importantly, kept. 

Chris Thursfield Head of Design at Fillr