Let’s dive into the visual side of things first. Sinan, where did the hexagon (which later emerged as a star of this redesign) come from?
Hello, I'm 
The team at Onera had already defined their mission, brand values, and product features by the time we began working together, but not much had been done to visualize what they had articulated. With their logo and primary color palette being the only two constants, we had plenty of creative freedom to imagine the rest of their visual language.
The Onera brandmark is three diamonds arranged to form a box — a nod to the retail industry. We wanted to see if there was an even simpler and stronger shape that we could adopt as a visual anchor, so we flattened and merged the three diamonds to form the hexagon.
This particular shape works exceptionally well for Onera. The hexagon is essentially the outline of their existing brandmark, so it’s not a completely new and foreign design element for the brand. It’s a symmetrical, strong, and stable shape, and it makes for a more interesting grid compared to a conventional square one. Given all of these qualities, the hexagon organically became a prominent part of the Onera visual language.
Tell us about the use of animation in the site -- both from a conceptual point of view (how did the use of animation enrich the user’s experience?), as well as more tactically (what software do you use to design animations?).
Hello, I'm The real world is full of motion; every mechanical action has a mechanical reaction. So subtle animations, when executed tastefully, can help make a website feel intuitive as they mimic this familiar pattern.
Simply put, Onera builds products that address specific problems across a complex retail funnel with many interconnected touchpoints. These products are all powered by Onera’s AI platform, the Onera Decision Engine. We found it necessary to create a visual pattern that would help the user grasp this relationship between Onera’s platform and products, as well as each product’s unique set of features.
The result was a microcosm of Onera’s tech ecosystem — a series of unique layouts derived from a single shape, each with a consistent element to symbolize actions taken by Onera’s AI — the glowing hexagon. Apart from playing a descriptive role, these animations helped bring the entire site to life on the screen.
In addition to these larger animations, we incorporated feedback animations that further exploit the hexagon as a brand element. We designed and implemented an easy way to add tooltips to any word or phrase, so that front-facing copy could remain concise while additional information could always be readily available.
The most challenging part of designing animations is translating them to code. They are hard to describe using a flat image, they tend to be very specific which makes it tough to find accurate examples, and it can be time-consuming to mock them up in a robust motion design platform like After Effects. I’ve been a fan of Principle for Mac which is a lightweight animation and prototyping app for web designers who may not necessarily be adept at motion design. It allows me to get the animation looking exactly the way I want at a fraction of the time. Best of all, if you are a Sketch user like me, it makes it a piece of cake to move assets from Sketch and get to animating!
This is a great example of a project where design and development needed to work closely together, since the design approach ended up relying strongly on what was possible from a front-end development perspective. How do you manage this type of collaboration?
Hello, I'm 
Often developers don’t get to see the designs until they’re already done and approved and there’s no chance to change them. Sinan is great about showing me bits of the design to make sure it’s feasible from a dev standpoint, and I’ll often check in to look at his InVision mocks as he shows them to the client to make sure there’s nothing that stands out to me as troublesome.
Onera was a fun challenge for both of us. Coming from a design background, I already had an idea of how I wanted to translate Sinan’s design into a website, but there were definitely some compromises we had to make, especially in terms of the animations. Sinan is great at describing what he envisions each animation is, and often sends me either an example from another website, or creates a quick little video for me to work off of.
Hello, I'm This is where Principle comes in very handy. For Onera, I had an animated mockup of each animation that Amber and I could discuss over a video call. It just minimizes what can get lost in translation — you’re actually looking at something that is as accurate a representation as possible of what the final product is intended to be.
Hello, I'm A good example of where we had to compromise was the platform page. Originally it had multiple animations for both the hero and the wheel in the section below, but it ended up being way too resource heavy and would actually either crash the browser or create odd rendering bugs elsewhere on the page. We didn’t want to load in a whole Javascript animation library just for this one page, so we decided to ditch the first hero animation and keep the wheel. Overall, I think it was a better decision anyways, because having those two large animations so close to each other was a bit distracting.
Amber, can you tell us a little bit about how you achieved the hexagons from a code perspective? (A quick Chrome inspection tells me these are not simply exported images ….)
Hello, I'm I wanted to make sure we weren’t overloading the website with a ton of assets, so I tried to make assets I could reuse multiple times. I ended up creating three types of hexagons in the design: plain static hexagons; hexagons that acted as a “mask” over an image; and the hexagons that needed to be animated. Each of these three types also had multiple iterations, for example, with or without borders and fills.
For the plain hexagons, I used 1 SVG that was included via PHP for any number of times we needed it in the layout. Using it as an include meant I could control the border and fill appearance and basic hover animations via CSS. This same SVG was used for the large background filled hexagons, as well as the tiny outlined hexagons in links. It was really versatile.
See the Pen
Different Styled Heaxgon SVGs with CSS by Amber Weinberg (@amberweinberg)
on CodePen.
For the hexagon image masks, I used a second SVG to take advantage of SVG’s image masking properties, so the Onera team wouldn’t have to edit the images into hexagon shapes, they could just upload any image and the mask would crop it for them. This file also had an additional hexagon shape that acted as an optional “border” around the image when the design called for it.
See the Pen
Responsive SVG Hexagon Mask with Faux Border by Amber Weinberg (@amberweinberg)
on CodePen.
The animated hexagons for the hero areas were each treated individually as a standalone exported SVG image. We then used a combination of CSS and JS animations to target the hexagons within the SVG randomly to “light” them up.
See the Pen
Randomized Animated Hexagons by Amber Weinberg (@amberweinberg)
on CodePen.
What was the most difficult part of this redesign for each of you?
Hello, I'm SVG still has some browser bugs, and often when I’d go to hide a path in one SVG with CSS, it would somehow affect another SVG with a completely different class and CSS path. Another issue was getting some of the hexagons to line up as a gridded honeycomb. I did this with CSS grid, but it was a bit tedious and time consuming.
Hello, I'm Before I answer, I have to commend Amber on the SVG animations, especially the honeycomb grid. It was truly amazing to see her work through the challenges and her effort really brought the whole site together!
For me, thinking about the site responsively was more challenging than usual. There are many adjacent sections on the site which are separated by a slanted line, and the angle of this slant matches that of the hexagon’s sides. These sections also have highly contrasting backgrounds, so it took some trial and error to make sure that their edges remained at a consistent angle on different screens while ensuring that text always fell on a contrasting background.
