Coates CMS UI Design

Our industry-leading digital hardware, dynamic and data-driven CMS, and end-to-end services create best-in-class restaurant experiences to drive impactful ROI for global brands. Our in-restaurant digital menu boards and other technologies feature in-house designed hardware and cutting-edge software to create engaging touchpoints for your customers.

2023 | UI/UX Design, User Research, Visual Design

Figma, Miro, Jira, Adobe CC


 

My Role

Produce high-quality solutions through flow diagrams, graphic designs, storyboards, and site maps. Collaborate with product managers and engineering leads to drive solutions, employ design best practices across all deliverables, and adhere to accessibility standards. Understand the design research process, collaborate and support the Product Owner, to formalize design research into insights and ideas. Collaborate with the Product Owner to drive the frameworks for success each project is measured by, and optimized to get the best results for our products 

Create a Data-Driven Digital Journey

Switchboard™, our dynamic and innovative content management system (CMS) offers sophisticated integration capabilities and creates a seamless, connected ecosystem for your brand. Enjoy a single solution that enables dynamic, data-driven menu content across all hardware touchpoints and ensures an engaging ordering experience for customers.

Old CMS Platform (Switchboard)

 

Updated Version of CMS UI

A backward-compatible CMS ensures that newer versions of the CMS software or updates remain compatible with the Switchboard content, templates, plugins, and integrations.

Coates Design Language

The Coates ​Design ​System was used to create consistent, scalable, and accessible interfaces. Leveraged pre-built components, applied appropriate variants, and extended design patterns where necessary to meet product-specific needs while maintaining visual and functional coherence across the platform.

User Testing

As part of my design process, I conduct user testing to validate key design decisions. I prepare task-based scenarios to observe how users interact with prototypes — identifying pain points, unexpected behavior, and areas needing refinement. Whether through moderated sessions or remote testing tools like Maze or Useberry, I use these insights to improve usability and streamline the user journey.

User Reviews

In addition to behavior-based testing, I collect user feedback through direct reviews and surveys. This gives me a clear sense of how users feel about the experience — including clarity, satisfaction, and overall confidence in the product. These reviews often uncover valuable emotional or functional insights that aren’t always visible through observation alone.

Outcome

By combining both user testing and reviews, I ensure the design is intuitive, accessible, and aligned with real user expectations — not just design assumptions.

R&D Sessions and documentations in MIRO — UI Design Exploration

As part of my UI design process, I conduct regular R&D sessions in MIRO to explore emerging design trends, interaction patterns, and new tools. These sessions allow me to experiment with layouts, micro-interactions, helping me to create modern, user-friendly, and scalable designs. The insights gained often lead to innovative solutions that enhance both user experience and business goals.

User Testing & Reviews

After completing the initial prototype for the Coates CMS UI, I conducted targeted user testing sessions with a small group of internal stakeholders and potential CMS users. Each participant was asked to complete common tasks such as:

  • Creating a new location entry

  • Editing store hours and contact information

  • Navigating the side menu to access different modules

  • Using the search/filter functionality

Key Findings

  • Some users found the top navigation on old CMS structure slightly overwhelming due to too many nested menus.

  • There is no way to let the users know if the action took place or not. A few users were uncertain if changes were being saved properly.

  • Users appreciated the clean, consistent visual hierarchy but requested better icon labels for faster scanning.

Improvements Based on Feedback

  • Simplified the side navigation by introducing accordion-style sections to minimize cognitive load.

  • Added stronger visual cues for save actions (e.g. confirmation banners, disabled states).

  • Introduced tooltip labels and adjusted iconography for clarity and accessibility.

User Reviews Summary

Post-iteration, a follow-up review showed that:

  • 90% of users felt the CMS was easier to navigate.

  • Several reviewers noted the updated flow "reduced clicks" and improved "confidence while managing data."

  • The feedback directly helped refine the design for production handoff.

New CMS Features

Asset Upload

 

Publication

 

Location Profile

Research on additional Features

Dashboard Customization

  • Personalized Dashboard: Allow users to customize their dashboard widgets to prioritize frequently used tools.

  • Drag-and-Drop Layouts: Enable users to rearrange elements for convenience.

  • Themed Interfaces: Provide light and dark modes and user-selectable color schemes.

Seamless Navigation

  • Quick Search and Navigation Bar: Instant access to settings, pages, or content using a universal search tool.

  • Breadcrumb Trails: Improve navigation within complex content hierarchies.

  • Collapsible Menus: Streamline the interface by hiding rarely used tools.

 
 

My team mate and myself worked on the features showed in the video below using Figma. I created this animated video using After effects.