2X Efficiency Boost
With New Menu Manager
Summary
I enhanced the user experience of Einstein Industries' proprietary CMS by redesigning page and menu creation and management interfaces. This not only boosted efficiency in setup and maintenance but also ensured greater adaptability to evolving SEO requirements.
Role & Responsibilities
- User Experience Design
- User Interface Design
- User Research
Assets Delievered
- Interface Designs and Assets
- Prototypes
- Style Guide
- Interaction Documentation
- Formatting Documentation
Metrics of Success
2X Greater Efficiency
Increase the usage of the marketing assets from never being used, to being a part of the majority of sales presentations.
Increased Capability
Increase conversion rates for Email marketing campaigns that utilize the new assets.
Enhanced Future Resilience
Improve perceived brand quality and content accuracy ratings of the new assets among the sales team and clients.
Solutions
The menu manager interface streamlines menu organization with an intuitive interface for creating, editing, and managing menu items. Robust tools for finding, filtering, and sorting items ensure efficient menu and page creation - crucial for a company handling hundreds of client websites and menus.
Creating & Editing Menu Items
Research revealed the need for a faster way to create and modify menu items at a large scale. Users create menu items in the right panel using a simple select menu. The left panel keeps the menu structure in view throughout the item editing process, ensuring attributes can be modified quickly without losing your previous context.
Prototype demo of editing menu items in bulk and individually
Prototype demo of the multiple ways to edit items and how to add new items
I can't believe how we used to build navigation menus. Its SO much better and faster to do everything with the new menu manager.
Multilevel Menu Organizing
A user-friendly drag-and-drop interface allows precise item placement and nesting within groups, ensuring a highly customizable menu structure.
Prototype demo of drag-and-drop within left panel to re-organize items
We can finally quickly build menus without having to dive through a bunch of different screens. A huge timesaver.
Finding & Analyzing Menu Items
Efficient content discovery, organization, and analysis were top priorities. Users can access robust search and find functions to locate items, employ powerful filtering options for quick organization by attributes, and ensure seamless menu structuring through flexible sorting capabilities.
Prototype demo of finding items in navigation
Prototype demo of searching items available to add to navigation
Prototype demo of filtering items available to add to navigation
Research
The research process encompassed user interviews and usability testing, and a thorough competitive analysis of menu management tools. These methods ensured that the interface met specific feature requirements and improved efficiency. Additionally, utilizing existing standards found through competitive analysis, the intuitive interface required little training to begin using it.
User Interviews & Usability Testing
I observed and recorded writers completing the tasks they needed to use the current menu manager and took notes. I then interviewed the writers for additional feedback on the system and to answer any additional questions I had about their process and distilled this information into three key insights:
Friction Between SEO vs. User-Friendly Navigation
The URL path determined menu navigation, with pages appearing in the menu at their respective levels. However, SEO preferences for shorter URLs sometimes clashed with the need to limit top-level navigation items. Conversely, writers created categories solely for user navigation, resulting in unnecessary pages for SEO purposes.
The problem: URL paths set for SEO purposes dictated the navigation structure of the site — prohibiting navigation that would be more ideal for users.
The solution: Separate the URL paths from the navigation structure so both can be set up according to their unique requirements
Lack of Efficiency, Scalability, and Context
Creating menu items and building a site hierarchy was a painful process. It often required precise clicking, constant scrolling, and waiting for screens to load. If you made a mistake or something changed and needed to move multiple pages to a new parent, you had to pass through several screens for each page to correct the problem. Frequent screen changes, without the menu structure remaining visible, also slowed their workflow while managing multiple sites and numerous pages daily.
A demonstration of how moving multiple items to a new parent in the existing system was a tedious and time-consuming process
Goals Created From Insights
Make It Work
For SEO & Users
- Separate menu hierarchy from the URL structure
- Allow multiple instances of the same menu item
- Allow categories for navigation without requiring pages
- Allow icons to be added for certain menu items
Make It
Efficient & Scalable
- Minimal screens/steps for common tasks
- Allow bulk editing of items
- Make it easy to find, filter and sort the pages by any of their attributes
- Make the most important attributes easy to spot at a glance
- Use common interactions where possible to reduce learning curve
- Simplify and standardize attribute labels
- Make it match the rest of the existing interface
Provide
Consistent Context
- Visualize the hierarchy so it can be understand at a glance
- Keep menu hierarchy in view at all times
- Match the interface appearance with the rest of the CMS for a seamless experience
- Make it easier to see the end result of a URL change
Competitive Analysis
I explored several of the most used CMSs to understand how they could be adapted to meet the goals of the Menu Manager project.
The three most popular CMS systems at time of research
Exploring Existing CMS Solutions
I assessed which existing CMS menu managers met the project's requirements and noted any clear improvements on the current system. I simulated using these systems along with combinations of features from these systems for our processes and documented the steps using the systems themselves and via design mockups.
Wordpress Menu Editor
Challenges in Existing Systems
Through these explorations of existing CMSs like WordPress, I found that they did not fully meet the project's requirements. They lacked a focus on speed, particularly when managing multiple sites. Editing most page attributes and creating pages still required multiple page refreshes where context would be lost. Issues with handling repeat items and having groups without pages were also observed.
Competitive Analysis Reboot
Initial attempts to draw inspiration from existing menu management systems proved unfruitful. Consequently, I expanded my search, shifting my focus from entire analogous systems to the specific tasks that the Menu Manager aimed to enhance, such as sorting and organizing lists of items. This adjustment led to more productive and efficient competitive analysis, with valuable insights gained from file explorers, email applications, and design software.
.gif)
Exploring Gmail's selecting and bulk editing features
Inspiration From Gmail
Gmail stood out as capable of achieving several functionalities aligned with our project goals. Constant context is provided while viewing items with the two-pane system. Additionally Gmail accounts for search, bulk editing, sorting, and swift editing of individual items with specific attributes.
Inspiration From Photoshop
Gmail stood out as capable of achieving several functionalities aligned with our project goals. This included features such as filters, sorting, and swift editing of individual items with specific attributes.
.gif)
Exploring Adobe Photoshop's drag-and-drop sorting features
Benefits of Incorporating Common Interactions
Creating a familiar interface offers the added benefit of easy adoption for the team. Moreover, it contributes to stability and efficiency during deployment for design and development teams. By drawing from Gmail time-tested references, we can address complex interactions like bulk editing without having to design every use case from the ground up.
Ideate
With a strong research foundation, I began integrating and customizing features to align with our specific use case. This endeavor required a careful balancing act to ensure that the interface not only met our project goals but also seamlessly harmonized with the existing design, including considerations for its compact size constraints.
The Right Information at the Right Time
Partnered with writers and editors to pinpoint key variables for a streamlined interface. Together, we identified crucial information to be prominently featured on each item, while relegating less vital details to secondary screens. This approach aligns with the principle of progressive disclosure, delivering the right information at the right moment for an optimal user experience.
Explorative Iteration
Chosen Iteration
Getting Buy-in With Demos & Prototypes
Video demos and prototypes were created to showcase the most vital actions within the interface. These were used to ensure clarity and a common understanding among writers and other stakeholders who may be less technically inclined and the development teams
Various prototype demo videos were created to show all the features prior to coding
Implement
We prioritized features for rapid deployment, organized feature implementation, and ensured comprehensive prototype videos and detailed documentation. Reference to competitive analysis enriched the process, contributing to seamless project execution.
Planning Deployment
Writers and other stakeholders took a central role in helping ranking features based on their importance for the initial launch. Non-essential features were pinpointed, and then, in collaboration with engineers, an implementation sequence was defined. An ease-benefit matrix guided the process of deciding which features to defer or set aside, streamlining our approach.
Ease Benefit Matrix was used to prioritize features
Documentation for Developers
The documentation provided to developers included the prototype videos showcasing all potential actions within the interface. Written explanations of features were also included to facilitate understanding. Reference to analogous apps from competitive analysis research was utilized to provide context when use cases not covered in the documentation or demos emerged.
