MODE REDESIGN

Mode is a keyboard company based in San Francisco and Boston. Composed of a team of engineers and creatives that are keyboard enthusiasts, Mode aims to create a high-end, custom keyboards that have a premium sound and feel for designers, programmers, gamers, and more. When they’re not creating keyboards, they also create switches and keycaps to compliment their keyboards.

My Role: Web Design and Webflow Development
Project Year: 2023
Project Type: Web RE-Design and Development
A DIFFERENT TAKE ON THE HIGH-END KEYBOARD BROWSING EXPERIENCE
HOW MIGHT WE PROMOTE MODE’S PRODUCTS IN A FUN, INTERACTIVE WAY?

With the release of Mode’s newest keyboard, the Loop TKL, I thought it was an opportunity to create a 2 page website that catered towards promoting the group drop of the Loop. However, with Mode’s minimal branding, I needed to find a way to bring the interactive elements in a minimal matter.

INITIAL VISION + DIRECTION

Once I gathered assets for Mode’s redesign, I began to create initial layout ideas to promote products using new layouts. I decided to keep the colors, typography, language the same to design a site that aligned with Mode’s existing branding.

Since the site was initially grid-based, I thought it would be a great opportunity to introducing bento grids to some of the sections to present their product specs a different way. The hero sections were spiced up a bit to emphasize the products and what the community has made with their custom keyboards.

Clarity

Webflow Interactions:

Some interactions were challenging to create such as the drop down interaction on the Loop product page. I learned how interactions interact with classes versus CMS collections and learned when to use either or for my desired animations.

Establishing Purpose:

Not planning early to account for layouts in mobile hindered my development process. I’ve learned to include wireframe designs of mobile breakpoints to ensure a smooth development process.


Designing for the users and the brand:

I faced the challenge of creating new designs for sections that were consistent with the Mode brand. Even though there were an infinite amount of potential solutions, I had to choose what matched the current site while providing the best user experience with the new designs revamped sections.

Reflection

- Interactions can be made in a way that aren’t the central piece of the section and instead be made to compliment the overall experience / add a layer of interaction.

- Smaller breakpoints should be considered at the start of the design so you’re not winging responsiveness.

- Websites are an extension of a company’s brand. Therefore, the solutions I create to improve UX must be consistent with the branding of the company to prevent clashing of design/brand.

circular profile shot of character