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
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.
