Misfits

Project Overview

The Challenge: Building a Brand from Scratch

The team at Misfits came to me with a tough mission: they needed a high-converting waitlist page built from the ground up, and they needed it in a super tight window, just two weeks.

This wasn't just about designing a single page; it was the start of the entire Misfits design journey. Since the brand was new, the first job was to nail the personality. I had to quickly define a Branding Kit that didn't just look good, but instantly communicated a 'bold' and 'rebellious' identity to attract the right kind of early user. Essentially, we had to invent the look and feel of Misfits under an intense deadline.

Branding Kit: Decisions & Rationale

1. The Vibe: Bold, Rebellious, Fun

The goal was to make 'Misfits' look exactly how it sounds: bold, slightly rebellious, and fun. The initial font combination I tried (Oswald + Montserrat) just didn't cut it; it felt too safe. We needed a vibe that screams 'future-forward' and 'members-only.'

2. Colour Palette: Darkness & Electric Contrast

I chose a high-contrast Dark Mode foundation (near-black background) to create an immediate sense of exclusivity and modernity. To prevent it from feeling heavy, I introduced three core colours:

• Electric Blue & Vibrant Yellow: These contrasting, almost hyper-digital colours add an energetic, 'electric' pop that feels young and innovative.

• Dark Purple: This serves as a sophisticated, richer secondary colour that helps bridge the gap between the dark background and the vibrant accents.

3. Typography: The Feel of the Future

For typography, I paired Geist with Instrument Sans.

• Geist (Headings): I picked this because it’s a modern, confident, and very clean sans-serif. It gives our headlines a powerful, almost technical feel that matches the 'future-forward' concept.

• Instrument Sans (Body): This is a warm, highly readable font that keeps the body copy grounded and accessible, making sure that while the brand looks cool, the message is clear.

4. The Kerning Detail: Getting the Type Just Right

Good design is in the details, especially typography. I spent time fine-tuning the spacing to make the words feel perfect:

• Geist Kerning (−5.2%): I slightly tightened the spacing (negative kerning) on our big, bold headings. This makes the letters lock together more snugly, giving the headlines a dense, determined, and solid look that reinforces the brand's confidence.

• Instrument Sans Kerning (+1%): Conversely, I added a tiny bit of air to the body font. This small adjustment makes the long-form text feel more open and inviting for the reader.

Design Strategy: Speed and Focus

The immediate challenge was that two-week timeline. To hit that goal, the design strategy had to be super focused.

1. The Mobile-First Rule

Since our audience is young and always on their phones, I went strictly mobile-first. This wasn't just about making the page responsive; it was about ensuring the page loaded fast, felt immediate, and gave users the best experience on a small screen.

2. Prioritising the MVP Goal

The entire layout was built around the Minimum Viable Product (MVP) goal: capturing emails. I treated the waitlist page as a funnel:

• A strong hook (the bold headline and brand photo) to grab attention.

• Three clear value points to secure interest.

• One giant call-to-action (CTA) to get the sign-up. Everything else was stripped away.

UI/UX Deep Dive: Translating the Brand

This is where I took the "Bold and Rebellious" feeling from the Branding Kit and put it right onto the screen.

1. Visual Impact and Exclusivity

I used the high-contrast dark mode to instantly make the page feel fun and bold. It's dark, it's moody, and it reinforces the idea that Misfits is a curated community, not something for everyone.

2. Highlighting Key Actions

To guide the user, the electric blue from the branding kit was used exclusively for the main interaction buttons ("JOIN THE WAITLIST"). This prevents visual clutter and makes the single most important action impossible to miss.

3. Clear Value Proposition

To overcome the "lack of identity" problem, I broke the offer into three distinct sections: Personalised Style, Curated Discoveries, and A Rebel Community. This structure makes the abstract idea of a "community platform" tangible and immediately understandable.

4. Typography in Action

The font kerning adjustments I made weren't just for fun; they served the brand. The tightly spaced Geist headings look solid and determined, matching the brand's confident attitude, while the slightly more open Instrument Sans keeps the body text easy to read.

Results and Impact

The rapid design approach delivered exactly what Misfits needed:

• Project Delivered On Time: I successfully designed and delivered the final, high-fidelity mobile page within the 2-week deadline, providing the client with their first marketable asset.

• Validated Brand Vision: The final waitlist page perfectly captured the "Bold" and "Rebellious" brand identity, giving Misfits a strong foundation to start community building.

• Launch-Ready Asset: The page was production-ready for immediate use, allowing Misfits to start capturing valuable early leads and validating market interest without waiting for further development.

Extended Deliverables: The Misfits Lookbook Website

Beyond the Waitlist MVP, I completed the design for a full, next-stage marketing asset: The Misfits Lookbook Website. This involved designing 21 high-fidelity screens and engineering a component library that includes 15+ reusable animated components. This project establishes the brand's visual language for its primary launch channel and showcases the ability to scale design systems.