Countless companies rely on a content management system (CMS) to simplify making updates to their site. A good CMS gives content admins a rich featureset and a clear content strategy that helps them make sure their site’s content is consistent, up-to-date, and technically sound. But even the best CMS can be undermined if content admins can’t find their way around.
Neglecting the user experience for content admins results in powerful capabilities being hidden in obscurity and routine content updates being painfully drawn-out. If you’ve worked on a CMS implementation, you know how common this can be.
Admin user experience is one of the reasons that we love Sanity: their admin interface, Sanity Studio, offers a big out-of-the-box improvement in usability over other CMS solutions. On the other hand, another core Sanity strength — its high level of customizability and extensibility — also makes it easy to unintentionally build confusing content admin workflows. Even as Sanity experts, our website is no exception.
The page you are reading now was published on Nearform_Commerce’s instance of Sanity Studio. Unlike much of our client work, the initial buildout did not have our typical product & design contributions. Our content creators mastered Studio quickly, but felt the absence of those other disciplines during the course of their day-to-day work. Recently, when the right team became available, we directed our product & design expertise at our own CMS to see how we could improve our creators’ experience. This lightweight team had a miniaturized “product trio” structure: one PM, one designer, and one engineer, all working part-time on this effort over a period of a 4 weeks.
By the end of our short engagement, we had implemented four enhancements:
- a brand-aligned visual theme,
- exposure of critical information on list views,
- visual aids for layout configurations,
- and better tools for browsing our largest content type.
Read on to learn more about how our team worked together and what we improved!
Ideation and Validation
Our product manager started off by leading simple user interviews with our coworkers who were in the CMS most often. These interviews highlighted what they found most confusing at first, what tasks they still had trouble completing, and what they wished they were able to do.
This generated an initial list of unmet needs, with some broad strokes of priority. The team collaborated to research potential solutions for those needs and to validate whether or not each solution would fit within our limited scope.
While we came up with exciting potential solutions for important requests like showing an SEO analysis of a page or exposing site analytics alongside Sanity documents, we quickly realized these were out of reach. We also bumped up against the frictions inherent in improving an existing system as opposed to building in a great experience from the start. We assembled our more realistic solutions, prioritized those with our content admins to identify which would be most impactful, and moved forward to implementation.
Theming Sanity Studio
Sanity’s Themer tool made the first item on our list, a fresh visual theme for our Studio instance, extremely simple to put in place.
Our designer used Themer to figure out a quick proof-of-concept based on Nearform’s brand colors. He then built out a Figma template to make sure all the color assignments were perfect. (We’re excited to reuse that Figma template in our future Sanity implementations.) Once the theme was defined, our engineer took the export from Themer, made the updates defined in Figma, and implemented it in less than a day. It looks fantastic, and it supports both light and dark modes.
Making Document Lists More Helpful
One of the recurring pain points that we discovered was that our document lists often didn’t show enough information.
Many of our content types have a “Production Ready” flag which our CMS admins can flip to make a page visible or invisible while still keeping the page published in Sanity. This provides more fine-grained control, but previously it meant that an admin could not easily tell which documents in a list were live. Additionally, some of our document lists only showed titles, making long lists difficult to scan.
Thankfully, Sanity has made it very easy to add more information to a document list. We added logic so that lists would show a pause emoji (⏸) when the “Production Ready” flag was turned off, signifying that the entry was not live on the site. At the same time we added URL paths to all relevant document lists, as well as logic to show thumbnails based on document metadata. These changes made our document lists — especially Blogs — much faster for our content admins to scan and navigate, as you can see below.
We used Sanity’s list preview customization options to fine tune the fields and media we want to display for a given document type. You can see in the code snippet below that we’re loading in all the data that we want to use in the list with select and then formatting that data with prepare:
preview: { select: { path: "slug.current", title: "title", twitterImg: "twitterImage.secure_url", ogImg: "openGraphImage.secure_url", isProductionReady: "isProductionReady", date: "date", }, prepare({ path, title, twitterImg, ogImg, isProductionReady, date }) { return { title: `${isProductionReady ? "" : "⏸️"} ${title}`, subtitle: `/blog/${getBlogDateYear(date)}/${path}`, media: twitterImg || ogImg ? ( <img loading="lazy" src={twitterImg || ogImg} alt="" className="!object-cover" /> ) : undefined, } }, },
Visualizing Layout Options
Many of our block types have options that content admins can use to customize layout, but the effects of those options were hard to infer without going back and forth to the Preview pane. The end result is that our users weren’t using these variations very often. We identified four layout fields that were especially unclear and produced diagrams for each of the possible options. We then incorporated these diagrams into a custom selector field. This shows content admins a basic visualization of how each option will change the block’s layout. We can’t wait to get feedback from our users and potentially expand this to other layout fields.
Blog Post Filters
For our final update, we gave some love to the blog post document list. We’ve built up a very healthy blog archive over the years. However, as the archive grew, the single list of all blog posts that we started out with became insufficient. If a content admin wanted to find posts with a certain author or category, they either had to use Sanity’s search function or browse the frontend. Both methods were tedious and were called out as a pain point.
To make this process easier, we added filters by category and by author. These filtered lists also have the improvements described above to show thumbnails, URL paths, and public visibility status.
Summed Up
Collectively, these updates and their simplicity show that improving the experience for the admin users of an existing Sanity CMS instance is neither hard nor impossible. Doing so will make routine updates less painful and make powerful capabilities more accessible. If you think your site’s CMS could benefit from improvements like these, our team would be happy to talk through them with you.
Thanks to involving all of Nearform’s core disciplines — product, design, and engineering — we were able to identify, design, and implement material improvements within a very narrow scope and timeframe. If we find ourselves with more time in the future, we’ll pursue some of the more significant updates that we identified like integrations for SEO or analytics. When product, design, and engineering work together, everyone wins.
Interested in enhancing your CMS? Connect with our team.
