Two weeks. No 3D Visuals. No panic.
We constructed the OXI ONE MKII web site utilizing nothing however construction and kind. All to satisfy the deadline for the product launch and its debut in Berlin.
The Problem
Creating a web site for the launch of a brand new flagship product is already a high-stakes process; doing it in underneath 14 days, with no flawless renders, raises the bar even greater. When OXI Devices approached us, the ONE MKII was getting into its closing growth stage. The product was set to premiere in Berlin, and the web site needed to be stay 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, useful web site with out counting on visible property
- Mirror the character and philosophy of the ONE MKII — modular, stay, expressive
- Craft a construction that might be clear to musicians and intuitive throughout gadgets
- Work in parallel with the OXI staff, adjusting to adjustments and updates in actual time
This wasn’t nearly pace. It was about designing readability underneath strain, with a strict editorial mindset, the place each phrase, margin, and interplay needed to work more durable than regular. These are the sorts of belongings you’d by no means guess as an outdoor observer or a possible buyer. However constraints like these are actually a take a look at of resilience.
The Method
When you’ve seen different web sites we’ve launched with numerous groups, you’ll discover they typically embrace 3D graphics or different wealthy visible layers. This challenge, nonetheless, was a uncommon exception.
It was essential to make the precise name early on and to hit expectations spot-on throughout the idea stage. A few improper turns wouldn’t be deadly, however too many missteps might simply result in lacking the deadline and delivering an underwhelming consequence.
We targeted on typography, pictures, and rhythm. Happily, we had been in a position to form the artwork path for the images in parallel with the design course of. Huge 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 ultimately evolve right into a full eCommerce platform. Each design alternative needed to think about the lengthy sport from homepage and help pages to product element layouts and checkout flows. That additionally meant pondering 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 regular not simply by way of legibility, however in the way it communicates tone, vitality, and model angle. We opted for a daring, editorial rhythm. Headlines drive momentum throughout the format, whereas smaller supporting textual content helps information the attention with out muddle.
We chosen each typefaces from the identical designer, Wei Huang, a sort 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 fully free to make use of, which allowed us to depend on Google Fonts with out worrying about file codecs or load sizes.
CMS System
Regardless 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 varieties that would evolve alongside the product line.
The thought 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 pondering of Webflow’s CMS collections or potential integrations with WordPress and WooCommerce, the purpose was to create a system that was clear, extensible, and future-ready.
Sketches. Early explorations.
I actually benefit from the idea section. It’s the second the place totally different instructions emerge and key patterns start to type. Whether or not it’s alignment, a singular sense of ornamentation, asymmetry, or one thing else solely. This stage is the place the visible language begins to take form.
Right here’s a take a look at a few of the early ideas we explored. The OXI web site might’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 images made it simpler to combine visuals into the format and masks any imperfections.
Rhythm & Structure
When planning the rhythm and design, it’s necessary to not go overboard with creativity. As designers, we regularly wish to add that “wow” issue however generally, the enterprise simply doesn’t want it.
The target market, folks within the music world, already get their visible overload throughout performances by their favourite artists. However after they’re purchasing for a brand new machine, they’re not on the lookout for spectacle. They wish to see the product. The main points. The specs. Every thing that issues.
All of it must be delivered clearly and accessibly. We selected the best method: alternating between center-aligned and left-aligned sections, giving us the pliability to construction the format intuitively. Pictures helps break up the technical content material, and icons shortly draw consideration to key options. Individuals don’t learn, they scan. We designed with that in thoughts.
Just a few pictures highlighting a few of my favourite sections.
Consequence
The outcomes had been genuinely rewarding. The staff felt a lift in motivation, and the model’s viewers and followers instantly seen the shift highlighting how the replace pushed OXI right into a extra skilled path.
In response to my info, the pre-orders for the machine bought out in lower than per week. It’s at all times a fantastic feeling while you’re pleased with the end result, the staff is pleased, 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 at the moment within the works. The core will develop, however the ideas will stay the identical.
I hope you’ll discover the complete relaunch of OXI Devices simply as thrilling. Keep tuned on updates.
