Industry: Insurance
Role: Product Design
Year: 2018
BACKGROUND
AAA of Michigan is the second largest AAA club with 10.5 million members. AAA wanted to provide their members with a updated site where users can get insurance quotes and manage their policies.
TEAM
Our team consisted of a Project Manager, Lead Designer, and two Product Designers. We also had two Front-End developers helping to build prototypes for user testing.
The ask
Our scope focused on getting an auto quote plus binding, and getting an home quote. Our timeline was 12 weeks which involved requirements gathering, creating concept designs, translating concepts to wireframes, user testing our designs and producing visual designs.
Interaction Design
In 6 weeks, we had to design auto and home quotes user flow. We collaborated with development leads to understand requirements and translate into wireframes. We spent the first two weeks, digesting the requirements and questioning business decisions that might conflict with user experience. The remaining four weeks we spent sketching and building wireframes.
Wireframes
Working Smarter With Nested Symbols
Using nested symbols made it easy for two designers to divide and conquer. We split interaction work between Auto Quote and Auto Bind and used the same symbol library so our designs would utilize the same design language.
Interaction Challenges
Requirements Gathering - We worked with development leads to understand product requirements. We received lengthy excel sheets with all of the products field name, description, type and format. This was often laborious to digest and sometimes had bad design requirements causing a poor user experience.
Lack of User Stories - Typically we create user stories which are simplified explanations of requirements. In our scope, we did not have it scoped out making it difficult to design for every use case. We solved for this by creating a master document with conditional fields, color coding the conditional elements and the providing notes for the engineering team.
User Testing
After getting to a comfortable place, we tested our concepts to understand where users might struggle. We found that users commonly missed inputting vehicle and driver info because they didn't see the "Provide Details" button. We changed the designs to automatically display the questions to make it more obvious.
Before & After
Design Language
We created a design system that included all the components they might need so that the AAA dev team could build any page they might need. Doing so, is particularly useful as the product teams could build anything with the same design language.
Auto Quote Visuals
Prototyping the Home Page
Shipping Product
We utilized Zeplin to communicate designs to the development team. This was particularly useful as developers could get specs and CSS directly.
OUTCOMES
User Sessions
Using google analytics, we measured user sessions before and after the re-designs. These sessions were defaulted to expire 30 mins after inactivity.
We chose to measure a weeklong time frames that could give us a glimpse into the performance of before and after designs. Disclosure: We made sure to pick dates that did not coincide with any marketing campaigns or any other events that might have affected traffic to the site.
Auto Quote Completion
Using google analytics, we measure the completion rate of users completing getting an auto quote. This meant users having visited the last page of auto quote flow within one session.
In completion rates, we saw a 63% increase in pageviews. As designers we were ecstatic and from these metrics we inferred the new auto quote designs were easier for users to complete explaining the increase.
Learnings
Create User Stories - After requirement gatherings, we typically create user stories to support the requirements. These stories would allow us to design for each use case instead of one master file with all of the scenarios. The design team pushed for user stories but was turned down in lieu of budget.
Utilize An Issue Tracker - It would have been great to use Jira to give the team better visibility into the sprints. Due to security concerns, we were not able to use this software. We instead relied on dev meetings twice a week burning time an issue tracker could solve for.
Plan for Updates - After user testing, we found areas to improve, however we did not scope time to update our designs based on insights. This meant was working overtime to apply changes to still deliver on schedule.