Adeption Admin Panel

I was the UI designer on the redesign of Adeption’s admin panel, responsible for transforming wireframes into high-fidelity prototypes while ensuring alignment with the platform’s visual design system.

Overview

Role: UI Designer

Year: Product Manager, Developer, UI Designer (me)

Year: April - November 2023

Tools: Figma, Midjourney, Adobe Firefly

The Goal

As Adeption grew, the existing admin panel began to show limitations in both usability and scalability. There was a need too:

Modernise the interface to align with Adeption’s evolving brand and product vision

Improve ease of use for non-technical users

Support scalability for larger enterprise clients with more complex needs
Enhance clarity in navigation and layout to reduce confusion and training time

My responsibilites

Translated low-fidelity wireframes from senior UI developers into high-fidelity prototypes, ready for handoff to development.

Made decisions on visual elements such as colour, layout, and spacing, ensuring alignment with Adeption’s visual style guide.
Maintained consistency across all screens, ensuring the interface was cohesive and functioned well across web and tablet.
Collaborated with product managers and UI developers to deliver a polished and functional final product.

Background

what is adeption?

Adeption is a leadership development platform that helps people build leadership skills through real-world practice and reflection.

It’s used by companies, coaches, and HR teams to support personal and professional growth.

The platform offers guided learning loops that users complete in their own work environment.

Adeption uses an Admin Panel to create and manage these unique leadership development experiences for clients.

Visit Adeptions' website

(Current client-facing platform)

Design system

Understanding Adeptions design system

I began by thoroughly exploring the client-facing platform, which had already implemented the new design system.

Clicked through the interface to understand how elements interacted and to identify consistent UI patterns.

Observed how visual elements, like layouts, buttons, and pop-ups, were applied across different pages and user flows.

Explored Adeption’s comprehensive Figma library, I used this library to:

Locate specific UI elements when designing new screens
Identify reusable components or determine when new ones needed to be created
Ensure all designs stayed aligned with the existing visual language

Design Process

Wireframe to UI

I was tasked with transforming low-fidelity wireframes into polished, high-fidelity UI designs using Adeption’s design system.

Applied components, colour styles, and typography directly from Adeption’s Figma design library to maintain consistency and clarity.

After completing initial drafts, I would:
- Meet with the product owner to walk through the designs
- Gather feedback on areas for improvement
- Iterate based on that feedback through multiple rounds as needed

Component choices

In applying Adeption’s design system, I made intentional choices around components to ensure consistency, clarity, and usability across the interface.

Typography

Used the design system’s font hierarchy to create a clear visual structure.

Headings were styled with bold weights and larger sizes to establish emphasis.

Body text maintained legibility through appropriate line height and spacing.

Buttons

Followed pre-defined button styles: primary for key actions, secondary for alternatives, and text buttons for subtle interactions.

Maintained consistent padding, corner radii, and interactive states (hover, focus, disabled) for a polished experience.

Imagery & Icons

Ensured icon styles and sizes aligned with the design system for consistency.

Imagery was generated using Adobe Firefly and Midjourney to maintain a modern and cohesive visual style.

Images were selected or created to feel optimistic, clean, and aligned with the tone of the platform.

Modals and pop ups

The platform uses a wide range of pop-ups, such as modals for editing content or uploading images, and notifications for success messages, alerts, and confirmations, which appear throughout different user flows.

Each modal and notification was redesigned to align with the existing visual language of the client-facing platform.

This included consistent styling, spacing, iconography, and interaction patterns across all instances.

I also designed tablet-specific versions of these pop-ups, ensuring they resized appropriately and remained legible and easy to interact with in both landscape and portrait orientations.

Optimising for Tablet

Many screens in the platform display a large amount of information, making tablet optimisation particularly challenging.

I was responsible for designing layouts for both tablet landscape and portrait orientations, ensuring usability and readability in each.

This involved rethinking layout structures, prioritising content, and adjusting spacing and alignment for different screen widths.

Challeneges

Designing for Data-Dense Interfaces

One of the main challenges I faced was designing screens that displayed large volumes of client, group, and user data, typically in a list-like format. These screens often felt crowded due to the limited horizontal space available, which made it difficult to present all the information clearly and at once.

I had to carefully consider how to structure the data, whether to stack elements vertically, which would result in thicker rows and fewer rows visible on the screen, or to truncate certain fields like email addresses, ending them with “...” and allowing users to click in for the full information.

Once I landed on a display approach that balanced visibility with readability, I then had to adapt those same screens for tablet views, which introduced an extra layer of complexity.

I found that data often had to be condensed even further to fit portrait and landscape orientations without compromising usability.

eXPERIENCE tAGS

Another challenge I worked through was helping to clarify the lifecycle of an experience within the platform. Creating an experience for a client could take anywhere from a couple of days to several weeks, depending on its complexity.

As the number of experiences grew, it became increasingly difficult for users to distinguish between those that were in progress, completed, published, drafts, or saved as templates.

I was involved in exploring how we could make this distinction clearer through the UI. After considering several options, we decided that a tagging system would be the most efficient way to communicate the status of each experience. I collaborated with the team to map out the different stages and identify which ones needed visual identifiers.

The use of colour within these tags sparked significant discussion among the design studio. We wanted to ensure that colours weren’t just aesthetically pleasing, but also meaningful and accessible. The colours had to be distinct enough to be recognised at a glance, and work well across images. After rounds of feedback, iteration, and accessibility testing, we agreed on the following shown here.

My Learnings

Reflection & NEXT STEPS

This project challenged me to think deeply about how design systems are applied in real-world products, especially when balancing consistency with flexibility across devices and content types.

I strengthened my ability to interpret low-fidelity wireframes and translate them into polished, user-friendly interfaces that aligned with Adeption’s design language.

Working iteratively with the product owner helped me refine my designs through constructive feedback, while tackling complex problems like data-dense layouts, tablet responsiveness, and pop-up consistency pushed me to find practical, scalable solutions.

I learned how to work with and extend an existing Figma component library, how to handle edge cases like content truncation, and the importance of accessibility and visual clarity in status tagging systems. Most importantly, I developed a deeper appreciation for thoughtful UI design that supports users’ needs while maintaining coherence across the platform, no matter how complex the content or context.

Hannah Walton