fordpass header.png

FORDPASS APP REDESIGN

Student Collaborator

Project Overview

superhero.png

My Role

UX Designer & Researcher

time.png

Date & Duration

Aug - Dec 2019 

Sixteen Weeks

My Impact

As a team member, I was able to apply my wide range of design interests and skills. Some of my specific contributions included:

  • Spearheaded the creation of our site map

  • Conducted a feature audit of the FordPass app

  • Conducted interviews to inform the creation of our desirability model

  • Continuous ideation, including extensive sketching

  • Utilized my visual design skills to create mock-ups of our redesigned FordPass app

tools.png

Skills

primary & secondary research, information architecture, desirability model, content audit, figma prototyping

team.png

Team

Shelby Benton, Brandon Dentler, Annie Giang, Megan Ledford, Greg Sirko

What I Learned

This was a very challenging project. Throughout the course of the semester the team had to rescope and narrow our problem statement roughly four times. I learned that rescoping should not be something to be scared of, but rather, something to be expected and appreciated. I also learned that communication between all team members is much easier said than done, and it can make or break a project. 

Design Opportunity

The Problem, Scope & Goal

The adoption of the FordPass mobile app is very low. The functionality is lacking, the needs of its target user group are not met, and the product has become stale.

 

Our goal for this semester-long project was to redesign the FordPass app. The team was to identify one section of the app that would enable it to capture/recreate a positive feeling users experience when using their favorite app.

The Solution

The team utilized a plethora of UX research methods throughout the project in order to identify the pain points, challenges, and needs of our specific users: middle-aged and older Ford owners. 

Our solution features a redesigned homepage, more accessible interactions within the app, and streamlined navigation. 

 
 
 

Final Design

Screen Shot 2020-10-12 at 4.18.09 PM.png

Homepage

The homepage features a clean and organized layout, large buttons and text, and a simple color scheme. 

Screen Shot 2020-10-12 at 4.17.19 PM.png

Vehicle Details

When users click on vehicle details, they are able to see their license plate and VIN number since this was something our users expressed was important during our concept testing.

Screen Shot 2020-10-12 at 4.17.35 PM.png

Engine Start

Testing insights pointed to a greater want for varied interactions within the app. When users start their car, the engine button turns green to indicate that it was successfully started. 

Screen Shot 2020-10-12 at 4.17.52 PM.png

Add Vehicle

On this screen, users are able to easily add another car to their “garage.”  They toggle through their cars with the right and left arrows.  

Other Features

Screen Shot 2020-10-12 at 4.42.28 PM.png
Screen Shot 2020-10-12 at 4.42.45 PM.png
Screen Shot 2020-10-12 at 4.43.30 PM.png
Screen Shot 2020-10-12 at 4.43.12 PM.png
Screen Shot 2020-10-12 at 4.43.20 PM.png

Schedule start time

Set starting climate 

View car location

Maintenance notification

Maintenance info

 

Scoping

Over the course of the project, the team rescoped many different times. Our initial brief focused on communication between dirives during emergencies, but because there are many different existing technologies out there, our sponsor presented us with other directions for the project. These directions were as follows:

Create a new feature that invokes emotion

Our sponsor suggested creating an out-of-the-box abstract idea that would invoke a desired emotion from the user.

Update a current feature within the app

After conducting a feature audit of the existing FordPass app, we realized how many features the app already had. For this reason, we focused on updating a current feature of the app to invoke a desired emotion.

Redesign app for chosen user group

Our research from the initial scopes pointed us to a unique user group of the FordPass app: middle-aged car owners. Our final scope focused on redesigning the homepage for these users.

Rescoping proved to be very challenging for the team and for myself. I reworked my communication skills to better suit my teammates needs, and focused my efforts in areas the team was struggling. If I could do this project again, I would urge myself to pick a scope from the beginning and just work with it. All the narrowing, scoping, and deliberating forced the team to lose valuable time in which we could have spent researching and ideating. It was difficult to get everyone on the same page, and this led to confusion over the course of the entire project. 

 

Research

The team utilized many different types of research throughout the project to inform our redesign. From primary research to secondary research, take a closer look at our methods below. 

Desirability Model | to understand user desires

Goals

  • Use this graphic model to display the users’ emotions toward a product or a brand and its capabilities

  • Use this to guide our research and ideation along the design process with a core set of values

Takeaways

