Onset

OVERVIEW

Onset is a tech company that builds and sells data loggers hardware and remote monitoring software for climate and environmental monitoring, water quality, agricultural research and even museum artifact preservation.

This ImageX Media project was a multi-phase migration of a complex B2B website, including managing two brands – InTemp and Hobo – under a single site while maintaining clear pathways for both.

Discovery & design project timespan: September 2021 – May 2022

MY ROLE

Senior UX & UI Designer, ImageX Media

My role on the Onset project was to deliver the UI design for a component-based design system, as I was the sole visual designer on the project redesign. I also played a UX role to help ensure that the interactivity of complex aspects of Onset’s website, such as product pages, and multi-step product configurations were designed and built with strong usability best practices.

Curious about how it looked before? Visit Onset via the Wayback Machine (sometime between September 2021 and May 2022, if that link becomes janky).

"I have to give some major kudos to the Onset team as we’re wrapping the design phase here and the clients all expressed their admiration and appreciation for the work completed (“we just love your designs”) including solving their multi-product line and branding conundrum today through our recommendations and ultimately new designs to support the vision. Really fabulous work Laura. I know it’s been a very long and drawn out Discovery/Design phase but we have very happy and satisfied clients."

- Project Manager at ImageX for Onset project

Design Discovery, Visual Inspiration & Moodboarding

Each ImageX project kicks off with a Discovery phase. In the case of Onset, discovery was quite lengthy and ended up being quite robust, as the project was a large undertaking.

As the lead UI designer on the project, I guided the client through collaborative sessions to gain a holistic understanding of their brand goals for the project.

After a relatively short branding discussion, I learned that the client wasn’t married to their current brand, and while the logo needed to remain the same, I had a great deal of flexibility to explore new colours, fonts, imagery and graphic elements. This is pretty rare in agency UI design, so it was definitely an exciting prospect!

Immediately after our branding discussion, I walked us through a session on visual inspiration. Ahead of Discovery, they had all taken a survey, where among other questions, they provided competitive and inspirational websites that they both liked and didn’t like. Along with their examples, I did some visual research and brought some relevant websites to discovery to show both visual inspiration as well as examples of product websites that showcase both hardware and software.

From this exercise, I learned not only about their direct competitors and how that could help me throughout the design process, but I also learned through showcasing smart home product websites, what kind of features would and wouldn’t work for their particular products.

In my visual research, I wanted to showcase examples like Square, where hardware is displayed as thumbnails in the main navigation megamenu. It came to light through discovery that while this visual feature worked well for products such as Square, it wouldn’t work for the Hobo line of products. The reason for this is because while payment terminals like Square have strong visual affordance, their products are much more obscure, niche and require a different approach. On the flipside, my Arlo example gave them a good reference for seeing how we could potentially structure and design their robust, complex product landing pages. It was from this and a couple other similar examples that we came to give them a sticky anchor menu, including an Add to Cart CTA.

In the next Discovery session, I came prepared with two distinct Moodboards, based on the previous session and what I learned about their business goals, user goals and what came to light during our visual inspiration and branding phase.

MOODBOARD 1: CLEAN & TECH

In the first Moodboard option, my aim was to bring to the table examples that showcased the tech space. Knowing that Onset is a tech company with sophisticated and complex hardware & software solutions, my aim with the first Moodboard was to bring to the table examples in tech, such as in the smart home product space, and also products in the environmental and sustainability spaces.

Aesthetics in this space were generally focused around clean, solid lines and colour, ample white space, and often with geometric shapes and graphic elements.

In this example, I found component styles that all had similar aesthetics, such as feature cards with clean, white areas for text, clean hover effects and where there was a distinct split between image and text area.

MOODBOARD 2: RUGGED & OUTDOORSY

The second Moodboard option was much more focused on the physical spaces where Onset products live: outdoors.

Visual examples are from leading rugged and outdoorsy product and tech companies, such MEC, Tentree, as well as some examples in outdoor travel. The similarities between the examples in Moodboard 2 is a strong focus on photography.

The strong photographic element is carried through to the component examples, with text overlaid on images, as opposed to clean separations between images and text line in example 1. There are gritty textures and cuts between images and background, as well as more grid-like, or even mosaic layouts for images.

CLIENT CONSENSUS ON MOODBOARDS & DESIGN DIRECTION

In the end, client favoured Moodboard One overall, but liked specific elements from example two. We moved forward with this aesthetic:

