Web Design

Screw Face Product

My Role
Product Designer
Timeline
June 2024

Screw Face Product – Toronto Inspired Lifestyle Outerwear

Project Overview

Screw Face Product is an urban streetwear brand looking to establish a strong online presence with a bold identity and a seamless user experience. The client approached Momer Designs with the goal of creating a visually striking brand and a user-friendly website. The brief involved not only selecting the best eCommerce platform but also designing a brand that reflected the gritty, rebellious spirit of street culture. The logo, a blend of the letters SFP with an eye resembling an angry face, was central to the brand’s identity.

Phase 1: Research & Platform Evaluation

Objective: To determine the best eCommerce platform for Screw Face Product based on previous research conducted by Momer Designs.

Approach:For this phase, we leveraged the insights and platform analysis from a recently completed project, UnOrdinry, where extensive research had already been conducted on eCommerce platforms such as Shopify, WooCommerce, and BigCommerce. Since the requirements and goals for Screw Face Product aligned closely with those of UnOrdinry—particularly in terms of scalability, ease of use, and customization—there was no need to repeat the research process.

Platform Selection:
Based on the findings from the UnOrdinry project (see UnOrdinry Case Study for detailed research results), Shopify was selected as the best platform for Screw Face Product. Its user-friendly interface, robust app ecosystem, and ability to scale with a growing fashion brand made it an ideal choice.

Outcome:
By referencing the comprehensive platform analysis from the UnOrdinry case study, we were able to expedite the decision-making process and move forward with Shopify as the eCommerce platform for Screw Face Product.

Phase 2: Brand Identity & Logo Development

Objective: Create a bold, rebellious brand identity that resonates with the streetwear culture and makes Screw Face Product stand out.

Approach:

  • Brand Discovery Workshop: Collaborated with the client to define the brand’s mission, values, and aesthetic. The goal was to create a raw, unfiltered identity that aligns with street culture while maintaining a clean, professional look for online appeal.
  • Logo Design: Designed a unique logo that blends the three letters SFP with an angry eye symbol, representing the brand’s name, Screw Face. The eye in the logo gave the brand a rebellious, aggressive edge, reflecting its street culture roots.
  • Color Palette & Typography: Chose a colorful palette (black, white, and different blends) with splashes of vibrant red to evoke emotion and intensity. Selected bold, modern typography to emphasize the rawness of the brand.

Outcome: Delivered a strong, edgy brand identity with a memorable logo that encapsulates the rebellious spirit of Screw Face Product, setting the tone for the brand’s web presence and future marketing.

Phase 3: Website Planning & Wireframing

Objective: Design a seamless and visually engaging website that allows users to easily browse and purchase products while staying true to the brand’s identity.

Methodology:

  • User Flow Mapping: Developed detailed user flows to map the customer journey from landing on the homepage to making a purchase. Focused on minimizing the steps required to browse and buy.
  • Wireframing & Sitemap: Created low-fidelity wireframes to outline the layout and functionality of key pages, including the homepage, product pages, and checkout process. Ensured that the design maintained a minimalist look to let the brand’s bold imagery stand out.
  • Mobile-First Design: Given the high mobile usage among the target audience, the design was prioritized for mobile devices, ensuring a responsive and engaging experience.

Outcome: Delivered wireframes and a clear sitemap that emphasized ease of use, focusing on fast navigation, product discovery, and a frictionless checkout process.

User Flow Mapping

Here’s a user flow mapping for Screw Face Product based on the current structure of the website:

  • Home Page
  • ShopBrowse product listingsSelect a product
  • Product PageView product detailsAdd to cart
  • CartReview itemsProceed to checkout
  • CheckoutEnter shipping/payment detailsConfirm order
  • Order ConfirmationConfirmation pageOption to track orderThis flow covers the user journey from browsing products to completing a purchase.

Phase 4: UI/UX Design & Web Development

Objective: Bring the brand to life through a visually compelling, high-converting website that embodies Screw Face Product’s edgy persona.

Design Process:

  • UI Design: Created a visually striking interface using bold imagery, aggressive typography, and the brand’s signature color palette. The homepage prominently featured the logo, along with large, high-quality product images to draw users in.
  • User Experience (UX): Focused on creating a frictionless user experience with clear calls to action, easy navigation, and fast-loading pages. Streamlined the checkout process to ensure users could make a purchase in as few steps as possible.
  • Shopify Customization: Customized a Shopify theme to reflect the brand’s identity, incorporating dynamic elements like scrolling banners, product videos, and customer reviews. Integrated apps for inventory management, shipping, and social media marketing.

Unique Features:

  • Shop the Look: Integrated a feature that allows users to see how different items can be styled together, encouraging them to purchase multiple items.
  • Storytelling Elements: Incorporated sections on the homepage that told the brand’s story, connecting the audience to the rebellious ethos of Screw Face Product.

Outcome: Delivered a visually compelling, high-converting eCommerce website that perfectly aligns with the brand’s edgy identity. The design received positive feedback for its boldness, simplicity, and user-friendly experience.

Phase 5: Testing, Launch, & Results

Objective: Test the website for usability and performance, then launch it to the public while measuring early success.

Testing:

  • Usability Testing: Conducted usability testing with a select group of users to ensure smooth navigation, fast loading times, and an intuitive shopping experience across all devices.
  • Performance Testing: Ensured the site performed well under high traffic conditions, optimizing images and scripts for fast load times, especially on mobile.

Launch Strategy:

  • Soft Launch: Released the site to a small audience for final feedback before the official public launch.
  • Marketing Integration: Implemented social media marketing campaigns, integrating Instagram and Facebook ads to drive traffic to the site.

Results:

  • High Engagement: Upon launch, the site saw significant engagement, particularly through mobile users. The product images, bold design, and clear calls to action drove strong user interaction.
  • Positive Feedback: Users praised the site’s unique aesthetic, easy navigation, and fast-loading pages.
  • Sales Growth: Early sales exceeded expectations, with many customers making repeat purchases thanks to the seamless checkout process and engaging “Shop the Look” feature.

Conclusion

The Screw Face Product project showcases Momer Designs’ ability to create bold, engaging brands and highly functional eCommerce websites. Through careful research, thoughtful branding, and meticulous design execution, Screw Face Product was positioned to make an immediate impact in the streetwear market. The combination of a unique brand identity and an intuitive, visually striking website allowed the brand to stand out and attract its target audience.

This case study captures the full design journey, from platform selection to brand identity and website creation, showcasing your skills as a strategic and creative product designer. Let me know if you’d like any adjustments!