allstate: the final details page
wireframes, stakeholder conversations, and taking lead from start to hand-off. three separate flows had to fit onto one page — without making that page unbearable.
role
team lead & ux designer
timeline
jun 2022 — sep 2022
team
2 ux designers, 1 content designer, 1 visual designer, 1 ux researcher, 12 business stakeholders
methods
wireframing and live designing in sketch, presenting in mural, zoom and teams
the problem
the final details page is part of the shop & buy purchase flow. it’s where a user fills in any missing details before completing the steps to buy their auto policy.
the page already existed. we were tasked with also putting myaccount, paperless, and esign on it. all three were individual pages, which made the purchase flow incredibly lengthy to get through. doing that without overloading the page was the whole challenge.
my role
- creating concepts and screens
- delegating work to other team members
- initiating live design sessions
- leading stakeholder meetings
the first step…
the first step in this design was to put everything onto the page.
usually i’d be mapping steps out, sketching, all the ux design textbook works. but with a tight deadline and limited communication with stakeholders around details, this is how we made sense of the project at hand.
…leads to many more
almost immediately it was clear we’d need a creative way to condense the page. i took the early initiative to introduce accordions for some components. that would go on to shape how we approached the page in every future iteration.
the accordions were a hit with the team, but i still needed to get familiar with each new component and how it would interact with the existing ones. the main things to keep in mind:
- many of the new components only appeared depending on whether the user was logged into myaccount while they were on the screen
- not everything was required for the user to complete on the page — opting into paperless, for instance
- users didn’t technically have to move through the components linearly, because many of them weren’t dependent on each other
- there was concern about accordions not providing feedback to users about which steps still needed to be completed
fitting everything on the page was easy. the hard part was figuring out the order that made the most sense for technical feasibility and for the user at the same time.
accordions and steppers
i came up with multiple concepts for accordions and steppers, created in collaboration with the visual designer, who knew what was possible and what had been done in previous designs. i was given the creative freedom to think outside of the box.
new ideas: color and tags
during a work-in-progress session we thought about using card colors to signal the status of completion within accordion steps.
while exploring our design library i saw that tags were a new component that had just been introduced. they hadn’t been used with accordions before, but i thought about how well they’d complement the card colors. users on screen readers or who are colorblind would be signalled by the words on the tag — much more accessible than using color alone.
teamwork makes the designs work
this whole time i’d been communicating closely and live designing with the content designer, the visual designer, and the other ux designer on the team.
earlier in my time at allstate, the content team voiced a concern: that other designers would complete all the work for a project and exclude content from doing their jobs until the last minute.
as a designer i heard that concern and involved our content designer from the very beginning. from low fidelity wireframes to hand-off, we worked together in live design sessions and daily check-ins to build the final details page together.
“Mina is astute, detail-oriented, and articulate. She is good at getting back to teammates in a timely manner and always makes sure that the problem at hand is solved in a careful manner. She is effective at meeting management and at redirecting team attention back to the matter at hand. I loved working with Mina because I know she would never drop the ball on a project.”
the prototype
an interactive prototype i put together to show stakeholders.
future work
my part of this project was done almost entirely for desktop users, but the concern about a long page was growing as we approached designing for mobile.
here’s when i proposed an a/b test against another version of the same design, split up into two pages. stakeholders pushed back against the idea, but they agreed the ux researchers could conduct the test after launch. more research to figure out what works best for users is always a win.
final details today, and reflections
after my hand-off to the visual design team, the transition of finalizing it was seamless. that was the product of involving one of the visual designers so heavily in the first stages of this project. my major takeaways:
- early involvement with all parts of the design team makes the process smoother, more collaborative, and overall a better design experience.
- stakeholder communication is key. if i were to go back and do this again i’d have a regularly scheduled check-in with stakeholders, and ask more questions about the logistics to challenge their ideas of the work that needed to be done in order to meet their needs.
- live design sessions are now a technique i’m a huge advocate of. they’re so collaborative, and so many great ideas come from creating spaces like that.
also at allstate
alongside the final details page i led the conversation design for allstate chat, tracking down why users asking to cancel a policy or change a payment were hitting a dead end.