The overall model reads: “control and organization allow me to feel relaxed, powerful, and effective, because I can unlock my car, find my parking spot, and know my car’s health.” Based on this, we were able to ensure that our ideation and final design could be properly aligned to our users' desires, values, and expectations. We crafted each of the rungs based on our interviews, inspirational analysis, and additional secondary research. I found this to be a unique method that helped me consider the implications of my decisions throughout the project.  

Desire: 

control & organization

Emotional Cues:
relaxed, powerful, effective

Product Cues:
unlock car, find car, know car health

Inspirational Analysis with Design Feature Affinity Diagram

Goals

In order to be able to deliver on our original scope (redesigning FordPass to recreate a positive emotion that users have when using their favorite app) the team explored each of our favorite apps. I analyzed Spotify and SoundHound. These apps both rank high on my list of favorite apps because of their ease of navigation and exciting micro-interactions. I sought to discover and interpret the emotions, features, interactions, feelings, moments, or experiences centered within these digital experiences. After doing so, the team came together to create an affinity diagram in order to uncover the consistencies of our findings. 

Takeaways

We highlighted five qualities of experiences that were prominent themes in each of our individual analyses, in which we wanted to incorporate and apply to our designs:

structure.png

Efficient Organization 

Being able to easily switch between screens within an app, knowing how to access the information you need, and minimal-clicks. 

witness.png

Visual Engagement

Using visual icons to convey meaning and reduce the mental load on our users' brains, and using captivating interactions.

touch.png

Accessible

Following accessibility standards/guidelines, and making sure our user group is able to use whatever we design.

padlock.png

Reliabilty

Using Face ID for passwords & authorization for quick actions. We want our design to work well and to work rapidly.

rotate.png

Familiarity

Using consistent gestures and interactions eases adoption, thus, our design will be familiar and natural.

Feature Audit of current FordPass app

&

Site Map | FordPass Information Architecture

Goals

In order to be able to redesign FordPass, the team needed a detailed and clear understanding of the existing FordPass app. I spearheaded these two portions of our research, and gave my teammates the rundown.

  • From our feature audit, we sought to identify the features that FordPass currently offered, and to identify areas for improvement 

  • From our site map, we aimed to explore ways in which a new idea could be incorporated into the existing infrastructure

FordPass IA.png

Takeaways

  • There are four distinct sections within FordPass: Move, Find, Guides, and Account 

  • The "Guides" section was dense and included many repeated topics for directions

  • Organization was unstructured and confusing with no consistency between screens

  • Room for elaboration within "Maps"

  • Home screen may provide opportunities for an addition or restructuring

FordPass Site Map

Interviews with FordPass users and older car owners

&

On-Site Research Visit with local Ford dealership

Goals

  • The team conducted several rounds of interviews with four people who use FordPass. Our goal was to learn about their likes and dislikes with the app, and how these likes and dislikes impacted the emotions they felt when interacting with the app

  • We also visited a local Ford dealership in the Lafayette, IN area to talk with the salespeople about how they sell/introduce the app to their customers, and to understand a different user perspective of the app

Takeaways

These different forms of primary research proved to be very helpful during ideation and scoping. Our takeaways and insights were as follows: 

  • Many users want to easily visualize certain car characteristics, such as oil level, fuel level, and tire pressure. Burying these features proved to be a point of confusion for many users 

  • As key fobs are becoming a thing of the past, the remote start feature was seen as the "most relevant" feature

  • License plate and VIN numbers were looked at often 

  • Liked that dealers can input maintenance information right into the app

  • Did not like that FordPass is only available to select cars in Ford's inventory. This limited the app's use

 

Ideation & Prototyping

As the team conducted research, we sketched based on specific insights from each method. My ideation became more targeted and specific as our insights became more focused. This was a fun and unique project because of the many different realms we were able to ideate within. Pictured below are a few of my sketches throughout the project: 

sketches 11.11.2.jpg
sketches 11.18.png
home to details sketch.png
sketches 11.11.jpg

FordPass Homepage v.2

FordPass Homepage v.3

FordPass Homepage v.4

One team consolidated sketch mockup

Sketching based on research insights

Consolidated sketch of the homepage

Mid-fi mockups in Figma

Interactive prototype in Figma

Concept testing 

Iterations to specific features

Back to top. 

up-arrow-button.png

FordPass Homepage v.1

Our ideation process was iterative, extensive, and exciting! Pictured below is the process the team went though before arriving at our final design. Although it seemed to be convoluted at times, it's what made our project challenging and rewarding.

The Process