I worked directly with Axcend Corp to redesign their website to not only have a refreshed look & feel, but to also improve its User Experience. This is Axcend 🧪
Axcend Corp created a handheld device, the Axcend Focus LC, that has revolutionized high-performance liquid chromatography (HPLC). In layman's terms, it's a device that can show the chemical breakdown of a liquid with a variety of applications. Traditional HPLCs are large machines that often take up an entire desk, give off much more waste products, and are too cumbersome to be taken from the lab. Axcend took the concept of an HPLC device and refined it to be self-contained, battery-powered, and incredibly waste-efficient.
While Axcend might have been on the bleeding edge of HPLC technology, their initial website didn't properly show off the capabilities of the Axcend Focus LC. There were several issues from a user flow perspective: in the navigation, there were drop-downs that led to very similar pages that had different content. Product details concerning the Axcend Focus LC were separated onto their own individual pages, requiring a click to get all of the information. Videos, webinars, and an introduction video all had their own pages instead of living together.
There were other stylistic issues as well. It was difficult to identify what elements of the site were interactive and which were purely decorative. Some of the imagery didn't seem relevant to the brand and could have been improved.
After completing the site audit for design & user flow issues, the first step was to create a proposed site map with notes on suggested changes. There were several opportunities to combine content into similar pages, which greatly streamlined the navigational flow site-wide. It also allowed me to better understand their content structure as well as learn more about the product itself.
Stylistically, Axcend needed to convey the advanced nature of their technology. Their previous site included a lot of extraneous imagery (primarily in the headers of the site) that didn't have any immediate connection to their brand or product. In order to minimize that disparity, an organic wave pattern replaced those header images site-wide. Any other photos used are either of the Axcend Focus LC itself or of the Axcend team members.
Introducing blacks and grays into the site's color palette allowed the Axcend green to have better contrast, highlighting interactive elements and information of importance. As a fun detail, the unordered list dots were changed to a double chevron to mimic the arrows of the Axcend logo.
In an initial client call, the Axcend team expressed that most of their users coming to the site were scientists who were looking to easily access the nitty-gritty details of their product's capabilities. Some of the most requested details were: to view the App Notes (technical documentation of tests), submit an App Note request, see Webinars that talk about case studies using the Axcend Focus LC, and Request a Demo of the product. With that in mind, creating a secondary, site-wide, navigational row with those links underneath the header of each page allowed users to easily find those appropriate resources.
After receiving the a-okay from the client to begin development, I began building out the rest of the site following the style of the homepage and the hierarchy of the site map created in the beginning of the project.
While developing the rest of the site, I was able to identify several opportunities to introduce fun, interactive elements to highlight the features and advantages of the Axcend Focus LC. Two examples would be a static image of the Axcend Focus LC with pulsing dots that reveal an interesting tooltip on hover. Another interaction opportunity came in a tabbed module with falling icons to give a product advantage overview without navigating to a new page.
Refreshing Axcend's online presence was a lot of fun and challenged me in ways I didn't expect (like trying to learn what Liquid Chromatography even is). If you'd like to view the live website, click the link below. Cheers!