\n work
('Admin Panel')\n
\n\n \n // Head of Project
\n // UX/UI
\n // Frontend
\n // Magento v1\n
\n // Head of Project, UX/UI and Frontend
\n // Magento v1\n
\n The clumsy nice giant\n
\n \n How to turn something big, boring and confusing into something simple and comfortable? This was the challenge faced on the re-design of Biz Commerce's admin panel.
\n Using Magento v1 as our core, we inherited this massive and complex panel, which was not helping our customers' day-to-day lives.\n
A comparasion image between the default Magento admin panel, and the new design.
\n![\"\"](\"@/assets/work/admin/admin-old.png\")
\n ![\"\"](\"@/assets/work/admin/admin-new.png\")
\n // Problems
\n- \n
- Too much information \n
- Poor navigation \n
- Being boring \n
- Hard to read \n
- Not responsive \n
- How can I add a banner? \n
// My role
\n\n Design and prototype the solutions for every \"buggy\" view.
\n Create a teleportation input. Shrink to mobile size.
\n Develop a new interface builder from scratch.\n
Teleportation
\n\n\n One major problem with Magento’s panel - and any other big software like Photoshop - is the number of tools. There is simply too many of them. It does so many things, it is so great that actually you don’t know how to master it, and that is sad.\n
\n\n Unfortunately, like Photoshop, we could not just cut somethings out, (actually, we were developing more modules every week) so we needed to find a unique and easy way to navigate and locate stuff.\n
\n\n And there’s nothing better than start typing: “Prod...” and instantly seeing 72 menu items turning into 3, and you can choose one with your keyboard arrows.\n
\n\n By creating a search navigation shortcut, we actually eliminated the need to navigate through the menu, you no longer needed to remember where something is located, you could just start typing its name, and it’s there.
\n And we could even tune the results by adding “tags” to menu items so you could find related functionalities as well.\n
Ask me!
\n\n Sometimes finding the right place to go is not everything, you may need some guidance. For those moments we added two options:\n
\n\n- \n
- \n Go to our wiki // is that it?\n
\n Sounds like nothing special, but you will not be pointed to our wiki’s home page, but the exact article about the module you are trying to use, in addition to related articles, FAQs and tutorials.\n
\n \n - \n Talk to us\n
\n We added integration with our support system and you could open new tickets and ask for help, whenever you need.\n
\n \n
\n To do that we used a combination of the current page content to search for the best article in our wiki that could help you.
\n Or, use that same data, and ease your way to ask for help on our support channel.\n
Three smartphone screens and one desktop screen with differents pages of the application.
\n \n \n \n \n\n Cheerful and
\n simple design\n
\n\n \n If you think about a serious e-commerce business, where everything is done right, and everybody is focused, the word “cheerful” may not be what comes to your mind. But it should.\n
\n\n Our clients, and their employees, use the same system every day, all day long, and that may be not only be boring, but also lead to errors, stress, and a perception that the system is the culprit when something bad happens.\n
\n\n So, we not only guide our UX through the content and functionalities, but through the people that use it every day. It should feel fresh, every day. It should feel cheerful, every day. Be a partner, not just a system.\n
\n\n Achieving this was hard, but using animations in the right place, happy colors, beautiful icons, smooth transitions, and a well-balanced structure have given this old panel a constant feeling of youthfulness. That is why our visual identity is what it is, we reflect our own team mindset and mood to inspire our clients to feel the same.\n
\n\n![\"A](\"@/assets/work/admin/elephant.svg\")
\n\n \n Responsive.
\n Because 2019.\n
\n\n \n It may sound irrelevant since we already take it for granted, but when it comes down to e-commerce platforms responsiveness still somewhat new.\n
\n\n So we adapted this clumsy panel to work on small screens, and that demanded a lot of creativity because we did not touch the default HTML markup that came with Magento.
\n No. Everything was made with vanilla CSS & JavaScript. We did it this way so we could keep updating our core without worrying about fixing the layout.\n
\n Less peel, more stuffing\n
\n\n Another common problem with large admin panels is that their tables, blocks, boxes, containers, buttons, etc. get in the way of its content. It may be because the designer didn’t have another way to express his “talent” and use all that gradient, shadows and colors all over these elements, but that is just bad.\n
\n\n You just wanna get to the content when you are using a panel, that's why we made a large lifting on all elements and components, especially the old TinyMCE used on Magento v1... oh lord, it was painful but worth it.\n
\n\nOpen interface
\n\n Another big issue with Magento is that it is not that easy to customize its layout. Yes, of course, you have the freedom to do whatever you want with its interface, but that demands a tremendous amount of knowledge about its frontend system and of frontend itself. Now try to explain that to someone who just wants to add another banner to a specific category, and fails.\n
\n\n To solve that we created (what I believe was the only of its kind for Magento v1) a interface module to edit everything on your store frontend from the admin panel.\n
\n\n No, I’m not saying that we just have a couple of pre-set options to choose from, I’m saying besides a lot of pre-set options and default components you could rearrange all these elements, on every page, and edit its HTML, CSS, and JavaScript if you want too.\n
\n\n And you have a preview mode to edit your store on a production environment without harming your customers.
\n And all this was saved as a theme, that you could reuse on another store, and even have a CSS and Javascript version control.\n
\n To do that we extended the default widget system and pushed it to its limits. By creating a concept of components and placeholders, so you could create and edit any component you want, like your logo, a search box, a category menu, a banner, a slider, a product collection, a newsletter form, you name it, and then place it wherever you want, choosing not just the pages where it will be shown but where on that page. And even customize some behaviors like set an expiry date to a component, or multiple placement rules. For example show this header on every page at this position, and at the checkout page at that position.\n
\n\n All of that without touching a single XML file, or a PHTML template or anything, just some boxes and buttons on your panel.\n
\n\n