top of page
Conversational Marketing that Connects Brands with Engaged Consumers
Eyelevel.AI is a marketing software company that creates automated marketing solutions for online businesses to engage consumers through Facebook Messenger.
Their UX design lead hired me to help develop a solution to current issues users were experiencing with their CMS, Chatbot.AI.
Chatbot.AI
The chatbot development platform for engineers
Software Used
Sketch
Invision
Lo-fi prototyping, hi-fi prototyping,
user journey mapping, developer communication
Interactive prototyping
The Problem
Eyelevel had recently received a great amount of funding from investors, but their CMS platform needed an upgrade. Their current system wasn't supporting a seamless, frustration-free experience for users.
The Situation
2 weeks
The Team: Software Engineer, Lead UX Designer, and Front-End Developer
​
My Role
Visual and UX Designer​
Old Site, New Thinking
Based on a previous survey, users reported that they often experienced difficulty understanding how to select categories for the Agents, or automated chatbots, so they could begin deploying them for use on social platforms.
The current platform needed a visual adjustment that made it easier for developers using Chatbot.ai to categorize content types.
The original categories menu.
Categories were placed here, but did not automatically adjust depending on which ones the users filtered out in the menu.
The platform gave users the option to filter by user action, but this menu was often hard to see. The UX and development team needed a solution.
Research: Looking for Solutions
According to the Baymard Institute, e-commerce site users often experience issues due to unclear content tabs on their homepages. Sites that display navigational menus with all categories listed at once can be a benefit for users looking to discover all content of the site on the homepage.
​
Some companies, the case study suggested, also use one navigational tab that then shows categories once it is clicked, and automatically adjusts content on the screen based on what is selected.
Example A: Newegg's website saw users become confused when its top navigation was not very clear. Users were not aware that Newegg doesn't just sell electronics until they clicked on the 'all products' tab.
Re-thinking the Navigation Bar
We researched how online stores successfully used navigation and explored those possibilities. From here, I was chosen to propose visual design concepts to both the lead designer and development team for further assessment.
Example B: Bass Pro Shops deployed a solution to the navigation bar issue. The “Shop” option is selected as the default scope, and the product categories are therefore part of the permanently visible main navigation.
Lo-Fidelity Prototyping
After the research phase of the CMS redesign process, I began collaborating with the UX design lead to ideate solutions to the current interface.
​
This led to the addition of descriptive tabs at the top of the product category page, adding to screen real estate and allowing users to easily expand the tabs to see what categories they could sort out.
Our Solution: Implement a navigation menu that took up less space and allowed users to select mutliple options without sacrificing ease of usability.
Conclusion: Final Interactive Prototype
After creating the lo-fidelity prototype, it was time to refresh the current design based on our research.
​
You can see the interactive prototype here.
bottom of page