This is an overview of a large internal project for my employer, CrystalCommerce.

The core component of our online software is the ecommerce system. Users have access to an admin where they manage many aspects of their inventory and business.

The assignment is to completely redesign the entire UI and UX of our admin software, so it’s actually an epic as opposed to a project.

Our system, both frontend and backend, is approaching the decline phase of its product life cycle. The admin has an antiquated UI and poor UX (which was mostly designed by engineers during development, not by designers), and our code base and system architecture need a complete rewrite.

Further, our legacy system admin interface is not responsive in the slightest, so mobile designs and UX are a key component of this challenge.

Below is the legacy admin which needed to be completely redesigned.

I collaborated with the only other designer at our company on this, so it was just a two-person team taking on the entire epic.

Besides working on the UX and UI, I was responsible for entering all of the projects, features, and requirements into our project management system, keeping it up to date, prepping features for handoff to be developed, and collaborating as needed with engineers.

It was necessary to approach this epic in multiple stages.

Firstly, we needed to view it from a high level, taking in the big picture.

• What goals does our company have for the next level of our platform, not just for the admin but for the overall customer journey?
• What other experiences are going to tie into the new admin?
• How can we look ahead and foresee creative opportunities?

Secondly, we needed to break the epic into sections and features, and do an audit of everything.

• What are the core features of our platform?
• What are the major goals of our users?
• What are the obvious issues with the UI and UX?
• What are the most common user complaints?
• What opportunities do we have to innovate?

While answering these questions, we did a deep dive into the legacy admin, taking screenshots, notes, and doing wireframes of brainstorm ideas. We also did research to get ideas, inspiration, compare other systems, and so on.

Some work from our information architecture and navigation audit and restructure.

Various ideas and brainstorms from our research of other platforms and solutions.

Initial dashboard brainstorm wireframe, and progressive iterations and exploration. 

Below are the redesigned navigation menu components in Figma. Our solution involves an innovative tab system which lets a user jump from their home dashboard, to business dashboard, to shopping experience, all from one location.

The design phase of this epic is still in progress, so these visuals are not necessarily final.

Click the preview below to play a short demo video of the prototype, showing the global frame and dashboard functionality.

Our legacy system is not responsive, so we focused a lot of effort on creating mobile-friendly UX.

Click the preview below to play a short demo video of the mobile navigation prototype.