Zanui Admin CMS
Note: This is an ongoing project that is currently a work-in-progress. I used Balsamiq for my wireframes and currently creating in Figma.
Customer List Figma Prototype - Desktop View »
Overview
As you can imagine, the customer service reps already have most of their hands full while they’re on the phone with customers; they desperately need a better system so that they are able to assist their customers in a quick and efficient manner. It was a no-brainer that this admin section was going to be the first problem to tackle.
Filters
I added a more powerful filter where not only Customer Service Reps could use, but also the Marketing team. A use case example may be that Marketing might want to run a campaign on customers who pay via AfterPay, or customers who reside in a particular delivery zone, or simply customers who have only made one order. They can easily create the filter, export the results and even save the filter with their parameters for future use.
Customer Details
In the Customer detail page, I wanted to add more information that is easily digestable. At a glance, you could see what kind of customer you are looking at; based on their average order value, their Sift score (Fraud) as well as their basic information. The user is also able to add their own tags for each individual order and add/view notes. I’ve added tabs to seperate other details as well as having the benefit of scalability.
Thoughts
I am really enjoying this project as I just love designing solutions that will impact all aspects of the business, as well as their customers. So far, the stakeholders are just as excited and share the same passion to really make this Admin overhaul a success, and I’m happy they allow me to really push the limits by adding a ton of new functionality.
Bonus Thoughts: Figma
I’m very keen and excited to learn Figma with this project and I can see why the Design community are starting to switch over to Figma from Sketch! Just one of many of the coolest features in Figma is vector networks. As someone who is not very confident in creating icons, I was very impressed by how easy and intuitive it was for me to create the Bluejay logo. Vector Networks: 😍
From their component system to the way they handle libraries (assets), to their constraint properties… I was beginning to think that Figma’s got it all, but there was one frustrating issue I had as a heavy Axure user in the past. I understand Figma is more of an Invision replacement, but it’s just a little frustrating to create so many components/instances for some of the interactions I needed to prototype, however I am being very nitpicky and I’m sure I’ll get used to it with time.
Overall, I give it a solid 9/10 🥰
Showcase (opens in new window)
Before
After
Customer List
- Wireframe
- Figma Prototype - Desktop View
- Figma Prototype - Tablet View
- Figma Prototype - Mobile View
Customer Details/Order
Design System