Cake Admin Portal
Winter 2017 - Spring 2018
About Cake
Launched in the Spring of 2018, Cake is a free service where customers have conversations about anything that fascinates them. They curate their feed by following topics, not users, and can start their own conversations or participate in others around those topics.
Project goals
Cake has a zero-tolerance policy when it comes to offensive or abusive content, and being a small team, we needed robust tools to help make swift, real-time decisions about content on the platform. We would need to use these tools at any time of day and on any device. Eventually, these tools would have to be used by a team of dedicated content moderators, so the tools would need to scale as the product did.
My role
As lead designer on this project I was responsible for creating new interactions and flows for all admin operations. Some visual design was involved, but I mostly leveraged components and styles already established in Cake’s design system. New components that were created for this project were incorporated into Cake’s core UI library.
Accessing the Admin Portal
We wanted Cake admins to be able to access the portal from anywhere in the product. The Cake header is persistent across the app, so this felt like a good place for the admin badge to live. Only Cake admins can see this badge.
Leaving the Admin Portal
Initially, we explored a more obvious exit button, but eventually felt the simplest solution was to leverage the logo to get back to Cake.
General layout and flow
There were two primary page layouts I needed to create. The first is called the List Page (below on the left), and it’s the landing page for each section. Tapping on an individual item from a List Page takes you to its corresponding Item Detail Page (right).
The List Page
As the landing pages for each section (with the exception of Stats), the goal of the List Page is to show many items at once, allowing admins to sort or search those items, and perform bulk actions on them when applicable. Here’s a full mockup of one of these pages:
List Page variations
While each section’s list followed this general footprint, each had unique characteristics. Here are some examples of how lists appear in other areas:
The Item Detail Page
From any of the List Pages, an admin can navigate to a specific Item Detail Page. The goal of these pages is to show more detailed information about a single item, and allow admins to take actions on it, if needed. Here’s a full mockup of one of these pages:
Item Detail Page variations
Each area of the admin portal had its own unique requirements for information and actions. Here are some examples of how content and actions are displayed in other areas:
Adapting for small screens
For small screens, we originally had the actions underneath the page content, but this was problematic since they were often pushed way off screen. To solve this problem, we placed the actions within a menu accessed from the top of the screen:
Editing an item’s details
We chose an inline edit/save interaction instead of a page-wide one. By making editing more granular, it increases the likelihood that two admins looking at the same item, at the same time, will see the same information.
Categorizing topics
Most topics on Cake live in broader categories. For example, the topics photo sharing and Adobe Photoshop would live in the broader category called Photography. Admins needed a way to put topics into the right categories. Here’s how it’s done:
Deleting items
While rarely done, sometimes deleting a topic or category is required to keep the platform organized and tidy. This action is permanent and cannot be undone, which is why we needed a confirmation step that fully captured the admin’s deliberate intention to do so. Here’s an example of the confirmation modal we came up with to ensure these actions are never accidentally executed:
Custom UI components
While most of the components and styles used in this project already existed in Cake’s UI library, there were quite a few things that needed to designed from scratch. Here’s a selection of some of the new components I designed and incorporated into Cake’s visual language.
