Project: App, Website and Dashboard for Ecommerce for the sale and installation of vehicle accessories.
Role: Visual Designer – (UI)
Duration: 8 months
Tools: Figma, Adobe Photoshop
Mech is a perfect solution to find accessories and parts for cars and motorcycles and at the same time find professionals to install them.
The UX/UI goal:
That the users of the Mech App achieve in a very simple and practical way its correct usability, thus guaranteeing the success of the App’s objective.
Principles
The main principles on which Mech is based are as follows:
Consistency: this principle seeks to establish and maintain clear and coherent rules regarding the appearance, behavior and interaction of design elements. This includes uniformity in color palette, typography, iconography, spacing, button styles, among others. This principle seeks to generate confidence in users and facilitate their understanding and navigation in Mech.
Modularity: This principle seeks to create reusable design components that can be easily combined and adapted. By dividing the design into smaller and autonomous elements, such as buttons, cards, navigation bars, etc., to build a more efficient and scalable interface. This promotes efficiency in design and development work, while maintaining system consistency and agility.
Flexibility: This principle seeks to adapt to different contexts and needs. It should allow variations and customizations to adapt to different products, platforms and user experiences. This implies defining clear guidelines for the adaptation of design elements to different screen sizes, orientations, devices and usage scenarios. Flexibility helps ensure that the design system can adapt and evolve over time without losing its integrity.
Information Architecture
The goal is to have an efficient and intuitive information architecture as the foundation that guides users through the product, providing them with a smooth and satisfying experience.
Click on any to expand
Foundations
To maintain visual consistency and coherence in design it is essential to make use of the style guide, and other parameters. This document brings together the style and design guidelines and standards that guide the creation and application of Mech’s visual identity.
Click to expand the section
Click to expand the section
Click to expand the section
Click to expand the section
Click to expand the section
Components
It is important to take into account the modular and reusable components of this document, in order to build a scalable and consistent interface through the combination of atoms, molecules and organisms.
Click to expand the section
Click to expand the section
Click to expand the section
The design
Now it is time to run all of the above system.
Click to expand the section
Login
Click to expand the section
Register
Click to expand the section
Home
Click to expand the section
Product Search
Click to expand the section
Instaler Search
Click to expand the section
Product view
Click to expand the section
Checkout
Click to expand the section