Clean lines and white or solid colour backgrounds with plenty of white space between elements.
Full width background image for the hero, with potential to add ambient background video at time of launch.
- They did like the wavy lines and image treatment on the hero banner of the example from Moodboard 2.
Cards and components with clean splits and separation between images and text. They even went as far as to the specify their preference for full width blocks where there is a close to 50/50 split, with no added graphic elements.
No gritty/outdoorsy textures.
Clean, outlined and single-coloured iconography.

In addition to the Moodboards, as we moved into the UI design of the website, I designed two versions of the homepage, each with their own colours and fonts. Client preferred Option 1 below, so that is what I moved forward with.

Starting with the Homepage and some other key pages

At ImageX, UX/UI Designers play a crucial role in a design phase throughout a project. Our focus is on a few key deliverables to client and developers:

Redesign of high-level important and priority pages
UI Kit and Component-based design
Based on Drupal Bootstrap grid system

Because it was such a large project, I collaborated closely with our UX Researcher Vanessa, who took on the IA, tree testing and wireframe designs. I used her wireframes to design the high fidelity designs for Onset.

Let’s talk about the Homepage and Application Landing page.

HOMEPAGE

Vanessa had had wireframe demos and sign-off for the Homepage and a handful of other pages, so that’s where we started.

I used the Homepage to solidify the look and feel for the overall website UI, providing two versions. The version below is the one they went with:

Full width, outdoorsy image with wavy line.
Clean card design with a treatment of two corners with rounded radius, and two without. This style was carried throughout the website.
Colour palette of blue and green. The dark blue was carried over from their existing Onset brand, and the rest was new to complement it.
Client already had a hefty icon library, so I simply changed the colour to green. It’s not every day that clients already have a beautiful set of icons!
We did mobile only on high level pages due to budget constraints. The rationale for this was also due to the fact that Onset demographic were scientists and researchers, and were largely on desktop.

APPLICATION LANDING PAGE

The Application Landing page had to be templated so that each application could be structured similarly, but look visually different. (In their case, “applications” were things like Environmental Research and Protection, Water Resource Management, or Agricultural Monitoring).

We needed to not only show products, but educate the user about Hobo products in relation to the particular application, as well as provide more context in the form of explainers and use cases.

The wavy line hero banner is repeated as a visual treatment throughout the website.
A sub-category section with a different style of photographic card.
A high level explainer was important to client and needed to be clearly laid out, for users that perhaps weren’t as familiar with the product.
Showcasing use cases and case studies was also important to client throughout the website.
There was a marriage between hardware and software that we had to communicate to users.

As with every project, there are always unique challenges and pain points that the delivery team must attempt to solve for.

For me personally, I found the Onset products so complex, that I first tasked myself with getting a better understanding of the products themselves. Discovery helped me understand overall business & user goals, as well as aesthetic preferences. However, Onset's Hobo offered a line of incredibly unique and sophisticated products for scientists and researchers. The fact that I am not a researcher in relevant fields make it difficult to understand exactly what I was designing for. I watched videos about their products, tutorials and consumed help articles that could help me to get a better understanding.

Challenges & Solutions for Product pages

There wasn’t anything particularly out of the ordinary about Onset’s product needs, but rather the sheer volume of products and filters required some solutioning. So let’s talk about the Product Search page, with some challenges and solutions that came up in designing them.

PRODUCT SEARCH PAGE

Challenge: Filters

Existing website didn’t have a way to search all products, except for the global search, which didn’t work well.
Product page was only accessible via the footer, not from the main nav, with no pre-selections done if coming from an Application page.
The number of products associated with a filter (i.e. “Renewable Energy (22)”) ceased showing when that filter was selected.
Mobile experience was difficult to navigate and not very responsive.

Challenge: Product cards

Existing website had three call to actions for each card: Add to Cart OR Build System, View Product and Compare Product.
Cards lacked an indication of product type, which is something client wanted to add (i.e. Sensor, Data Logger).
Colour of text on cards failed accessibility contrast check
Mobile experience was 2-column layout, which didn’t allow enough space for each product.

PRODUCT SEARCH PAGE SOLUTIONS

Solution: Filters

I designed a tertiary level structure for parent, child and grandchild categories.
We solved for users coming into the Product page from the megamenu or elsewhere on the site by making filters pre-selected once arriving on the page.
A design for filters specifically on mobile that had its own dedicated view.

Solution: Product cards

I felt the triple CTAs were likely adding some decision fatigue for users, so I dropped down to one CTA, being Add to Cart / Build a System. I added a drop shadow hover on each card to make it clear it was clickable (to go to product page). Additionally on hover, a “Compare” checkbox would appear in the right top corner.
I added a tag on each card that client could use for showing product types, or for showing things like “Best Seller” or “On sale” when they ran promotions.
Mobile was optimized and the cards stack in a one column display.

