Articulate
Build more than mere chatbots.
Build intelligent agents with Articulate.
My Contributions
Concept Ideation
Prototyping
Competitive Research
User Research
Brand Research
Visual Design Mockup
Design Specifications
Wireframing
End-to-end Flows
My Role
Sole UX
UI Designer
Tools Used
Sketch App
Adobe Illustrator
invision app
Figma
Ton of Coffee
The Team
1 UX/UI Designer
3 Developers
1 Project Manager
Duration
4 Week Sprint
3 Weeks UX
1 Week UI
Articulate is a platform for building conversational, customizable interfaces with intelligent agents. It has the ability to create deep and complex dialogue while providing streamlined interaction.
Challenge Task:
To redesign the interface so the user can effortlessly customize ChatBot dialogue for their enterprise.
How can I provide Users with a ChatBot dialogue that is both seamless and easy to implement?
My Role
As the sole UX/UI designer, I redesigned the web app’s interface and strategized its experience from July 2017 to July 2019.
I led efforts to evolve the platform and eliminate customer Pain Points from the “sayings” page (e.g., enabled main page users to add dialogue to the ChatBot, added a walkthrough to help Users with the onboarding process of creating their first dialogue with a ChatBot).
In this project, I implemented the Agile approach because new features would be incrementally added over time, effectively breaking down usability assumptions.
Research Stage
1. Research & User Interviews
To start the project, I brainstormed with the PM to identify the MVP. The PM concluded the MVP to be for developers to beta test immediately and then have the platform be commercially friendly to average users. Articulate was the only platform at the time with the ability to hold conversational context while its competitors could only hold one straightforward dialog conversation.
I analyzed Articulate’s competitors (Dialogflow.ai) and observed our internal company to find viable users, which were in Sales department, Samtec, and its daily operations to better understand commonly encountered issues. I also conducted interviews on how sales users created and used ChatBots. After researching and interviewing, I validated user needs and user Pain Points.
2. Main Pain Points
-
Users had difficulty understanding how to continue the conversation after the initial greeting. Example: “Hi, I would like to buy a pizza” ... [Pain point here] - how do I reply to this request?
​
-
In the ChatBot, there is a list known as “sayings”. This list must be in sequential order, or users could not add new sayings in between existing ones.
​
-
When initiating a dialogue with the ChatBot, Articulate’s “categories” (e.g., ordering, small talk, weather) or topics were not grouped together, which was visually misleading for the user. Since Users can add as many sayings as desired, the sayings could become disorganized over time.
Define
Personas & Target Users
I needed to redesign the wireframe and solve pain points from the previous UI, so I successfully researched, sketched, and designed a low to mid fidelity mockup within one week. I used the Agile Development Process to build, test, and release while creating other add-on features.
Targeted Users
Ages: 24 - 45
Within the U.S. and Home
Working in industries that use ChatBot systems
User Needs
Seamless and quick input dialog
Turtorial guidance without being intrusive
Easy ways to find and edit conversations
Ideate
Wireframes & Flows
To brainstorm ideas, I reviewed the previous design to determine why it caused User complaints. Users were having trouble learning the terminology associated with Articulate’s features; thus, I simplified and organized the dialog that directly impacted Users while they navigated Articulate’s main page.
With my team, I reviewed the proposed wireframes in the brainstorming phase, produced usability testing to validate my ideas, and conducted more depth planning to fix existing issues. 


I brainstormed solutions and tested them with my users. Then, depending on the feedback, I continued to enhance the design.
Action Page
Reply to a User question
One of the core issues of Articulate needed to make the reply to a customer response be prominent and obvious.
Solution: I created a walkthrough that shows users that the action tags applies a response to a question and chains conversation with that tag into one long conversation. Through User interviews, they understood that's how to respond back.
Sayings Page
Grouped conversations & bot reply
Originally, Users added sayings by order of input. For example, “I want pizza” as the first saying, “Hi, how’s it going?” as second saying, and “Get me a slice of deep dish” as the third saying; the first and third. Sayings are related, sharing the same category. This was designed so Users could add as many sayings as they wanted as quickly as possible.
The Problem: This function caused confusion because sayings within the same category were instead separated by order of inputs.
Solution: I added dashed lines around each category of sayings (e.g., Order, Small Talk). This help group related sayings together, instead of being grouped by order of input. I also added left indents to show levels of conversation.
Sayings Page
Add sayings freely/in any order
As stated above, Users could only add User sayings in order of input.
The problem: Users could not add a new sayings anywhere in the list. Without this ability, Users would have to think of all of the customer's sayings first, and then add an input, just so the list looked organized. Users felt uncertain about when and where to add new sayings.
Solution: I created an "+Add more" button under each category of sayings. This new button enabled Users to add sayings to the page at their leisure and not worry about disorganizing the order.
Training Btn
Training Status
The train button ”updates” the Agent if new inputs or changes were made to the Agent.
Problem: Users did not know when an agent was last trained.
Solution: I added a status indicator (green-updated; red-error; gray - outdated) and a date that shows when the Agent was last updated. These additions eliminated unnecessary clicks.
Agent create page
Form with function
Problem: The form did not highlight the most important inputs and did not clarify their hierarchy of importance. Additionally, Users did not know the function of each input.
Solution: I simplified the form so the left column listed the inputs in descending order of importance, while the right column contained helpful tips. These enhancements allowed Users to fill out the form more easily.
Final Thoughts
In the end, our Users were pleased with the new design and improved features, which i provided within two weeks. Another two weeks to refine some of the user flows to further the onboarding process to be simpler. My PM was impressed with the end result and was happy to see how I resolved all of the Users Pain Points.