Finding the Right Design Pattern for the Right Problem

User Persona based on competitive analysis and user interviews.

Navigation

Desktop

  1. 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.
  2. 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.
  3. 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.
Navigation design pattern examples on desktop — https://www.hioscar.com/ & https://www.jetty.com/

Mobile

  1. 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.
  2. 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.
  3. 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.
Navigation design pattern examples on mobile — https://www.lemonade.com/ & https://www.amfam.com/

Search

Desktop

  1. The search feature on American Family Insurance’s website immediately offers suggestions and popular searches when you click on their search bar.
  2. 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.
Search design pattern examples on desktop — https://www.amfam.com/ & https://www.apple.com/

Mobile

Search design pattern examples on mobile — https://www.amfam.com/
  1. 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.
  2. 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.
Search design pattern examples on mobile — https://www.amfam.com/

Cards

Card design patterns on desktop — https://www.lemonade.com/
  1. The different ways these two types of content are stylized helps the user quickly decide what they need and where they should go.
  2. 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.
Card design patterns on desktop — https://www.tedtoddinsurance.com/

Takeaways

--

--

--

UX/UI Designer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How To Use An Engineer’s Scale

Building Inclusive Cities

Presentation trend 2017

Devnagri — India’s First AI-powered Translation & Localisation Tool

Tips for Successful Field User Research — Planning

5 Features of Website Design and Development Services

The Extentia Blog: A Personal Perspective on UX — Then and Now

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tricia Donovan

Tricia Donovan

UX/UI Designer

More from Medium

A recipe for success: When Design Thinking meets Agile

Redesigning Loblawdigital.co: A Deep Dive into our Visual Design Process

Unfolding the confounded numbers

The Importance of Prototyping in Design 2022 : Aalpha