The current Icom America website was developed over ten years ago and needs a major update. I did an analysis on the content and data, and know there are major UX heuristic problems with the navigation and flow. Budgetary concerns have kept the site static, so I approached the idea of designing it as my side project and discussed with internal stakeholders to start work on developing it to a responsive framework. Once I'm in a good spot with the design, the company will look at options for development.
The most challenging thing to work through (besides being a static site) has been the flow through the site to actually view and learn about the products because of the way the navigation is constructed.
Content Inventory & Information Architecture
The Icom site has thousands of pages, and multiple different page layouts. I wanted to break this project into 2 different phases. The first being migrating the current content into a responsive framework without making major changes to any sort of features or other structure except for the navigation, which is the worst culprit to user experience. I dove in, and started documenting which layouts were most used, and effectiveness of pages according to quantitative metrics from Google analytics.
Going into the data, I found mobile users had surpassed desktop users, even for a corporate website with much of the userbase being B2B. Further into the data, there are some specific navigation issues in the current framework.
Users have a difficult time getting into product categories through the navigation because there is not a landing page for each category, but a scrolling nav bar with product housed in it. You see above that the hidden products in the nav (green) are all less clicked because the user must click a small arrow to the right to scroll through the product. All the division pages are this way and all have similar click through.
Another major issue is when a user clicks on a specific division (avionics, marine, etc.) it confuses the users because it lands to whatever specific product that is first in the navigation for that category. Click through rate on the navigation also validates the issues that users have trying to find a specific product.
I decided to do a tree map of the current site and fix the paths that were confusing. In this exercise, I knew I would have to design the missing category pages from scratch that would showcase products for each corresponding category.
Wireframing & Comping
Phase 1 of this project was to take all existing data and design with what is current before adding any extra data/content features. I had planned out the treemaps for the site, and began working through the major page templates with the responsive framework in mind (Bootstrap) for the future development. Most of the traffic comes through sidedoors (searches, articles, blogs, video sites, etc) so I began with the most important page templates and worked from product pages down to the terms of service.
Navigation would be completely redesigned to highlight product divisions, which was the vast majority of searches and traffic flow from the research I did.
Products are the main focus of the website and I wanted to incorporate large imagery that helped make them stand out. The current site image carousels work differently depending on what page the user is on, and I wanted to make them consiatant and have functionality to link to the corresponding item that's being shown.
I trimmed down some of the text/sections based on click data, and streamlined the userflow when they drill down into the products. I have started to develop the pages, and continue to work on the template pages.
Once the template pages are done, I will rewrite a good portion of the code to reflect the current information, so it will have a smoother migration once the backend is developed. I hope to have the resources to do some user testing and iterate on the design based on those findings.
After that, phase 2 will begin and I will be in discussion with stakeholders to add or adjust features such as integrating the current blog into the main site, an interactive B2B dealer map, and a dealer portal that integrates directly with the site.
Icom attends upwards of 60 tradeshows a year for the four divisions of product they carry. I work closely with the amateur radio division division primarily, and help design everything from the physical cases to the graphics that will accompany the tradeshow booths. During these builds, there are a team of 3 of us that work together and create a booth. This highlited tradeshow is one of the larger builds.
Large tradeshows like this one take months of preparation and planning. When we start a build, I pay very close attention to the actual location and determine the flow of foot traffic during the event and how visitors will be able to have the best experience in the booth. I have to keep resources and budget in mind when starting to plan out the structures as well as estimate how much time it may take a team to construct a booth. All shows have different size booths, layouts, and product lineups constantly change so there can be many variables at work in the planning stages. I went through dozens of the layout comp to maximize space, traffic flow, and marketing the brand.
Deliverables, Marketing, and Logistics
Large tradeshows like this one take months of preparation and planning. When we start a build, I pay very close attention to the actual location and determine the flow of foot traffic during the event and how visitors will be able to have the best experience in the booth. I have to keep resources and budget in mind when starting to plan out the structures as well as estimate how much time it may take a team to construct a booth.
All shows have different size booths, layouts, and product lineups constantly change so there can be many variables at work in the planning stages. I went through dozens of the layout comp to maximize space, traffic flow, and marketing the brand.
We came up with a marketing theme that is for a sweepstakes to win a trip. I've produced all the assets for the theme to coordinate with the tradeshow including: Banners, booth graphics, posters, social media digital assets, stand-up banners, t-shirts, pens, swag, bumper stickers, magazine ads, digital ads, videos, photos, and email newsletters. Whew!
Visitors to this booth had a great experience from previous years and traffic was much better for them to engage and interact with representatives to learn more about the products. We were able to utilize truss work we already had, and reduced the installation time dramatically with an open floor plan and having stations for each category of products.
Icom does business in all things radio communication and supports a good part of marketing with campaigns and dealer support. I help develop campaigns for ads and social media efforts as well as track the metrics and initiate social ad campaigns. Digital or print graphics projects are not all alike and have their own challenges. If you'd like to see more graphical work, I can provide many different examples.