Eyelevel_Header-01.png
Newton_mockup.png

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.

chatbotlogo.png

Chatbot.AI

The chatbot development platform for engineers

Software Used

sketch-symbol-transparent_2x.png
invision_logo_300x.png

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_chatbot_site.png

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.

newegg_site_example.png

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.

bassproshop_site_example.png

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.

lofi_chatbot_ai_300x.png
lofi_chatbot_ai copy_300x.png

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.

new_tab_mockup.png

Like what you see?

click here to see more stuff I've done.

You can also contact me if you're hiring.