[ 7 ]

  • © 2010 - 2025 Copyright

    • PASSION AMPLIFIER

    [ webshop ]
    sip scootershop b2b and b2c
    Design System
    08/2017 - 12/2018

    The best stories are written on the Road - SIP SCOOTERSHOP updated Interface User Journey for B2B and B2C

    1
    1
    1
    2
    1

    Situation

    • no Desktop Screen Inventory
    • no responsive Design
    • not mobile accessible
    • no Design System

    Task

    • Desktop Story Board
    • Data Base Structure
    • Competetive Research
    • Design System
    • A/B Test Scenarios

    Action/Result

    • Map Use Cases
    • Map Information Architecture
    • UI Screen Overview
    • Feasability Priorisation
    • UI Design Components
    • Design Solutions

    Team

    • UI Design
    • PM
    • Dev Team 5x

    Desktop Web Re-Design in Performance and Style

    • Sip Scootershop is a leading Mailorder and Onlineshop for scooter parts, Accesoires, spare parts and tunings for classic vespa and modern automatic scooters. I took over the Re-Design of the Webshop and created a First Design System and Design Workflow with Invision. Improving the Customer Journey for B2B and B2C.
    • The old Interface Design and Information Architecture is overwhelming and outdated considering modern trends. Its hard for users to search for specific products or categorys. There is no visual hierachy in text and layout style or about product specifications (eg. discounts or special offers).
    • The business purpose of SIP Scootershop is to be a leading global provider of scooter parts, accessories, and tuning products, primarily focused on classic Vespa and modern scooters. SIP Scootershop aims to be more than just a parts dealer—they're a hub for the scooter lifestyle, combining commerce, technical expertise, and cultural passion.

    Story Board Analysis to write User Storys and User Task

    I gathered a Desktop Screen inventory in Sketch to create a Story Map and to identify Use Cases. With the development of UI Components I created an overview about the context of usage and defined use cases. Helpful as a shared library for webdevelopers and to onboard new designers. With the overall Goal to keep track on brand consitency during the development process.

    We are not just a shop for scooter parts, we are passion amplifier,

    • To truly connect with and serve SIP Scootershop's users, we need to step into their mindset and design with their goals, frustrations, and lifestyle in mind.
    • Empathy means designing not just for the transaction—but for the whole experience: the excitement of restoring a 1982 PX, the frustration of a wrong bolt, the joy of that first ride. SIP Scootershop isn’t just selling parts—it’s supporting a way of life.
    • We’re not just building a parts finder.
      We’re building a community platform, a solution-finder, a problem-solver, and a passion amplifier.

    When all Jobs Connect, its where the SIP SHOP business brings true value for customers.

    Scooter Classification Inventory and Database Breakdown

    • Scooters can be classified in several ways depending on engine size, design, fuel type, and usage. Here's a clear breakdown of the most common scooter classifications:
    • A Scooter Database serves as the central data structure that powers everything from product listings to compatibility checks. It connects scooter models, parts, technical specifications, and customer needs into one cohesive system.
    • When a user enters a search, we want them to quickly and easily find the products that are most relevant and fit exactly there scooter parts.

    Search functionality and Filter functionality is at it hearts of the E-commerce shop

    A Scooter Database serves as the central data structure that powers everything from product listings to compatibility checks. It connects scooter models, parts, technical specifications, and customer needs into one cohesive system.

    Created a design component library as a shared source for the development team.

    ...covered edge cases, which will not be missed during the development process.

    They’re rare, but when they happen, they expose weaknesses in your system—and they disproportionately hurt trust, support costs, and conversion rates. With well deisgned error pages we help the user on there way.

    Sale Page Improvements, Highlights & Quick Views

    Improving a webshop sale page (like SIP Scootershop’s) is critical for converting visitors into buyers—especially in a parts-focused, high-trust domain like scooter components. Here’s a strategic breakdown of improvements for the Sale page (i.e., clearance, discounted items, or special offers):.

    High resolution imaginary from professional photographers included telling the story

    Photography plays a critical role in user engagement—especially in e-commerce settings like SIP Scootershop, where product fotos, outdoor inspiration, and product use cases directly impact buying decisions.

    Key Takeaways

    [+] Being involved in that evolving stage of Project Development was a delight, and seeing the project workflow expanding, even while working remotely was a hudge pleassure and a well treat for my work-life-balance.

    1. Improved User Experience (UX):
    Streamlined navigation: Easier product discovery and clearer categorization.
    Faster loading times: Enhanced performance across devices.
    Mobile optimization: A more responsive and user-friendly mobile interface.

    2. Enhanced Visual Design UI:
    A more modern, cohesive aesthetic aligned with the SIP brand.
    Better use of images, typography, and layout to engage users and showcase products.

    3. Higher Conversion Rates:
    Simplified checkout process reducing cart abandonment.
    Improved product pages with detailed descriptions, availability info, and dynamic filtering.

    4. SEO and Performance Boost:
    Redesign included technical SEO improvements and faster site speeds, improving search rankings and organic traffic.

    Internationalization Support:
    Better support for multiple languages and currencies to serve SIP's global customer base.

    5. Integration with Inventory & Logistics:
    Enhanced workflow integration for real-time updates on Design Files.

    You Tube Video: https://www.youtube.com/watch?v=isu0zH1T16Q&t=219s

    next Project,
    RAZOR GROUP

    next project