Swyfft Navigation Redesign

Project Info

  • Role: Senior UX/UI Designer and Developer
  • Brand: Swyfft
  • Timeline: March - April 2019

Materials & Tools

Summary

After performing numerous UX interviews and tests with a group of insurance agents using Swyfft in New Jersey, the data determined that the navigation was an area that could yield maximum returns with minimal effort. Firstly, the navigation was not effective for responsive web. Second, the product navigation did not provide enought information (it needed to explain which states each product was offered in). Here is a video that shows the original look of the navigation. As of this writing, this is the current navigation experience on Swyfft.com.

Approach

To fix the navigation, I started by developing a Design Prototyping Site with React, so that the changes could be demonstrated dynamically. I first made the navigation responsive, then added a hover effect to show the states associated with each product. I then had to optimize this for mobile, and implemented a novel way to target mobile devices on React to render location icons that display the states for each product when tapped on a mobile device. I also made various other improvements, such as replacing the username with a user icon to indicate a logged in status, and improved the hamburger menu interactions and design. As a part of my implementation and testing, I also fixed a plethora of bugs with internet explorer that had not been addressed. (40% of our user base operated on IE 11, unfortunately).

Mobile Demo