HiveRadar

HiveRadar.com Redesign

Project Overview

During my time at HiveRadar, the largest project on the roadmap was the redesign of the front facing HiveRadar website. Built on PHP and CSS, the original website needed to be updated to modern web standards. Due to the company's growing product line and customer base, the new website needed to serve multiple roles: provide the internal sales team a visual aid when speaking to partners, shareholders, and customers, present complex (and often opaque) IT concepts and specs to unfamiliar audiences, have the capacity to grow in scale as the company grows, and to keep faithful to the company's identity origins as a playfully nerdy and sci-fi movie inspired aesthetic.

The industry surrounding edge data centres is still fairly new, with only a few companies in market competition. It was important to establish a strong brand voice, eye-catching and comprehensive visual assets, and a site hierarchy that can support future products and services.

Role: UX Designer, UI Designer, Lead Graphic Designer, Market Researcher, Copywriter, Photographer

Programs: Figma, Adobe Illustrator, Adobe Photoshop, Adobe After Effects, ElevenLabs.io, Frameworks: React & Tailwind CSS

Key Collaborators: CK Hon (Jr. Graphic Designer), Classy Endeavors (Dev Team)

Site Map

The first challenge with the redesign was redefining the information hierarchy of the website. There were several pages that the company had stopped pushing as a service, but had to still maintain for their legacy customers using the product.

The other consideration was: how to define a Product vs a Software service. While all services offered on HiveRadar.com are products, I decided that in the menu we would split the definition as physical products, built and shipped from HiveRadar, and Software that is provided through their various partnerships. For the legacy pages that are in the process of being replaced by newer services, I placed them in the footer to leave them accessible, but visually deprioritized.

Lo-Fi Wireframes

After deciding on the information hierarchy, I began to ideate Lo-Fi wireframes to get a sense of how the information was to be displayed. Due to the fact that a lot of the content of the website would be updated, reviewed, and newly created alongside the development of the website, I had to keep in mind that the structure had to be flexible and support large scalability.

The dev team we were partnered with on this project were a global team working remotely from a various timezones, so when providing my work I would need to make sure the initial wireframes were well labelled and understood in order to avoid bottlenecks due to miscommunication.

Resources: Documentation

Resources: Warranty

Landing

Resources: Data Sheets

Product: EDC

Product: WSSK

Product: RDK

Software: Generic Software

Hi-Fi Wireframes

After establishing a look and feel of the information presentation, I began to work on creating the website assets. It was important to the core team to maintain their heritage "nerd culture" aesthetic, as they identified that this is often a core value of their customer base. In order to keep the look and feel of a futuristic and rugged technology, I chose the fonts Sansation (headers) and Manrope (body) to give just a hint of a space-age look, but keep the branding looking contemporary and modern.

For the assets, I used product images that I had photographed for the project, and placed them in scenarios that support the product use case solutions that the company wished to promote. I also used the technical lined drawings I drew for instructional material when the need to simplify the products was necessary.

Click screens for full preview