Jul 11, 2021
Finding the Right Design Pattern for the Right Problem
Over the past few months, I have been working through the Design Thinking steps with the end goal of having an Insurance website that is usable for all of its users. I have worked through empathizing with the user’s, defining the problem, generating ideas and I am now slowly moving towards prototyping.
Before creating any designs, exploring Design Patterns was my next step. There are three main design pattern categories that I explored: Navigation, Search, and Cards. When exploring and researching what type of design pattern would be the best fit for the problem I am solving, I have my persona at the forefront.
Below are examples of design patterns I researched and why I feel they could fit my specific project focusing on Navigation, Search, and Cards.
Navigation
Based on my research and user Persona I found that users are looking for quick and easy when it comes to purchasing insurance. They find purchasing insurance overwhelming and they want an easy way to filter through the content. Because there is a lot of content when it comes to insurance, breaking down the navigation into smaller, more digestible groupings is important for the navigation. Based on the research I believe that vertical dropdown menus with dividers and images/icons will be the best way to present the information to our users on the desktop version. It will give them a simplified view of what is inside the site and help them decided where they need to be.
Desktop
- Both sites use a minimal number of elements in their Nav Bar — only 2 and 4 elements. This allows the user to easily scan the content without being overwhelmed by the number of options.
- In the dropdown menu, both sites include subcategories that give a high-level overview of the available content on the site for the user without having to go too far into the site and investing too much of their time.
- Both sites take their dropdown menu even one step further by breaking down the subcategories. Again, this allows the user to have a high-level overview of what is included so they can quickly decide where they need to go without even having to click or go to a separate page. Having this type of navigation allows the user to abort at any point without having invested too much time.
Mobile
For the mobile version, I believe the best way to present the navigation is as a modal drawer on the left side. It creates similar effects as the vertical drop-down menu where it gives the user a quick overview of what is inside without having to invest too much time by exploring different pages. The important thing with the mobile version is to be sure to use some form of breadcrumbs to let the user know where they are since there is less space in the mobile version to display all of it at once.
- In both Lemonade and American Family Insurance, they use a menu in the upper left-hand corner of the homepage that opens up into a menu. Lemonade takes up only a portion of the screen where American Family Insurance takes up the entire screen. For my design, I would go with navigation closer to Lemonade’s because I think still showing part of the homepage reminds a user that they can get out at any moment and like the desktop versions above, they don’t feel like they are stuck or have invested too much. Both sites layout their main navigation elements giving a high overview of what is all included in the site should they decide to continue.
- American Family Insurance takes the navigation a step further by allowing the user to explore further into the navigation by showing the subcategories to the navigation elements and then from there breaking the subcategories down even further.
- Because there is less screen space on the mobile version so displaying an entire navigation category at once is not possible, using breadcrumbs or some form of information letting the user know where they are once they start clicking further into the navigation is important. American Family Insurance does that by including the name of the category they are in at the top when the user has clicked into the subcategory. Again, based on my research and persona, this allows the user to quickly scan the content without spending too much time exploring the site.
Search
I found through my research that users are very overwhelmed by the amount of information on Insurance websites and by the language used. Because of that, I think it is important that the search feature uses some form of autocomplete as well as includes suggestions. Many users are already intimidated when going to an insurance site and the idea of searching for something that they are not familiar with would add to those overwhelming feelings. Guiding a user on the site is a top priority based on my research. I want them to feel supported throughout the entire process so including auto-complete in the search, I believe, adds an element of support as well as speed. Including “popular searches” in the search is also a useful way to support users who don’t know exactly what they are looking for by helping direct them.
Desktop
- The search feature on American Family Insurance’s website immediately offers suggestions and popular searches when you click on their search bar.
- Apple does a very similar thing by adding “Quick Links” which allows the user to click on main product pages as well as includes “Suggested Searches” which gives more specific search result suggestions.
Mobile
- The only real difference between the search feature in the mobile and desktop versions of these two sites is that the search feature is located within the Menu/Navigation above the navigation categories. this is beneficial for the user because the navigation and search features are in the same place and require only one click to get there.
- The way the search feature acts in the mobile versions of both sites is the same as their desktop versions when the search bar is tapped — they offer more general suggested searches and pages which are mainly their products and then once the user starts typing it uses autocomplete knowledge to come up with more specific content related to their search.
In both these sites, their search features offer autocomplete and suggestions which make the process quicker for those who know exactly what they want and offers support for those who don’t know exactly what they want and maybe using the search feature to browse.
Cards
Feeling overwhelmed by the number of choices was a common response from the user’s during my user interviews. Due to the number of options and content included in insurance websites, cards are an important way to help present all the content in a digestible way. Creating different card types for different content types allows the user to scan through and see which content they are looking for and then explore whatever content/product they need. This allows the user to move faster through the website without feeling overwhelmed or needing to digest all the information. Because there is less for the user to digest the CTA’s can stand out more as well. The cards create a visual journey through the page while each card has its own visual and hierarchical journey as well.
Because insurance has many subcategories, cards help with organizing content that isn’t related (i.e. Auto, Home, and Health are all fit under an individual insurance category and can be grouped but are completely different products).
Also, cards are great with responsive design!
- The different ways these two types of content are stylized helps the user quickly decide what they need and where they should go.
- The cards on Ted Todd allow for the different types of insurances (which contain completely different content) to be grouped for the user to find in one place quickly without having to click to multiple different pages to find what they need.
Takeaways
Overall, the process of exploring existing design patterns for specific features was a great way to see what works and why. Breaking down the different features of a site and looking for design patterns that way ensured that I was putting the persona and user research first, rather than picking a whole design pattern and thinking it could work for my unique problem. Taking the time to explore existing design patterns that work and curating what elements of those work best for my design, I realized, is making sure that a user’s experience for this unique problem is being put first.
