Timeline — About two weeks
Team — Lauren Beronja, Kacy Yang
Role — UX / UI Designer, Researcher, Information Architect
The UN Is looking for a mobile chatbot and resource application. The application would be downloaded by team members who seek assistance around the office’s nine categories of issues. The user will need to have access to the application on iOS and Android, anywhere in the world, with an option to download or access the information offline.
We kicked off our project with a research phase, which mainly consists of two parts- mapping issues to resource materials, provided by clients and online, and feature research through comparative analysis. Through resource material research, we discovered a list of pain points lists as follows:
Mapping out issues to destinations
We found that there is an informational gap between two key resources: The main issues and the respective offices. The resources are located in different files that are filled with content which makes it hard to navigate. The first pain point that we found is that it may be difficult for staff that have questions or issues find the respective office in an efficient way.
Offices information needs to be organized better
We also discovered that the information in the office directory file “Where to go when”, though informational, is not very clearly structured especially for those who have issues and are seeking help. The file requires the users to have a somewhat good understanding of each office’s role and/or what they do. The structure of information is counter intuitive when a user has issues and is looking to identify which office that they should contact.
Through comparative analysis of numerous Chatbot Mobile Applications we came up with a features that we believed would be necessary in our Chatbot prototype.
- A majority of the mobile applications on the market offer their service through both iOS and android platforms.
- About 60% of the mobile apps that are in the similar genre have learning related modules. We found that learning modules can increase information digestion which leads to a more efficient problem solving process.
- We discovered that the average age of staff in the organization ranges from 42–49. Through unofficial user interviews, we found that a significant amount of users in that demographic would prefer a traditional catalog or directory style search system, as opposed to a chatbot.
- Chatbots are helpful but not perfect. Offering a live chat feature is necessary especially for urgent situations.
Localization and accessibility
Having staff members working in many countries around the world means that the Application must include options to enable the user to change the language.
Furthermore, we understand that the company hires many staff members that may have a need for accessibility features, particularly around vision and hearing impairments.
Chatbot and Directory — the two way approach
Being able to search a directory is an important feature that provides clear and structured information for users. After research, we decided to design our application with a two way approach- an app that has chatbot as a main directory and guide, and a traditional directory as a secondary support feature. Our design goal is to get users to find information efficiently through multiple means.
We organized given information into three main categories: Issues, Organizations, and Processes:
Issues will lead the flow with issue identification, followed by detailed information and resources with respective offices’ contact information.
The organizational directory functions in a traditional way- it starts with office description which leads users to additional resources in the respective field, issues, and contact information.
In the process page, information of the informal process and the formal process are offered. We also decided to include a key timeline portal for quick and direct access.
Usability testing was important to us throughout our design process. We were able to receive feedback during the usability tests for both our Mobile Application Prototype as well as the Chatbot which aided us in making the needed iterations of both.
For the Mobile Application we conducted six usability tests.
- Fixing interaction bugs (e.g broken scrolling function)
- Changing our menu categories from “Resources” to “Issue Identification” to avoid confusion
- Include a “Guest log-in” feature to provide ease of mine for those who prefer to feel completely anonymous.
For the Chatbot we conducted four usability tests.
- AI chat function improvement with natural speech processing
- More keywords to help further identify user’s issues
- Smooth out the conversation logic and loops to make it mimic natural conversation.
Chatfuel is a chatbot building platform designed for messenger. In our case, we used Chatfuel to build our AI enabled chatbot “Toby” for demonstration purposes. We started with mapping out the chat flow logic with a chatbot user flow diagram, then moved on to building out key chat scripts before we started building in Chatfuel.
Our chatbot’s feature includes:
- AI natural conversation and basic speech/keyword identification.
- Issues directory
- Office directory
- Process directory
- Live chat support for urgent conditions
- Expandable learning modules
- Other chatbot basic functions
Chatbot Prototype Demo link: https://www.messenger.com/t/102807467817597
We started implementing our findings by figuring out what the user flow or site map of the mobile application might include.
Chatbot App built with Axure and Figma
We used both Figma and Axure to build out our chatbot app prototype. Figma was used in order to quickly create low-fidelity wireframes collaboratively. We then switched over to Axure to build the high-fidelity prototype and include interactive features in both iOS and Android. Some other design tools are used along the process, such as Adobe Photoshop and Illustrator for graphics and icons.
After research and feature prioritization, our chatbot mobile application has some key features as follows:
The Onboarding is anonymous and customizable so that the user knows their information will not be shared and their issues will be solved in a quicker manner. We also included the live support instructions so that the user will know they can chat in real time in case of an emergency.
Live Support Option for Emergencies
Live Support option for immediate service and a Chatbot — as the spotlight feature — to provide customized guidance for those who are seeking help
Dual Directory System
The user is able to access information through two directories. The first directory is organized by certain issues the user may be having while the second directory is organized by office.
Localization and Accessibility options for inclusive design
In order to help the Client with future design and build out of the Mobile Application Prototype we created a roadmap and categorized it in four phases. Although we didn’t get much information about the team of developers and designers that would be working on the Application, were were able to come up with a general idea of what each phase would look like — not including a timeline.
We categorized our high-level roadmap in four phases:
The prototype phase, the MVP development phase, the Alpha phase and the Beta phase.