HomeUI&UX DesignWeb Design

Avnet Electronic Components and Services

The Client

Avnet, Inc. is one of the world’s largest distributors of electronic components and embedded solutions and the headquartered in Phoenix, Arizona. Charles Avnet founded Avnet, Inc. in 1921. After its start on Manhattan’s Radio Row, the company became incorporated in 1955. Avnet made $17.4 billion in revenues in 2017.

Overview

Avnet’s rebrand took place over a period of 1 year, and I joined their team back in 2016. As UI/UX designer I utilized user-centered design principles that ensured user-experience is formulated to achieve the goals of their organization. As a member of the design team, I was responsible for contributing web content, layouts, UX design, and innovation of their website. Our team worked closely with the web development team to design and execute web-based marketing solutions, programs/campaigns to meet the business objectives.

Design Process

Designed the product including web and mobile from the bottom up. Created interfaces that quickly converted customers into long-term users. The new re-branding and web design helped increase online conversion rate & revenue from 1% to 3% or generated +$200 Million in revenue.

Project Goal

Avnet has more than 300 locations all around the globe. Each of the Avnet’s regional websites was under different servers, and they didn’t use the same branding and colors. Our waterfall approach began with redesigning the branding and the website. The goal was to rebrand the Avnet’s company website and bring all the regional website under one umbrella Avnet.com.

My Role

As UX and web designer at Avnet, I worked with a large team to migrate over 1500 web pages in IBM WebSphere. Avnet’s rebrand took place over a period of 1 year, collaborating with marketing, development and design teams. I had a hybrid role as both a web and UX designer. As UX designer I designed page layouts and brand guidelines for the rebranding of Avnet’s company website. As a UI designer, I worked on creating interfaces, front pages and the tools to navigate through the site.

Once the design was established web designers, including myself, populated the layouts created by the UX team with content using HTML and CSS inside of IBM WebSphere. Commerce for Avnet products was a complicated system updated to manage products along with their descriptions and images. I implemented and maintained the web design parameters, style, and visual standards. I manage daily web content additions/changes from a product marketing and integrated marketing team. I reviewed all content before publication to ensure consistent design throughout the entire site.

Flow

Information Architecture: we started with a Microsoft Word, and Excel Doc identifying the current site architecture then migrated it to a visual Flow Chart. Used Sketch flowchart software.

Sketch

At this time my head was filled with ideas and the fastest way to get them out for evaluation was to sketch. I focused on a basic set of landing pages and customized dashboards and navigation, trying to incorporate the look and feel of the style guide requirements. For internal purposes, I created a few low-fidelity prototypes.

Wireframe

With the approved look and feel finalized, we migrated onto critical features of the site. Wireframes allowed me to quickly move around sections and make quick updates to the prototype. Used Adobe Illustrator to wireframe.

Prototype

After we had a consensus on the primary user flow, we presented landing pages and navigation options.

Web design

With the development team already hard at work developing IBM portal, CMS and web components our team moved forward with the significant data transferring, populating the layouts with content using HTML, CSS, and JavaScript. We created responsive web pages for mobile and tablet.

Testing

Tested the alpha version on a test server and provided high-level feedback, and a more complex review of the design in beta version. We invited test users to our office to test the website.