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)
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
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.
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.
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
Thank you!