Site Review: Avnet’s Forward-Thinking Design

Site Review: Avnet’s Forward-Thinking Design

Site Review: Avnet’s Forward-Thinking Design

Avnet is the leading electronics distribution company, with $26.2 billion on revenue – according to Modern Distribution Management.

In Spring 2017, they redesigned their website to reflect their new branding – “reach forward” – and to speak to a younger audience. In this article, we review Avnet’s design approaches – where they are succeeding (and not) and the tactics they are using.

Homepage Content

The focus below the header is very focused and uncluttered. From top to bottom, the sections include:

  • Featured Product section with only one product – which gives it more weight than multiple featured products.
  • A section calling out Avnet’s Services.
  • Recruitment widget that displays the number of jobs available, and the ability to quickly search for jobs in your region of the globe.
  • Communities prominently displayed on the right side. This features links to communities that use Avnet products. It’s a smart way to link active DIY/engineering communities with their products. This is well integrated into the site – it makes visual sense and content is highly relevant to target audience.

General Design

Clean, overall minimalist design in line with a modern design approach.

  • Design Elements: the use of angled graphics throughout the site (reinforcing the angled “A” form in their logo) lends visual excitement, popping out against the horizontal and vertical lines of the other elements in the grid.
  • Color: a modern color palette of muted greys and leafy green that communicates high-end technology while also hinting at sustainability & concern for the environment. Subtle way to target millennials who embrace both tech and sustainability. (Avnet also has a page proclaiming their commitment to human rights across their supply chain).
  • Typography: crisp, modern, sans-serif typeface with a touch of personality that keeps it from looking too generic. Another subtle touch. Simple, default sans-serif for body copy supports good legibility.
  • Responsiveness: excellent responsive design – has been specifically designed with a unique UI that reads well on mobile display. Key in reaching millenials who consume a high percentage of digital content on smartphones.
  • Images: average stock photo imagery, which detracts from the unique profile established by the thoughtful use of typography and color.

User Experience

While the design is modern, the website user experience suffers from some of these choices.

  • Header: animated carousel/slideshow header. This is a poor design choice for two reasons.
    • It’s well-established from user-testing that people do not like animated sliders – they are considered distracting and annoying.
    • It fails to establish a clear call-to-action or value statement. The header is the main opportunity to communicate a key message, not confuse with five diferent ones. It’s difficult enought to capture a user’s attention – don’t scare them off with zooming slides and multiple messages.
  • Sidebar Navigation: the vertical side navigation on left side of homepage is confusing. The expectation is that those menu items are links to new sections – instead they just bring up one of the animated header slides, where the user must then click a second button to go somewhere new. Adds an uneccessary step, and represents a doubling-down on an unpopular UI component (the animated slider).
    Main Menu Dropdowns: the angled, animated shapes behind the main menu items add an unnecessary layer of distraction, and detract from the clarity of navigation. The dropdown menus also display two visually distinct columns of menu options without a clear hierarchy. Not immediately apparent how one side relates to the other.

Key Takeaways:

  1. While branding and design are important for differentiation and building affinity, your website’s first job is to be as easy as possible for your users to use. Design should work in service of optimizing user experience, rather than the other way around.
  2. Avnet hasn’t prioritized eCommerce on this website – it is clearly a branding and marketing-focused website. While this helps elevate the brand, we expect to see the site design to change as digital revenue becomes a bigger priority.
  3. What it’s doing really well: a big and clear search bar, a focused top navigation and the integration of smart widgets to feature interesting content (careers, communities)

We look forward to continue to watch and learn from what Avnet is testing and trying.