Task /admin: Design Plugin Management Page for Admin Panel on Figma
webcrumbs-community opened this issue · 5 comments
Objective
We have the initial layout and frontend design of an admin panel featuring plugin search and result cards. It's time to bring functionality to life by designing a dedicated plugin management page.
Description
The plugin management page will be a pivotal part of our admin panel, allowing users to install, update, and manage plugins with ease. This page needs to be intuitive, providing a seamless management experience. We're looking for a design that is not only functional but also aligns with our current aesthetic.
Task
Create a design on Figma for the new plugin management page, which includes the following elements:
- An overview section of installed plugins
- A search function to discover new plugins
- Individual rows for each plugin with actions like 'Configure', 'Update', 'Enable/Disable', and 'Remove'
Extra mile? Suggest a detailed view for selected plugins showing deeper information and settings
Requirements
- The design should be consistent with the existing admin panel's look and feel.
- Prioritize user experience with a clear layout and intuitive controls.
- Ensure that the design is responsive and adapts well to different screen sizes.
Important Links
- Reference Link
- Figma Link - Request access to edit
Steps to Proceed
- Review the current admin panel design to maintain consistency.
- Draft the initial layout with placeholders for each section.
- Open a discussion to ask for feedback from the team.
- Finalize the design for review and approval.
Additional Context
This design will set the stage for the next development phase, where functionality will be implemented. It's crucial to get this right, as it will directly impact the user's ability to manage plugins effectively.
Acceptance Criteria
- Design aligns with the existing admin panel's design language.
- All required elements are included and thoughtfully laid out.
- The design has been reviewed and approved by the team.
Ready to showcase your design skills? Start designing on Figma!
Hi @webcrumbs-community ,
I am so glad to find this issue open. Last week I started learning to use Figma to create web designs for my big project. Working on this issue will help me to improve my hands-on experience with Figma and help to learn a few UI/UX concepts. But I am too new-bie for this I truly appreciate parallel support from anyone who knows Figma.
And I would like to add a point here.
After seeing the plugin page in Wordpress. I noticed it is not creating a better user experience and readability for a person.
- We can use icons for the operations "Configure', 'Update', 'Enable/Disable', and 'Remove'. That will give more space for the user to learn more about the plugin (I mean the description about the plugin, features, etc)
- Whether the user uses the plugin or not(Enable/Disable), he first needs to download right? we can add a save option for the plugin. if the user finds a plugin useful in the future. he can save the plugin and when the requirement occurs he will download it and use it. Similar to Save/bookmark features on Twitter, LinkedIn, and Google(we can connect the heart icon in plugins with this).
If you find it okay, I would like to work on this issue. I like to hear your thoughts too.
Hey, @Ashok-Kumar-dharanikota! So glad you like it. Yes, by all means. Wordpress was born in the 2000's. Improvements are welcome! Do you have an estimate of when we can expect a first version? Let me know if we can help.
Hello @webcrumbs-community,
I apologize for not being able to discuss the issue further during our previous conversation.
Regarding the creation of the plugins page, I wanted to share a few things with you. When a user clicks on "Add plugins," they will see the plugins they are currently using as well as additional useful plugins. I suggest dividing this into two tabs: "My plugins" and "Add plugin."
In the first tab, the user will find all the plugins they have installed, bookmarked, disabled, and running. In the second tab, the user will have a search option and filter to find the desired plugin. By using this pattern, we can create enough space for plugins, and users can easily navigate.
Using icons for installation, auto-update, enable-disable, and "Like" options can really make things easy for users. I was in the process of creating a component using this pattern, but it seems like it's taking a little longer than expected, and I haven't found accurate icons for it yet. If I complete it, I will let you know, and please share your insights too.
Attached is an image that may help illustrate my suggestions. (The extra space is for icons)
Makes sense!