Designing and prototyping a new term life quoter for Mutual of Omaha
Role: UX Visual Designer
Toolkits used: Figma
Starting point
The old term life quoter within Mutual of Omaha was outdated and stopped working. I was tasked with creating a new one.
Utilizing Figma and it's updated prototyping capabilities, I created an advanced prototype that could show all of the different states possible.
The Design
To begin, I created all the components I anticipated needing for the design. Since my goal was to assemble a prototype for this project, I made sure to keep each piece simple and easy to adjust for later.
Term life quoter design components
Once the individual components of the design were complete, I started assembling them. I focused on creating the quote selection area and the coverage amounts, then placed these elements onto the page in preparation for building the prototype.
Combined component sections used in final design
The Prototype
Now that the design has been finished, it was time to create the prototype. I needed to start building out the different variables and interactions on the individual component pieces that would be clickable.
Starting with the selection toggles, I continued into building out the input selections with the show/hide elements on the page. Since we were going to be showing 3 different states (exceeded amount, quote amounts, and an error state) I made sure that each would be shown properly through the different input values and "calculate quote" button clicks.
Component variables for the different toggles
Interaction panel from the "Calculate Quote" button
Final Touches
Now that the design was finished and the prototype was functional, I presented the final work to senior designers and architects. The design was incredibly well received by both seniors and architects.
The prototype was just another example of the capabilities that Figma was able to accomplish with the new advanced prototyping features without needing multiple different screen states.
Explore the prototype
If you'd like to follow the specific states without the need to guess, follow the instructions below...or you can just play around with it :)
If you want to restart the prototype at any time, click on the icon.
Error State
Click the "Calculate Quote" button (NOTE: Do not have any of the inputs filled in)
Exceeded Quote Amount
1. Click "Male" under "Gender" and "Yes" under "Tobacco Use"
2. Click the "Date of Birth" and "Coverage Amount" inputs
3. Click the "Calculate Quote" button
Quote Amounts
1. Click "Female" under "Gender" and "No" under "Tobacco Use"
2. Click the "Date of Birth" and "Coverage Amount" inputs
