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

PASSION AMPLIFIER

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

Situation

Task

Action/Result

Team

+++++++ Sip Business Vision

SIP Scooter Shop Re-Design
in Conversion Uplift, Performance and Style

  • Leading Onlineshop: Accesoires, spare parts and tunings for classic vespa and modern automatic scooters.
    We offer parts for virtually all models of the major manufacturers, e.g. PIAGGIO, VESPA, LAMBRETTA, APRILA, YAMAHA, BMW, MBK, HONDA, PEUGEOT and more.
  • Brand Purpose: 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.
  • Web Architecture: 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).
  • UX Experience Gap:"The website layout hierachy is functional and serves the shopping purpose, which is not mainly a wrong approach - Design is subjective, somehow. I accelerated the story into a full visual concept to speak "visually" with rich use of images.
  • Re-Design Solution: I analysed the Interface and Customer Journey and 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.
  • We want to test our assumptions, transforming the visual messaging into a more powerful modern solution.
    -driving CRO and revenue
    - giving clarity in its Word Conventions,
    - reducing unnecessary friction
    - making search functionality clear which products match

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 a lifestyle passion amplifier,

  • Business as a Lifestyle: 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.
  • Supporting a way of Living: 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.
  • Community Platform:
    We’re not just building a parts finder.
    We’re building a community platform, a solution-finder, a problem-solver, and a passion amplifier. Where storyes are shared and tips are rated. To always deliver trustful support.

When all Jobs Connect, its where the SIP SHOP business shows true value

the Core of the business
is the Scooter Classification Inventory and Database

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

Improvements' Highlights & Quick Views of the article detail sale pages

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

Re-Design Key Takeaways
SIP Scootershop

  • Being involved in that evolving stage of Project Development was a great learning 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.
  • 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.
  • 5. Internationalization Support:
    Better support for multiple languages and currencies to serve SIP's global customer base.
  • 6. 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