Center for Antiracist Research:Admin Panel Redesign
Role
UX Designer, UX Researcher
Project Duration
2 months
Tools
Zoom | Figma | Miro | Illustrator | Photoshop
Challenge
Currently, CAR faced a problem that projects must maintain simultaneously. However, the current admin panel was hard for users to follow, and users started complaining about the interface being hard to use. As the Center for Antiracist Research (CAR) grows, the office would like to redesign the admin panel for employees. Therefore, employees could have a better-looking and user-friendly admin panel.
Goal
Created the new version of the CAR admin panel to satisfy users' needs and boost the center's efficiency.
Original Admin Panel
Design
Process
1
User Research
User Interview
2
Analysis
Pain Points
Website Sitemap
3
Design
Wireframing
Prototype
4
Testing
Usability Testing
Research / Findings
User interviews
Before redesigning the admin panel, I needed to know what functions users hoped to see in the new version, their thoughts about the current version, and what they were frustrated about while using the current version of the admin panel. Therefore, I began with interviews with current users (people who work at the center). In the end, we got 4 interviews with employees at CAR from 2 different departments. Below are some interview highlights and pain points:
The right sidebar is hard to find on the builder page under the CAR project.
It's vulnerable to delete data accidentally in the admin panel.
Hard to find data in the admin panel, because they usually forget where they uploaded it previously.
Buttons and insert columns are messy, they are not intuitive.
Hope interfaces can be more attractive.
"I feel the current version is good for like 1 or 2 projects. However, it's will be problematic if we have more projects to maintain."
"I think a complete central system can assist me in boosting my productivity."
Information Architecture
Website Sitemap
After the research, I have more ideas about the admin panel. Therefore, I created a website sitemap to prepare my prototype. I didn't change the original website logistics much because they were all necessary to be on the site. Also, after a discussion with the developer, we thought it was good to have a central media library page for users to organize the data they uploaded in four different projects.
Final Prototype
🏠 Login Page/ Homepage:
We wanted to make the user interface still be concise and professional. We also hoped the button that navigates to a specific project could be more clear.
📁 Project Main Page:
By organizing the form page into a more structured format, users will be able to quickly and easily input their information without feeling overwhelmed or unsure of what to do. And adding a confirmation box when users want to delete a record is an excellent way to prevent accidental deletion of data, which can be a major problem for users.
📊 Media Library:
This is the new section that the previous version didn't have. Since we have many documents to upload, it was better to have a central media library to maintain every digital asset.
What did I learn?
Overall, designing and developing a large website/system for users while collaborating with cross-functional teams required many works indeed. Through this experience, I learned the importance of having a website sitemap to keep the design process smooth and effective. Additionally, gathering feedback from different teams has helped to continuously improve the website design to better meet user needs and company goals.