Two weeks. No 3D Visuals. No panic.
We constructed the OXI ONE MKII web site utilizing nothing however construction and sort. All to satisfy the deadline for the product launch and its debut in Berlin.
The Problem
Creating an internet site for the launch of a brand new flagship product is already a high-stakes activity; doing it in below 14 days, with no flawless renders, raises the bar even greater. When OXI Devices approached us, the ONE MKII was coming into its closing growth stage. The product was set to premiere in Berlin, and the web site needed to be reside by that point, no extensions, no room for delay. On the similar time, there was no finalized imagery, no video, and no product renders prepared to be used.
We needed to
- Construct a daring, purposeful web site with out counting on visible belongings
- Mirror the character and philosophy of the ONE MKII — modular, reside, expressive
- Craft a construction that might be clear to musicians and intuitive throughout gadgets
- Work in parallel with the OXI workforce, adjusting to adjustments and updates in actual time
This wasn’t nearly velocity. It was about designing readability below strain, with a strict editorial mindset, the place each phrase, margin, and interplay needed to work more durable than normal. These are the sorts of stuff you’d by no means guess as an out of doors observer or a possible buyer. However constraints like these are actually a take a look at of resilience.
The Method
Should you’ve seen different web sites we’ve launched with varied groups, you’ll discover they usually embrace 3D graphics or different wealthy visible layers. This challenge, nevertheless, was a uncommon exception.
It was essential to make the proper name early on and to hit expectations spot-on in the course of the idea stage. A few fallacious turns wouldn’t be deadly, however too many missteps may simply result in lacking the deadline and delivering an underwhelming consequence.
We targeted on typography, pictures, and rhythm. Happily, we had been capable of form the artwork course for the pictures in parallel with the design course of. Large due to Candace Janee (OXI challenge supervisor) who coordinated between me, the photographers, and everybody concerned to shortly organize compositions, lighting setups, and different particulars for the shoot.
One other layer of complexity was planning the broader interface and future platform in tandem with this launch. Whereas we had been solely releasing two core pages at this stage, we knew the positioning would finally evolve right into a full eCommerce platform. Each design alternative needed to contemplate the lengthy sport from homepage and assist pages to product element layouts and checkout flows. That additionally meant considering forward about how methods like Webflow, WordPress, WooCommerce, and e-mail automation would combine down the road.
Typography
With no graphics to lean on, typography needed to carry extra weight than normal not simply when it comes to legibility, however in the way it communicates tone, vitality, and model perspective. We opted for a daring, editorial rhythm. Headlines drive momentum throughout the structure, whereas smaller supporting textual content helps information the attention with out muddle.
We chosen each typefaces from the identical designer, Wei Huang, a kind designer from Australia. Work Sans for headlines and physique copy, and Fragment Mono for supporting labels and detailed descriptions.The 2 fonts complement one another effectively and are utterly free to make use of, which allowed us to depend on Google Fonts with out worrying about file codecs or load sizes.
CMS System
Despite the fact that we had been solely launching two pages initially, the CMS was constructed with a full content material ecosystem in thoughts. Product specs, updates, movies, and future campaigns all had a spot within the construction. As an alternative of hardcoding static blocks, we constructed versatile content material sorts that would evolve alongside the product line.
The concept was easy: keep away from rework later. The CMS wasn’t only a backend; it was the muse of a scalable platform. Whether or not we had been considering of Webflow’s CMS collections or potential integrations with WordPress and WooCommerce, the objective was to create a system that was clear, extensible, and future-ready.
Sketches. Early explorations.
I actually benefit from the idea part. It’s the second the place completely different instructions emerge and key patterns start to type. Whether or not it’s alignment, a novel sense of ornamentation, asymmetry, or one thing else totally. This stage is the place the visible language begins to take form.
Right here’s a have a look at among the early ideas we explored. The OXI web site may’ve turned out very in a different way.
We settled on a darkish model of the design partly as a result of founder’s desire, and partly as a result of the model’s core colours (which had been off-limits for adjustments) labored effectively with it. Moreover, chopping out the machine from pictures made it simpler to combine visuals into the structure and masks any imperfections.
Rhythm & Format
When planning the rhythm and design, it’s vital to not go overboard with creativity. As designers, we regularly need to add that “wow” issue however typically, the enterprise simply doesn’t want it.
The audience, folks within the music world, already get their visible overload throughout performances by their favourite artists. However once they’re searching for a brand new machine, they’re not in search of spectacle. They need to see the product. The small print. The specs. All the pieces that issues.
All of it must be delivered clearly and accessibly. We selected the only strategy: alternating between center-aligned and left-aligned sections, giving us the pliability to construction the structure intuitively. Pictures helps break up the technical content material, and icons shortly draw consideration to key options. Folks don’t learn, they scan. We designed with that in thoughts.
Just a few photographs highlighting a few of my favourite sections.
Outcome
The outcomes had been genuinely rewarding. The workforce felt a lift in motivation, and the model’s viewers and followers instantly observed the shift highlighting how the replace pushed OXI right into a extra skilled course.
Based on my data, the pre-orders for the machine bought out in lower than per week. It’s at all times an amazing feeling whenever you’re happy with the end result, the workforce is joyful, and the viewers responds positively. That’s what issues most.
Trying Forward / Half Two
This was just the start. The second a part of the challenge (a full eCommerce expertise) is presently within the works. The core will broaden, however the rules will stay the identical.
I hope you’ll discover the total relaunch of OXI Devices simply as thrilling. Keep tuned on updates.
