When FordPass was conceived and released, the focus was on allowing owners to interact with their vehicles and locate vehicle related services such as fuel and maintenance.
When it came time to redesign the app and create version 2, the goals were to increase the number of users, increase user engagement with FordGuides, and give the users an experience that would encompass all mobility options in all markets worldwide. This meant enhancing the app to include locating additional modes of transportation as well as future needs such as electric vehicle charging stations.
The redesign also needed to be a more consistent experience throughout the app with design that allowed for future additions without restructuring.
HIGH LEVEL TIMELINE
Approximately one year to complete high fidelity designs with complete user flows and annotations.
The team consisted of a creative lead, as well as several art directors, solutions delivery managers, product managers, and UX/UI designers.
To redesign an entire app with considerations for future features as well as simplifying the interface while adding additional features.
I worked as part of the team responsible for the Find pillar of the app. As part of this team, I collaborated with Product Owners and Feature Owners from around the globe to determine all additional features that would be added. Additionally, I created user flows for all elements of the Find feature, which were translated into low fidelity screens and presented along with annotations to the product managers for preliminary approval. I then worked with two art directors to create high fidelity screens for both iOS and Android and presented the completed screens along with annotations for product manager and feature owner approval. These were then presented by our creative lead for L3 and L2 approval within Ford.
UNDERSTANDING THE USER
It was important for us to understand the wide variety of users that would be using our app as Ford owners span all adult ages and locations. Because of this, users had different goals and needs when using the app.
We started by developing several user personas to cover a wide variety of users. We tried to define a background for each as well as determining their basic transportation needs.
Defining the users and what they would be using the app to find allowed for us to divide find items into categories and then prioritize the categories.
Because this was version 2, and the app had many users, we were also able to access a huge amount of data in the form of reviews and comments in the App Store. While most users don't typically write a detailed comment when they are happy, those users that are unhappy with something are likely to write about it. The insight into the things that were not working was invaluable.
We learned that users did not want separate experiences for each type of location they were searching for. They wanted one experience which would allow for them to switch categories within the experience while maintaining their existing searches within each category.
The previous version of the app was a flat design consisting of one long menu.
Below is the home screen from the original app.
BREAKING DOWN THE PROCESS
After the team completed our research, we brainstormed how to structure the app to make it easier to navigate even with additional features being added. We reached a consensus that the app should be divided into four major pillars; Move, Find, Guides, and Account.
Once this was decided, we divided up into smaller teams with each assigned a pillar. I worked on the Find pillar.
I started the process by listing all things that the user would need to be able to search for now and in the known future. Once I had defined each thing the user would search for from the Find landing page, I could then define what the flow would be for a search. This user flow is shown below.
Once the basic user flow was defined, I started to create the basic design of the Find Landing screen. All searches would originate from this location. The user should have the option to just start typing, select a category and then search, or access previous searches or favorites. The user is shown a search input box with a map below and a panel of categories that can be swiped up into a drawer.
Landing with category tray closed
Options when search input is tapped
The next step was to define the workflow of what would happen for each destination category. When tapped these category CTA's would each execute a search for destinations that fit the category. The search results would be shown on the map represented with pins.
The challenges here were defining how the search results should be shown relative to the number of results. We needed to define a standard boundary area but it should adjust based on the number of search results so as not to overwhelm the user with too many results or present them with no results. Rules were defined which expanded the boundary if needed. In addition, some categories were automatically filtered and it needed to be obvious to the user that filters were applied. The product owner also wanted to show fuel prices within the map view.
Below is an example of a Fuel station search which shows how these issues were addressed.
Fuel stations shown on the map with pins containing prices. Default filter is shown below the location input and is highlighted to indicate it is active
List view can be toggled and shows more information as well as the ability to change the sort order
When a fuel station pin is selected, the user is shown a tile with more information. The user can tap another pin or swipe to the next tile
Each category search was defined with specific filters that could be applied as well as which ones would be applied by default.
Sort orders were also defined along with the default sort order to be used for each category.
The information to be shown in the detail pane or in the list view for each destination category was defined by the product owners. I then laid out basic templates for each category type with a focus on a consistent experience for the user.
Users want to easily switch between tasks without being forced to go back
The find pillar was designed so that a user could quickly switch their category search or even do a freeform search at any time
Design between worldwide regions requires adaptability
All sections of the app had to be designed to allow for copy translated into multiple languages which in many cases extended the length of the copy by many characters
Different regions record data in different ways
The structure of names and addresses in other countries varies. Additionally, many items such as temperature, currency, or distance vary as well. A global app must be designed with the flexibility to allow for these differences without changing the cored design
Consistency throughout an app is critical to making it easy to use
All pillars of an app must maintain consistent design elements, use of those elements, and navigation. If the user knows that a back chevron takes them to the previous screen in one section of the app, then it should always take them back one screen.
User testing during the process is critical
Testing small interactions during the design process can help prevent going too far down a path that is not ideal. This prevents the snowball effect of one bad decision influencing several more farther into the process
TITLE OF THE CALLOUT BLOCK
This project was a very large undertaking and required a shift in thinking from what had previously been done. I started with the team at a point when most work on the previous version of the app was complete and we were beginning to frame version 2. This was helpful for me to not be as familiar with the original version as I was able to focus on what made sense rather than molding it after what had been done previously.
This project was extremely successful as the app now has more than 1.4 million users with 80 percent of those users having engaged with FordGuides through the app. Additionally, FordPass email engagement rates are three times the automotive industry average.
If you are interested in trying out the app, you can download it in the following locations: