2022 UI / UX Design

Admin Panel Interface Design

Project Context

Engineers and developers have a way of creating magic in the world of technology. In the case of our client, their team of developers had devised a complex CLI that managed the social platform that they used for their internal communications. Through a couple dozen commands, developers could move teams, specific employees, or entire groups where they needed to go. With the implementation of their new social platform, they were in need of a user friendly interface to be used by admins, managers, and support members to help manage the members on the platform.

Client / Privately Held

Team / Team of 2

Role / UI/UX Design

Involvement / Discovery, Storymapping, Wireframing, Design, Prototyping

Tools / Adobe XD, Figma

Duration / August-October 2022

Page Contents

01. The Problem Statement

02. The Solution

03. Defining the Users

04. Story Mapping

05. Information Architecture

06. High Fidelity Prototyping

Reflections

01. The Problem Statement

The client has been in operation for over 15 years. They possess a unique business structure that is recruiting based, so their backend system is critical to their success. With a new internal social platform being launched, the client is in need of a way to maintain the complex system they have with developers and customer support department.

02. The Solution

We were brought in to parse through the commands of their internal CLI and create an intuitive interface that could be integrated seamlessly into their existing backend dashboard. The commands needed to be grouped by their intended purposes, and actions laid out in a cascading effect beneath them. Adding, removing and syncing the platform all needed to happen with ease.

03. Defining the Users

The nature of this backend system was complex in two ways. It was created by developers to manage a vast amount of data that needed to be monitored and updated regularly. However, this data needed to be accessed by a support team that was not fully technologically savvy in a way that they could efficently utilize this system and solve client support tickets. To effectively solve the problems that both sides faced, we had to clearly outline each user persona.

Developers

The developers that created the database needed to understand where their actions could be found in the front end. They also needed every command to be translated.

Support

Support needed to be able to understand where to find specific items in terms that were easy to understand, without misrepresenting a command in order to avoid error.

04. Story Mapping

We outlined the needs of the system using a storymapping process. Our approach was two-fold. We studied the CLI inputs within the system and divided the platform structure as we saw fit for a user design. We met with a stakeholder to confirm the validity of our product structure and made adjustments to the storymap. Taking into account that these inputs were to be pulled from an already developed database, we made note and paid close attention to how the input style from the user interface needed to be structured in order to be inputted into the existing database structure correctly.

05. Information Architecture

Going into the project, we knew that the nested nature of being built in an existing backend dashboard would require use of segmented navigation. We crafted the information architecture with extra consideration to how tabs can be integrated into the experience to transition users between the various needed tasks.

06. High Fidelity Wireframes

This project was solely focused on the user interface and was based off of an existing visual system.

.Reflections

Power of Components: The same action was needed in multiple instances but with a varying criteria.
Understanding the User: Though given a comprehensive look into the CLI program of the client, our story mapping took a few interations to reflect the client product accurately.

Sydnee.App Component Library

Designed a cohesive component library for use in an e-commerce style client management SAAS application.

Cordino App Product Design

Developed an internal social networking app for daily communication among 30,000+ users compatible on mobile, tablet and desktop.