UX/UI | Front-end Development | Brand Design
Keebdrip
Agency
PixelBurger Strategy
Tools
Figma, Shopify, Klaviyo, Meta Ads, and Agile workflows.
Role
UI designer, Creative Director, Brand Designer, and Shopify Expert
Deliverables
Manage a website migration and redesign along with the integration of coffee subscriptions, and a starter subscription to enhance recurring revenue opportunities.
Year
2023
I designed and launched Keebdrip, a niche e-commerce brand specializing in custom-designed deskmats. The project included building the brand identity, creating a user-friendly digital experience, and developing a strategy to engage the keyboard enthusiast community.
Overview
Working through the design and development phases, a Shopify theme was customized all while working within the limitations of a standard Shopify plan. A standard plan can present challenges with a lack of functionality options. To avoid this issue, the liquid templates were built from scratch, allowing for a completely custom site with the desired look, feel, and while still being able to manage 100% of the site through the theme customizer. Designing every possible liquid template, the aim was to create a site without compromising NASA’s end vision. No single landing page, or product page went untouched.
Designing & Developing an E-Commerce Brand from Idea to Launch
My Contributions
My role encompassed a wide range of responsibilities, from brand development and social media strategy to product design, UX research, and e-commerce enablement.
I played a pivotal role in building an engaging community and crafting compelling content for social media, all while overseeing the branding and graphic design for both the brand, digital experience and its products.
Brand Development: Defined the brand identity and created cohesive visual assets to establish a unique market presence.
Social Media Strategy: Built an engaging community through compelling content and effective social media campaigns.
UX Research & Product Design: Conducted user research to inform product design and optimize the digital experience for higher conversions.
E-Commerce Enablement: Designed and developed the online store, ensuring a seamless shopping experience.
Graphic Design: Created branding and product designs that reflected the brand’s ethos and connected with its audience.
Research
Throughout the research process, we examined the UI design, product offerings, user flows, and third-party integrations of key competitors. We identified strategic insights into design patterns, beneficial features, and areas for improvement to enhance our product and user experience for our users.
Additionally, we conducted a competitive analysis, heuristic evaluations, and persona development to further inform the design.
Competitor Analysis
I gathered the information in real time by directly reviewing and analyzing the contents of the three competitor websites. The findings are primarily qualitative, focusing on user experience (UX) elements, visual and textual content, and overall website aesthetics. The goal is to identify strengths and opportunities for Keebdrip to enhance its market and product position.
Personas
We identified the need for high-quality, customizable, ergonomic desk mats through competitive analysis, and social media insights. For a desk mat company targeting gamers, keyboard enthusiasts, and designers/developers, we developed a few detailed personas, such as Alex Morgan, a 28-year-old software developer with a passion for optimized desk setups.
Define
Our research into the deskmat e-commerce niche revealed key competitor strengths, effective design patterns, and areas for improvement in user experience. These insights shaped KeebDrip's tech stack, including Shopify for e-commerce, Klaviyo for email marketing, Judge.me for reviews, and ShipBob for fulfillment. This strategic foundation ensured the platform could deliver an engaging and seamless user experience.
Tech stack and Technology System
By leveraging Shopify's ecosystem and integrating the right tools and services and suppliers, we scoped an efficient, scalable, and user-friendly e-commerce store for selling high quality print-on-demand desk mats.
Logo Design Process
The logo design process for KeebDrip centered on creating a distinctive visual identity that resonated with the brand’s community-driven and e-commerce-focused mission. The approach involved extensive research into the mechanical keyboard culture, typography, and iconography that aligned with the brand's aesthetic. Multiple iterations were explored, balancing bold, modern design with a playful yet professional feel.
Our wordmark logo for Keebrip combines bold, modern typography with a touch of slime and gradient effects, capturing the vibrant and dynamic spirit of our brand.
This design reflects our dedication to enhancing your keyboard experience, whether you're coding, gaming, lubing switches, or simply typing away.
Secondary Logo & Favicon
Using a keyboard switch as our brand logo directly appeals to keyboard enthusiasts, gamers, and individuals who prioritize their desk setup, as it represents the core of their passion and interest. The switch symbolizes precision, customization, and high-performance-key qualities that our communities value in their equipment, making it an instantly recognizable and relevant icon for our audience.
Typography Guidelines
We chose Poppins for our brand and digital experiences because of its modern, clean, and versatile design. Its excellent legibility and readability enhance user experience across various devices and platforms, ensuring consistency and professionalism.
As an open-source font, Poppins is cost-effective, easily accessible, and supported by a robust community, making it a reliable and customizable choice for our diverse needs.
Color Guidelines
The Keebdrip Brand Colours system is designed to establish a clear visual hierarchy, maintain accessibility standards, and reinforce brand identity across digital and physical applications.
This structured color system ensures consistency across the Keebdrip platform, allowing for flexible application while maintaining a cohesive and recognizable brand experience. The contrast between dark and light shades improves readability, while the secondary colors add personality and highlight key interactions.
@Keebdrip Content Design
Content creation for the brand, website, and social ads was all about keeping things cohesive, engaging, and conversion-focused. The brand identity shaped everything—messaging, visuals, and tone—so everything felt consistent across platforms. The website was built to be user-friendly and visually strong, with clear product storytelling and smooth navigation.
Social ads focused on high-impact visuals and snappy copy to grab attention fast, drive engagement, and convert views into sales. Every piece of content was backed by research, optimized for performance, and tested to keep improving results.
View Live Project
The culmination of our design thinking process for Keebdrip has resulted in a comprehensive, user-centered e-commerce platform and social community tailored for the niche desk mat market.