Products
Super Admin Panel (B2B/B2C)
Website Builder
Email Builder
Website Design (B2B/B2C)
What I did
UX/UI Design of the Whole Product
The client, with 40 years in the business, provides protection plans and repair/replacement programs for household items across Canada. They wanted an admin panel to manage products, customers, orders, and protection plans, ensuring efficient operations and customer satisfaction.
Key features include product management, customer profiles, order processing, and analytics. The panel also supports repair tracking, user roles, scalability, and security to facilitate seamless business management and growth.
The client currently uses multiple tools to manage their products, customers, and orders, and they rely on developers to make website updates.
They are looking for a unified portal that allows them to manage all aspects of their business—including products, orders, and customer relationships—while also providing the flexibility to create and customize their website according to their preferences.
Additionally, the portal should enable them to handle both B2B and B2C operations and manage email communications for customers and internal users, all from a single platform.
Super Admin:has complete access to all platform functions.
Other Admin Users:Users with permissions that are limited compared to the Super Admin. The Super Admin can also create new user roles as needed.
Market Partners:Retailers from whom customers purchase Zucora's services.
Vendors:Vendors are sales people inside or outside zucora who helps Zucora to sell their services.
Customers:Individuals who buy Zucora's services.
SmartOne Card:Physical cards provided to Market Partners, containing multiple service plans that can be distributed to customers alongside their purchased products.
We designed a super admin that allows them to manage both their B2B and B2C business from a single platform. This super admin lets them create customer promotions and monitor all user activities within the panel, streamlining their operations and giving them full control over their business.
We've designed a full page builder for the client, allowing them to create and edit their main website directly from the admin panel.
This tool enables admins to add and edit sections, create new pages, and manage content easily. The builder is designed to be user-friendly, with page settings and sections on the left and section-specific settings on the right.
The design draws inspiration from popular existing tools, ensuring a familiar and intuitive experience.
Page Builder Flow Page Builder Flow Page Builder Flow Page Builder Flow Page Builder Flow Page Builder Flow
User logs into the admin panel and selects the page builder option from the side bar
The user is presented with a selection of pre-designed templates or the option to start from scratch.
Before starting, the user is prompted to fill in essential details about the page.
The user can view available sections on the left and drag and drop them into the central design viewport.
The design instantly renders in the viewport, allowing the user to see changes in real-time.
By clicking on an image, the user can upload a new one or select an alternative from the gallery.
The user can click on headings to edit the text, adjust the 'H' tag, and fine-tune the formatting. This can be done with paragraph and button as well.
When editing text, a pop-up appears with fields for different languages, enabling the user to input text for all the languages that are live on the website.
An email builder has been designed for the client, allowing them to create custom emails for both customers and internal use. The client can design each section of the email using the email builder, but the triggers for sending these emails are predefined to prevent admin users from disrupting the overall email flows.
After creating the page builder, email builder, and super admin, the client's website was also designed by providing pre-designed pages and establishing a consistent design theme and identity.
Before developing the website, wireframes were created to map out the user flow, determine content length, and identify the necessary sections for each page. This planning ensured that the website would effectively deliver information and be SEO-friendly.
The website sections were crafted to align with this theme, allowing the client to easily use them within the drag-and-drop builder. The B2B section of the website was intentionally kept very professional, tailored specifically for business users.
Multiple website themes based on colors were created for the client, allowing them to change the website theme according to weather seasons, festivals, and other occasions.
