UI/UX: A small, explorative re-design

[steveninety]

I decided to make an explorative UI/UX re-design of the admin panel. By explorative I mean that I have not let feasibility considerations constrain my creativity.

Goal

My goal was to stay on-brand while

• Improving existing features;
• Preparing for upcoming features (such as multi-locale editing);
• Anticipating larger documents as Payload’s user base continues to grow (making larger CMS use cases more common).

Observed Opportunities for Improvement

The re-design is mainly based on the following two observations:

(1) Under-utilization of space.
Modern web apps tend to utilize the edges of the screen for good reasons. With the header, navigation menu and the new toolbar fully utilizing space that is otherwise empty anyways, users would have their tools within reach at all times, without being distracted from the main content.

(2) Opportunity for better proximity of fields within the document view.
Improving proximity makes it easier to differentiate (grouped) fields. The highly explorative Document Structure panel would also make it easier to navigate the document, especially as the document becomes larger and its fields deeper nested.

Implementation

I can imagine how there’s a challenging balancing act that the Payload team has to perform regarding UI updates: adopting new designs in the product versus enabling UI customization by developers. The only way for developers to have a chance of building highly custom design features, would be more extensive UI customizability baked into the product.

While the @payloadcms/ui and @payloadcms/next packages do offer the possibility for UI customizability to some degree, developers are still locked in to much of the existing architecture. The product is simply not designed to for the type of customization required to build most things that I’m proposing. For example: not all components are exported; limitations around client-server boundaries; fixed order of context providers and DOM elements (especially wrappers); either a limited set of component overrides, or full view overrides - but not much in-between.

I believe there's plenty of opportunity for Payload to match its UX to the DX it's famous for - whether directly through UI/UX updates, or indirectly through extended UI customizability by the developer.