UI/UX Requirements for Custom UI Implementation

Content

About Custom UI
Accepted Design Format
Responsive Design
Style Library
Interactive Components
3D Canvas
Option Panel and Widget Designs
Modals
User Flow Specification
Custom PDF
Other Important Considerations

About Custom UI

Configurators present unique challenges in UI/UX design due to their inherent complexity and the vast array of options available. This guide aims to assist you in navigating these complexities. While it provides a comprehensive framework, we encourage you to consider your unique use cases to fully harness the potential of your configurator design.

Accepted Design Format

The design must be delivered as a Figma file. It should include a complete UI design, a fully built styles library, and a list of all components used in the design. This ensures consistency and allows for easy implementation.

Responsive Design

The design must be provided for at least two breakpoints:

Mobile (ex, 375px)
Desktop (ex, 1024px and above)

Designs must be provided for all unique screens across these breakpoints. If additional breakpoints are needed, such as for larger screens like 4K or tablet, they should be listed.

We require this because two key parts of the UI - the canvas and the option panel - must function correctly across different screen sizes. By default, the canvas will shrink to fit smaller screens, but you can suggest alternative behavior or provide minimum and maximum size limits for different screen sizes.

Style Library

The style library must include:

Font styles
Color palette
Icon library

These should be created using Figma’s style system, or they can be listed separately. If a custom or paid font is used, the font files must be included in a folder for easy download. Icons should be vector-based and easily exportable from Figma, or you can provide a separate folder with all the icons used in the design.

Interactive Components

All interactive components must be listed separately in the Figma file with all their available states, such as:

Default
Hover
Selected
Loading
Error
Disabled (if applicable)

For example, a button component should have states for default, hover, loading, and pressed. Icons should include the same states, with an additional tooltip state if needed.



Common interactive components include:

Option Groups
Buttons
Icons
Dropdowns
Checkboxes
Radio selectors
Text Input Fields
Toggle Switches
Tabs
Any other UI elements required in the custom design

If you require any additional components not listed above, they must also be included in the Figma file with all relevant states for accurate implementation.

3D Canvas

On the canvas, there are several key UI components that typically appear. These include:

Quick Action Icons:

Reset configuration
Dimension
View Full-screen
Export (3D model, Image, PDF)
Undo and Redo
Add to favorites
Zoom all, Zoom in, Zoom out
Warning 3D message



Other UI Elements:

Title and description
AR button
"Drag to Spin" component, which appears on the first load

It's important to decide which of these components should be included on your canvas design, or if any additional options are required. Each selected element must be reflected in the Figma file to ensure proper implementation.

Option Panel and Widget Designs

You need to determine how the Option Panel will be displayed and which widgets you want to include. Standard widget UI options include:

Thumbnails Widget
Multi-choice
Radio-button
Number Scale
Number Button
Engraving
Print on Demand
Colour Picker
Upload Own Material
and others.



If you need assistance in selecting the appropriate widget types, you can reach out to us for guidance. Each widget can be customized to meet specific needs, and you must provide a design for every widget you plan to use.

Modals

We offer several standard modals that can be included in the design, such as:

View in AR (for desktop)
Export 3D Model
Generate Image
Generate PDF



If you plan to use these modals, you must provide designs for each. Additionally, if there are any other modals you wish to include, you should provide corresponding designs.

User Flow Specification

Along with the design, a detailed user flow must also be provided to ensure clarity on how the custom UI should function. To specify the user flow, the following methods are preferred:

Loom Video Explanation: A short video using Loom (or similar tools) explaining each step of the user flow. For example: click on a button to open a modal, select an option to trigger a specific interaction, how error messages are displayed or resolved, navigation between different sections of the UI, etc.
User Flow Diagrams: Use connected notes or detailed user flow diagrams directly inside the Figma file. Specify transitions, conditions, and key interactions (e.g., hover states, button actions).
Figma Prototype (Optional): Provide an interactive Figma prototype to demonstrate navigation between different screens. Include a recorded walkthrough of the prototype to highlight key interactions and features.

Providing a clear user flow ensures we understand all critical details, helping to implement the UI as intended and covering all necessary scenarios, including edge cases and error handling.

Custom PDF

It's also possible to customise the PDF that is generated from the configurator. If you choose to generate a custom PDF from customizable products, you must provide a detailed design for the PDF. This design should outline how the product details, images, and other relevant information will be presented.

When providing the PDF design, it is important to specify the sizing format, whether it is A4, Letter, or a custom size. This ensures the PDF will be generated correctly and formatted according to specific needs.

Other Important Considerations

If you wish to include any custom UI elements that are not offered by Mimeeq, you must provide a design for those elements. Additionally, you need to contact us to confirm that these custom elements can be implemented, ensuring that all details are agreed upon before proceeding with development. This helps prevent any issues during the implementation phase.

We are always happy to assist and collaborate to ensure your custom UI meets all requirements and achieves the desired outcome. Feel free to reach out if you have any questions or need guidance. 🤝

Updated on: 22/11/2024