Visit the old Onset product page via Wayback Machine (Snapshot from January 22, 2022).

Product landing pages with unique challenges

The Product landing pages were perhaps the most challenging of this project. Onset’s line of Hobo products are so numerous, so varied and so complex that we needed to design multiple product landing page types, each with unique variations. But on the same token, we needed to template these unique variations because of budgetary constraints.

PRODUCT LANDING PAGE CHALLENGES

Challenge: Restructuring a massive amount of content

Existing product landing pages used a tabbed system for the massive amount of information that needed to be displayed.
Client wanted a way for users to access the main CTA (i.e. Add to Cart) no matter how long a product page. There was also no back to top on the existing.
The overall design was pretty outdated, and content lacked a layout and hierarchical structure.
Similarly, mobile was laid out awkwardly.

Many of the products required 7 additional in-page links, each with a huge amount of text, lists, and table content.
Products needed to have part number, sub-title, price, had important information, and multiple call to actions.

PRODUCT LANDING PAGE SOLUTIONS

Solution: Sticky Anchor Menu, content hierarchy and blocks

I proposed using a sticky anchor menu, including Add to Cart CTA. The reason for this was to allow users to scroll down the page, while always having a way to navigate back, as well as Add to Cart. I used product pages like Arlo and Square as inspiration.
For sections with a lot of information, I utilized accordion blocks, fade out paragraphs and tables in order to condense and add better structure to text.
For Features and Documents, instead of plain text, I added icon cards to make them more visual.
I added a Back to Top button to the bottom right of the page, as pages are very long.
The mobile anchor menu included a dropdown menu.

View an old Onset product landing page via Wayback Machine (Snapshot from January 22, 2022).

The other big challenge of the Product Landing Pages were to design for 4 different potential user journeys.

Each type required design for different actions and user paths. Add to Cart automatically fills your cart, Build a System takes the user into a multi-step configurator, Select an Option opens a block below with options, and Download App takes the user onto a journey to sign up.

Finding a solution for Onset parent & child brands

Onset = Hobo + InTemp

Onset is a parent company to two distinct lines of products: Hobo and InTemp. For the purposes of the project, we were focused on Hobo almost exclusively, however we needed to solve for how to display the parent-child/sibling relationship between the brands. Initially, we launched into design with Onset as the overarching brand, and Hobo and InTemp as two products offered under the Onset umbrella, much like iPhone and Macbook are to Apple. However, as we proceeded with design, the clients struggled internally with their desire to bring Hobo to the forefront. While Onset was the company name, the name Hobo carried weight in the data logging research space, and they felt it would be a mistake to carry forward with Onset as the primary brand.

This led the client down a path of trying to solution this issue themselves. They felt strongly that Hobo should be front and centre, with InTemp also showing in the main navigation, so users could quickly go over to that website (which at the time was separate). They didn’t ask for help with this issue, but as time went on, we on the ImageX team wanted to see if they wanted our input and recommendations, as we felt that their solution would be confusing to users.

Solution: finding strong examples of parent/child/sibling brands

We as a team politely chimed in, asking if they wanted us to do some visual research, find some examples of similar parent/child brand dynamics and present it back to them, and they agreed. It was Marta, the Business Analyst on the project that came up with the best idea in the end. She proposed examples where there are sibling brands under one bigger parent brand, such as how TJ Maxx is the parent company to Marshalls and Homesense, or how The Gap Inc. is parent to The Gap, Old Navy and Banana Republic. After some back and forth, this is the example that we felt was the strongest. I presented these options to them, along with an example with their own content, and they agreed to move forward with it.

Conclusion

The Onset project was a lengthy one with a huge scope. Initially, it was quoted at being much smaller, at only 10 wireframes and 10 high fidelity pages, plus UI Kit / Component library. Scope creep definitely happened, and we took it one demo at a time, seeing what we realistically needed to deliver. This happens with many projects of course, as the delivery team only gets to know what it actually needed in discovery and beyond. But the clients were gracious and recognized the need to re-evaluate the original scope.

I was eager to work on this project as soon as I learned I had been assigned to it, and I’m very proud of the outcome of design and my role on the project.

"I have to give some major kudos to the Onset team as we’re wrapping the design phase here and the clients all expressed their admiration and appreciation for the work completed (“we just love your designs”) including solving their multi-product line and branding conundrum today through our recommendations and ultimately new designs to support the vision. Really fabulous work Laura. I know it’s been a very long and drawn out Discovery/Design phase but we have very happy and satisfied clients."

- Project Manager at ImageX for Onset project