Monday Motorbike User Flow and Design System

by Rubayath Rahman

Monday Motorbikes is an electric motorbike company that needed a comprehensive e-commerce platform to sell their products online. The project involved designing the user experience and user interface for their website, focusing on enhancing the user journey from landing on the homepage to completing a purchase. My role included creating the user flow, wireframes, and high-fidelity prototypes while ensuring a cohesive design system.

Homepage: Highlights key products and company values, creating a compelling entry point for users.

Shop Page: Displays various products with filtering options for easy browsing.

Product Page: Provides detailed information about each product, including images, descriptions, and specifications.

Cart and Checkout: A streamlined process for adding items to the cart, signing in, and completing the purchase.

User Flow: Clear and intuitive navigation structure guiding users through the entire shopping process.

Research and Analysis: Conducted market research and user interviews to understand user needs and preferences.

User Flow Creation: Designed a detailed user flow to map out the customer journey from homepage to payment completion.

Wireframing: Created low-fidelity wireframes to establish the layout and structure of each page.

High-Fidelity Prototyping: Developed detailed prototypes using Figma, incorporating visual design elements and interactions.

User Testing: Conducted usability testing to gather feedback and refine the design.

Iteration: Implemented changes based on feedback to optimize the user experience and interface.

WordPress CMS: Chosen for its robust content management capabilities and ease of use.

Bootstrap: Utilized for responsive design and rapid development.

Figma: Used for designing wireframes, prototypes, and collaborating with stakeholders.

Adobe Creative Suite: Employed for creating graphic assets and enhancing visual design.

Custom Design System: Developed to maintain consistency and streamline the development process.

Build with
Adobe Creative Suite
0
%
WordPress CMS
0
%
Bootstrap
0
%
Figma
0
%

Full Screenshots Below