Project Overview
The Task
Design a support chatbot app for users who wish to order coffee from a cafe in their vicinity.
Project:
CaffeineBot
Role:
UX/UI Design
Duration:
5 Days
Challenges
-
Designing an intuitive and responsive chatbot for users
-
Design cohesive and familiar user interfaces for unfamiliar users
-
Provide a smooth browsing and purchasing drinks for the users
Project Start
I went with a goal-oriented design approach that kept me on track and focused. I felt that qualitative research was most helpful. I conducted a competitor audit, usability tests, crafted the personas based on results, created and tested wireframes and prototypes of the project. I started by identifying some key questions like:
-
"Who are we designing the product for?"
-
"What are the challenges we have to face using a chatbot?"
-
"How can we make the whole process smooth for the user?"
-
"How can we make the app accessible to all users?"
I felt that the usability tests were one of the best ways to understand how real users felt about the product. I gathered the results into an affinity chart and identified what the user pain points were. Knowing where the users faced issues or unsatisfaction while using my app helped set clear goals for me to work on in the next step of the process.
Affinity chart
Our Users
Personas
Competitor Audit
I looked at several companies that have apps with chatbots and the above few are said to have better reviews from users about their chatbots. Although they are indirect competitors, there were good and bad points to learn from them and to apply these points when designing the app for CaffeineBot. Some of their best features include:
​
-
Being able to store past purchases so users can easily order the same item again
​​
-
Straight-forward discovery and purchasing of food
​​
-
Reliable service and having membership options to reward users for using their app to make purchases
​​
-
Taking into account language barriers and implementing common languages for different users
Digital Wireframes
Why I decided to design the layout of the screens this way:
​
-
Using Jakob's Law of familiarity, even though the users would be communicating with a chatbot, I wanted to mimic the look and feel of instant messaging
-
Creating a sense of familiarity so users know what to expect
-
​
-
Displaying options as buttons allows users to easily understand what they needed to do and remove the need to key what they are looking for
Style Guide
Color Scheme
My colour scheme is based on brown as the primary colour as it relates to the colour of coffee. I chose to go with a monochromatic tone and took a brighter orange as well as a darker grey to add some contrast to the whole colour scheme. This orange would then be used to accent buttons or important elements so that they stand out from the dark grey background.
Fonts
For my fonts, I used Pacifico Regular for the title as well as the login button on the main page of the app, to give the brand an identity that it is of high quality. Nunito and Open Sans are used for the text in other parts of the app such as when the text appears while conversing with the chatbot. This is so that it is easy for users to read the text on the screen.
Mockup & Prototype
Takeaways
As a fresh graduate from game design, this was something that I had experience in. However, the difference this time was that the work or process was much more complete ​and focused on UX design. The project has given me a deeper insight into UX design and helped me improved as a UX designer.
​
After submission, I would change the colour scheme to have more variety of colours, especially for the background. I believe there are better colours and to be used for the background.