Backstage on the revamp of our Admin to become #1 on PH and GitHub Trending

On Monday, 7th of February, we put out a completely redesigned admin portal as part of the Product Hunt launch! As an ever-growing open-source platform, we wanted a modern design that feels intuitive to all types of users.

For those who are not familiar with Medusa yet, Medusa is an open source headless commerce that has gained over 7K stars on GitHub in the past 6 months. It gives ecommerce teams the freedom and full ownership of their store’s tech stack.

In this article, I’ll give you an exclusive backstage view of how we went from the previous design to the new, much cooler design. Feel free to play around with the new admin portal as well in our new demo!

Before:

After:

Motivation

Our old admin portal had a clean design. It delivered all features necessary in a clear and simple design and has been used for a long time by existing Medusa merchants. You were able to access all features related to products, orders, and more.

Although it didn’t look bad, it needed a revamp. It needed better colors, an easy-to-use design and workflow, and a modern look and feel.

Ludvig Rask, the Head of Design at Medusa, came in for the rescue. Ludvig saw a need to completely improve the design and experience of the admin portal.

“The old design of the admin has been with Medusa since the beginning - and while it served us well, recently, we identified a need to update it, bringing the admin platform in line with the evolution of modern product design.” — Ludvig

Ludvig decided to turn this into a more structural design change for us that really marked a rebirth of our ways-of-designing across website, logo and other company assets.

The Redesign Process

The redesign process was a collaboration between our development and design teams. In short, the designer would create frames on Figma, share them with the design teams for approval, feedback, and feasibility, then make any changes necessary. This process was included in the engineering sprints.

This collaboration workflow allowed combining both the design and development points of view to create a seamless design and a better user experience.

“Revamping our entire admin system in one month was indeed ambitious. The team managed to nail it by having done great foundational work of both planning the tools and libraries to use, how to use them, and taking a ruthless approach to feature prioritization. This allowed us to move fast while shipping high quality code.” — Oliver, CTO and Co-Founder of Medusa

The Implementation

Tools

As the idea of the redesign of the admin portal is to make it more modern, we also wanted to use more modern tools to bring it to life!

Previously, we used Rebass to implement the design of the admin portal. For the new admin, we started using Tailwind CSS. Tailwind CSS is a CSS framework that lets you focus on creating reusable and beautiful components. In addition, we used RadixUI to use prebuilt components like Modals.

The biggest advantages of this switch were related to the community size of each of these tools and the support we would find while using them to implement the new design. Also, tools like Tailwind CSS generate a lot of attraction from developers, which can grow our community. Additionally, these tools make onboarding new developers into our team an easier process.

We also took on a new design principle which is the Atomic Design principles. It lets us structure the admin’s files more consistently.

Phases

To make the process of the redesign much easier, we first divided the different parts of the admin into domains. For example, “customers” is a domain, “orders” is a domain, and so on.

Then, we divided the implementation process into 3 phases:

The first phase focused on the settings page. As the settings page has a lot of components, and since we are using tools like Tailwind CSS to create reusable components, we created a lot of components that we reused later on in the next phases. These components included inputs, dropdown, buttons, etc...

The second phase focused on the discounts, gift cards, and customer pages. These 3 domains are generally similar, so we were able to work on them simultaneously. During this phase, we also added some new features like filters for discounts, gift cards, and customers.

The third phase focused on the heavy domains that had a lot of logic. These domains are orders and products. Some of the logic was already implemented in the previous admin, but we were able to refactor it and make them easier to maintain.

Bug Hunt

We have a fantastic community at Medusa and we value their input. We wanted to involve them in this process and get their feedback on what we’ve been working on. So, a week before the release of the new admin, we created a bug hunt on our Discord!

We first created the demo admin portal to make sure all tests are made in a live setting. The demo admin portal is connected to a PostgreSQL database and Redis.

Then, we released one domain at a time to our community. Each time we release a domain we ask our community to test it out, provide us with feedback or any bugs they find. We then awarded bug hunters for finding these bugs.

All bugs found were reported as tickets to be fixed by both our team and the community.

The bug hunt gave us fresh eyes into our admin. We were able to test a lot of features and details we overlooked.

New Components

With a new design comes new components! Here are some components you’ll find when you update your Medusa admin portal:

Order History Timeline

Here’s what the previous timeline of an order looked like previously:

The redesign of the timeline made it easier to read and understand with just one look. It makes great use of colors and icons to make it intuitive and easy to use. Managers and customer service employees can have a quick view of an order’s status and its history.

Customer Profile

Previously, customer profiles on the admin portal were displayed just like a bunch of info with easy links to their orders.

The new customer profile page resembles a social-media feel. Its design highlights necessary information about the customer and makes it easy for store operators to get a quick overview of the customer’s details without maneuvering too much around the page.

The design for the customer profile page actually poses a good example of the compromises and collaborations that had to be made between the development and design teams.

The designer had a vision for showcasing a map with the customer’s location. However, due to tight deadlines we decided not to include this feature in the current release. At Medusa, we prioritize code quality and make sure that when we build features, we give them the time and focus needed rather than rush them for a release date.

Settings

Previously, each settings section opened on a new page. Again, the forms were basic. But another problem was that the deeper you went into the pages, the more work it took to go back to previous forms or pages in the settings. This would become annoying with time.

The new design brings enhanced navigation throughout the settings page. The improved navigation brings a better user experience as well as a revamped form design. Our core design principle is to always make the path to each section clear instead of hidden sub pages.

Conclusion

Redesigning the admin portal was a 1-month long process that could not have been done without our development team, our head of design, and our community.

What do you think of our new admin portal and our process? We look forward to hearing from you!

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.