Axcend Corp

Web Design

The logo for Axcend Corp, and HPLC companyThe refreshed homepage design for Axcend CorpThe tooltip for the Axcend Focus LC product pageThe introduction to the About page for the Axcend FocusThe Product Videos page for Axcend CorpThe app notes page for Axcend Corp

About
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 🧪

Year
2021

Vertical
Physical Science

Agency
2TON

Responsibilities 
Web Design

Squiggly divider line with a yellow to orange gradient
The logo for Axcend Corp, a portable HPLC company

About 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.

The Challenge

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.

The site map for the Axcend Corp's refreshed website

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.

The proposed homepage design for Axcend Corp
The proposed mobile homepage design for Axcend Corp

Homepage

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.

The subnavigation bar for the Axcend Corp website

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.

The Why the Axcend Focus LC page
The Industries page on the Axcend Corp's new website

Development

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.

An animated gif showing the tooltips for the Axcend Focus LC product page
An animation showing the interaction for tabs showing the advantages of the Axcend Focus LC

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!

Axcend Corp Website

View Website
Squiggly divider line with a yellow to orange gradient

What I've been up to

Selected work

Axcend Corp case study
Axcend Corp
Web Design & Development
Andrew Santoro's Logofolio
Logofolio V1
Branding
Wick App's case study
Wick App
UI/UX Design | Branding
The Andrew Uncharted case study image
Andrew Uncharted
Web Design | Branding
A dotted, squiggly yellow and orange line

Get in touch

Say hello

Want to inquire about a project? Talk about video games? Critique my work? Use the form or my email below to do 2 of those 3 things.

My email

hey@andrewsantoro.com

Copy
Thanks for reaching out, new friend! I'll respond in a jiff! (wouldn't it be annoying if I wrote gif?)
Oops! Something goofed. Double-check info and try again!