Arrow: Library

A beautifully unique take on the employee onboarding process. Blending best-in-class interactive animation and clean, simple UX/UI.

Background

Arrow Electronics sought assistance in developing a concise yet comprehensive website aimed at facilitating new employees' understanding of the company. The website would provide access to information about various departments, subsidiaries, as well as resources such as videos, PowerPoint presentations, and informational PDFs, ensuring a thorough onboarding experience.

Challenge

Creating a website with an interactive animated UI poses several challenges:

  • Technical Complexity: Implementing interactive animations requires advanced front-end development skills and knowledge of animation libraries or frameworks. Integrating these animations seamlessly with other website features while ensuring compatibility across different browsers and devices adds to the challenge.
  • Performance Optimization: Animated UI elements can impact website performance, leading to longer loading times and potential lagging or stuttering animations. Optimizing performance while maintaining the desired level of interactivity and visual appeal requires careful attention to code optimization and resource management.
  • User Experience: While animations can enhance user engagement and aesthetics, excessive or poorly executed animations may distract or frustrate users. Balancing usability with visual appeal is crucial to ensure a positive user experience.
  • Cross-Browser Compatibility: Ensuring that interactive animations function correctly across various web browsers and platforms adds another layer of complexity. Testing and debugging across multiple browsers and devices are essential to guarantee a consistent experience for all users.
  • Accessibility: Animated UI elements should be accessible to users with disabilities, including those who rely on screen readers or keyboard navigation. Implementing accessible animations and providing alternative content for non-visual users requires careful consideration and adherence to web accessibility standards.

Overall, creating a website with interactive animated UI elements while meeting the specified requirements involves addressing technical, performance, user experience, cross-browser compatibility, and accessibility challenges to deliver a seamless and engaging user experience.

Solution

Implementing an interactive, easy-to-navigate circular bullseye as the primary UI element addresses several challenges inherent in creating a website with interactive animations:

  • Intuitive Navigation: The bullseye provides a visually intuitive navigation mechanism, allowing users to easily access different parts of the site by interacting with the elements on the bullseye. This simplifies the user experience, reducing the cognitive load associated with navigating the website.
  • Engaging Interaction: Interactive elements like the bullseye enhance user engagement by providing a dynamic and visually appealing interface. Users are more likely to explore the website and interact with its content when presented with interactive elements that capture their attention.
  • Performance Optimization: By using a bullseye as the main interactive UI element, developers can optimize performance by focusing animation efforts on a single component rather than numerous elements scattered throughout the site. This helps mitigate performance issues and ensures smoother animations and faster loading times.
  • Consistent User Experience: The bullseye provides a consistent navigation experience across different parts of the website, promoting usability and preventing user confusion. Users can rely on the familiar interaction pattern of the bullseye to navigate to various sections of the site consistently.
  • Accessibility Considerations: When properly implemented, interactive UI elements like the bullseye can be made accessible to users with disabilities. Providing keyboard navigation options and ensuring compatibility with assistive technologies allows all users, including those with disabilities, to access and navigate the website effectively.

Impact

This new and innovative tool was successfully rolled out to all Arrow employees (30,000) globally. Arrow Library will be a mandatory component of new employee onboarding for the company, moving forward. Employees now have information, resources, assets and sales tools at their fingertips that are seamlessly integrated into Arrow’s workflow.

As the tool was built with a custom CMS, it also has the ability to be refreshed ongoing with current company details for continued evolution and future-proofing.