State Farm came to YML with a challenge; to streamline a complex experience into something simple, practical, and sleek.
State Farm came to YML with a challenge; to streamline a complex experience into something simple, practical, and sleek.
State Farm came to YML with a challenge; to streamline a complex experience into something simple, practical, and sleek.
Team
Team
Team
YML
YML
YML
Apr 2020 - Mar 2021
Apr 2020 - Mar 2021
Apr 2020 - Mar 2021
Role
Role
Role
Product designer
Product designer
Product designer
Contribution
Contribution
Contribution
User research
User research
User research
Product design
Product design
Product design
Prototyping
Prototyping
Prototyping
Design system
Design system
Design system
iOS design
iOS design
iOS design
Android design
Android design
Android design
View live app
View live app
View live app
View live app
01 — Mobile app redesign
01 — Mobile app redesign
01 — Mobile app redesign
Challenge
Challenge
Challenge
State Farm wanted to revamp its app while addressing key UX issues and maintaining its unique brand.
State Farm wanted to revamp its app while addressing key UX issues and maintaining its unique brand.
State Farm wanted to revamp its app while addressing key UX issues and maintaining its unique brand.
Problem 1 — Outdated UI
Problem 1 — Outdated UI
Problem 1 — Outdated UI
State Farm’s app was very popular, however, they wanted to create a more modern interface that felt new and competitive to similar products.
State Farm’s app was very popular, however, they wanted to create a more modern interface that felt new and competitive to similar products.
State Farm’s app was very popular, however, they wanted to create a more modern interface that felt new and competitive to similar products.
Solution
Solution
Solution
We began tackling the project by overhauling the current UI to be friendlier, warmer, and more oriented toward users’ needs. The UI utilized approachable cards, an updated font that reflected the brand of State Farm, and colorful illustrations/icons. The updates provided breathing room for the important interactions for the app while reflecting the warmth and care of the State Farm brand.
We began tackling the project by overhauling the current UI to be friendlier, warmer, and more oriented toward users’ needs. The UI utilized approachable cards, an updated font that reflected the brand of State Farm, and colorful illustrations/icons. The updates provided breathing room for the important interactions for the app while reflecting the warmth and care of the State Farm brand.
We began tackling the project by overhauling the current UI to be friendlier, warmer, and more oriented toward users’ needs. The UI utilized approachable cards, an updated font that reflected the brand of State Farm, and colorful illustrations/icons. The updates provided breathing room for the important interactions for the app while reflecting the warmth and care of the State Farm brand.
Problem 2 — Lack of guidance
Problem 2 — Lack of guidance
Problem 2 — Lack of guidance
Another big concern that various customers posed to State Farm was the lack of guidance on the home screen of the app. For example, key features were hidden and not utilized including filing a claim, viewing ID cards, and accessing roadside actions.
Another big concern that various customers posed to State Farm was the lack of guidance on the home screen of the app. For example, key features were hidden and not utilized including filing a claim, viewing ID cards, and accessing roadside actions.
Another big concern that various customers posed to State Farm was the lack of guidance on the home screen of the app. For example, key features were hidden and not utilized including filing a claim, viewing ID cards, and accessing roadside actions.
Solution
Solution
Solution
To combat this, we reformatted the layout of the overview screen to start with the top three most used features of the app; upcoming bills, insurance cards, and roadside assistance. By using large friendly cards, customers can now quickly scan and see their information with clarity.
To combat this, we reformatted the layout of the overview screen to start with the top three most used features of the app; upcoming bills, insurance cards, and roadside assistance. By using large friendly cards, customers can now quickly scan and see their information with clarity.
To combat this, we reformatted the layout of the overview screen to start with the top three most used features of the app; upcoming bills, insurance cards, and roadside assistance. By using large friendly cards, customers can now quickly scan and see their information with clarity.
Team & Role
Team & Role
Team & Role
Role & Team
As one of the product designers on this project (out of 2), I worked alongside YML’s design team, product managers, art directors, and the State Farm team.
As one of the product designers on this project (out of 2), I worked alongside YML’s design team, product managers, art directors, and the State Farm team.
As one of the product designers on this project (out of 2), I worked alongside YML’s design team, product managers, art directors, and the State Farm team.
Before and after of the Overview screen
Before and after of the Overview screen
Before and after of the Overview screen
Before and after of the Overview screen
Before and after of the Overview screen
Before and after of the Overview screen
02 — Expedited registration
02 — Expedited registration
02 — Expedited registration
To provide more guidance to customers, we also updated the registration flow to reflect this approach.
To provide more guidance to customers, we also updated the registration flow to reflect this approach.
To provide more guidance to customers, we also updated the registration flow to reflect this approach.
Progress meter
Progress meter
Progress meter
We created a new input flow with a progress meter that helped customers know how long the process would take to finish starting a new account.
We created a new input flow with a progress meter that helped customers know how long the process would take to finish starting a new account.
We created a new input flow with a progress meter that helped customers know how long the process would take to finish starting a new account.
Driver’s license scanner
Driver’s license scanner
Driver’s license scanner
We also implemented a scanner inside the onboarding flow to quickly import information for a customer. This allows customers an easy and efficient way to start their accounts.
We also implemented a scanner inside the onboarding flow to quickly import information for a customer. This allows customers an easy and efficient way to start their accounts.
We also implemented a scanner inside the onboarding flow to quickly import information for a customer. This allows customers an easy and efficient way to start their accounts.
Team & Role
Team & Role
Team & Role
Role & Team
As one of the product designers on this project (out of 2), I worked alongside YML’s design team, product managers, art directors, and the State Farm team.
As one of the product designers on this project (out of 2), I worked alongside YML’s design team, product managers, art directors, and the State Farm team.
As one of the product designers on this project (out of 2), I worked alongside YML’s design team, product managers, art directors, and the State Farm team.
Driver's license scanner flow with progress meter
Driver's license scanner flow with progress meter
Driver's license scanner flow with progress meter
Driver's license scanner flow with progress meter
Driver's license scanner flow with progress meter
Driver's license scanner flow with progress meter
03 — Insurance
03 — Insurance
03 — Insurance
Challenge
Challenge
Challenge
State Farm wanted customers’ insurance cards and policies to be more accessible and easier to view. Customers reported that during a difficult situation, their information was hard to access when needed quickly.
State Farm wanted customers’ insurance cards and policies to be more accessible and easier to view. Customers reported that during a difficult situation, their information was hard to access when needed quickly.
State Farm wanted customers’ insurance cards and policies to be more accessible and easier to view. Customers reported that during a difficult situation, their information was hard to access when needed quickly.
Solution
Solution
Solution
To remedy this, we updated the insurance screen to show all important information at a quick glance. We also allowed customers to add their insurance cards to their Apple Wallets for even easier access during difficult situations.
To remedy this, we updated the insurance screen to show all important information at a quick glance. We also allowed customers to add their insurance cards to their Apple Wallets for even easier access during difficult situations.
To remedy this, we updated the insurance screen to show all important information at a quick glance. We also allowed customers to add their insurance cards to their Apple Wallets for even easier access during difficult situations.
Team & Role
Team & Role
Team & Role
Role & Team
As one of the product designers on this project (out of 2), I worked alongside YML’s design team, product managers, art directors, and the State Farm team.
As one of the product designers on this project (out of 2), I worked alongside YML’s design team, product managers, art directors, and the State Farm team.
As one of the product designers on this project (out of 2), I worked alongside YML’s design team, product managers, art directors, and the State Farm team.
Insurance screens (empty state, filled state, policy details, insurance card details, payment confirmation)
Insurance screens (empty state, filled state, policy details, insurance card details, payment confirmation)
Insurance screens (empty state, filled state, policy details, insurance card details, payment confirmation)
Insurance screens (empty state, filled state, policy details, insurance card details, payment confirmation)
Insurance screens (empty state, filled state, policy details, insurance card details, payment confirmation)
Insurance screens (empty state, filled state, policy details, insurance card details, payment confirmation)
04 — Claims
04 — Claims
04 — Claims
Challenge
Challenge
Challenge
There were reports from customers that finding the status of their claims was difficult to find in the old app. We were requested to find a way to clearly show a claim's status and next steps.
There were reports from customers that finding the status of their claims was difficult to find in the old app. We were requested to find a way to clearly show a claim's status and next steps.
There were reports from customers that finding the status of their claims was difficult to find in the old app. We were requested to find a way to clearly show a claim's status and next steps.
Solution
Solution
Solution
For claims, we focused on using direct statements on the status of the claim on the claims detail and activity screens. Using this approach, we were able to clearly show what the status was on each claim and if there were any missing info needed from the customer.
For claims, we focused on using direct statements on the status of the claim on the claims detail and activity screens. Using this approach, we were able to clearly show what the status was on each claim and if there were any missing info needed from the customer.
For claims, we focused on using direct statements on the status of the claim on the claims detail and activity screens. Using this approach, we were able to clearly show what the status was on each claim and if there were any missing info needed from the customer.
Team & Role
Team & Role
Team & Role
Role & Team
As one of the product designers on this project (out of 2), I worked alongside YML’s design team, product managers, art directors, and the State Farm team.
As one of the product designers on this project (out of 2), I worked alongside YML’s design team, product managers, art directors, and the State Farm team.
As one of the product designers on this project (out of 2), I worked alongside YML’s design team, product managers, art directors, and the State Farm team.
Claims detail screens (empty state, open claim, estimate details, estimate status, estimate options)
Claims detail screens (empty state, open claim, estimate details, estimate status, estimate options)
Claims detail screens (empty state, open claim, estimate details, estimate status, estimate options)
Claims detail screens (empty state, open claim, estimate details, estimate status, estimate options)
Claims detail screens (empty state, open claim, estimate details, estimate status, estimate options)
Claims detail screens (empty state, open claim, estimate details, estimate status, estimate options)
05 — Design System
05 — Design System
05 — Design System
As the new mobile app was being designed, we simultaneously built and implemented a new design system for the State Farm team. My role in the design system was pushing all changes to Sketch while meeting regularly with the State Farm development teams to discuss changes and instructions on how to use the system.
We also made the system compatible for both Android and iOS to apply to both platforms.
As the new mobile app was taking shape, we simultaneously built and implanted a new design system for the State Farm team. My role in the design system was pushing all new changes to Sketch while also meeting regularly with the State Farm developer teams to discuss these changes and instructions on how to use the system.
We also made the system compatible for both Android and iOS to apply to both platforms.
As the new mobile app was being designed, we simultaneously built and implemented a new design system for the State Farm team. My role in the design system was pushing all changes to Sketch while meeting regularly with the State Farm development teams to discuss these changes and instructions on how to use the system.
We also made the system compatible for both Android and iOS to apply to both platforms.
Team & Role
Team & Role
Team & Role
Role & Team
As the main product designer on this project, I worked alongside YML’s product managers and the State Farm team.
As the main product designer on this project, I worked alongside YML’s product managers and the State Farm team.
As the main product designer on this project, I worked alongside YML’s product managers and the State Farm team.
Snapshot of the design system made in Sketch
Snapshot of the design system made in Sketch
Snapshot of the design system made in Sketch
Snapshot of the design system made in Sketch
Snapshot of the design system made in Sketch
Snapshot of the design system made in Sketch
06 — Reception
06 — Reception
06 — Reception
4.8 Stars
4.8 Stars
4.8 Stars
Reviews from over 250k customers
Reviews from over 250k customers
Reviews from over 250k customers
1 Webby Award
1 Webby Award
1 Webby Award
People's Voice Winner
People's Voice Winner
People's Voice Winner