iMatter Chatbot Mobile Application
UX // UI // MOBILE DESIGN
Event: Umajin Internet of Things Hackfest | Development Time: 13 August 2016 (6 hours) + 1 Week Post Refinement
My Role: UX Designer
My Role: UX Designer
airCafe is a mobile app which focused on making the cafe ordering experience quicker and less stressful. It was created by Stefan Schultz (UI Designer), George Riordan, Irene Calangian (Developers) and I as part of Umajin 'Internet of Things' Hackfest. Our team gained 2nd Place overall in the competition.
_______________________________________________________________________
CONTEXT —
BRIEF
“Use IoT to deliver a smarter, better, more personalised shopping experience for tech savvy consumers using Umajin software. You could consider either the retailer or the consumer – or both!"
“Use IoT to deliver a smarter, better, more personalised shopping experience for tech savvy consumers using Umajin software. You could consider either the retailer or the consumer – or both!"
CHALLENGE
Ordering a drink or snack is a very simple task. Yet there are still easily avoidable mistakes such as customers not hearing their name when their order is ready, a waitress accidentally giving table 6, table 9’s order or the barista mishearing a customer’s order. These mistakes are small accidents, but these accidents leave customers feeling frustrated and unhappy with their experience at the cafe.
SOLUTION
airCafe is a mobile app which allows a customer to order their food/drinks without having to wait in a line. The app is a possible alternative to the current table numbers that are used in cafes and restaurants. The application sends a customer’s order straight and accurate from their phone to the cafe staff. Through the use of Bluetooth beacons, restaurant waiters will be able to know where a customer is ordering from and bring their food to them.
Ordering a drink or snack is a very simple task. Yet there are still easily avoidable mistakes such as customers not hearing their name when their order is ready, a waitress accidentally giving table 6, table 9’s order or the barista mishearing a customer’s order. These mistakes are small accidents, but these accidents leave customers feeling frustrated and unhappy with their experience at the cafe.
SOLUTION
airCafe is a mobile app which allows a customer to order their food/drinks without having to wait in a line. The app is a possible alternative to the current table numbers that are used in cafes and restaurants. The application sends a customer’s order straight and accurate from their phone to the cafe staff. Through the use of Bluetooth beacons, restaurant waiters will be able to know where a customer is ordering from and bring their food to them.
_______________________________________________________________________
DESIGN PROCESS —
User Research
We identified that our primary target audience would be working adults and university students within Wellington. We also needed to take into consideration those who do not have smartphones or are not technologically educated such the elderly. After the hackfest ended, I created user personas to help when refining some elements of the application:
We identified that our primary target audience would be working adults and university students within Wellington. We also needed to take into consideration those who do not have smartphones or are not technologically educated such the elderly. After the hackfest ended, I created user personas to help when refining some elements of the application:
Competitive Analysis
As Wellington is the coffee capital of the country, local cafes and coffee shops often are just as popular as big franchises like Starbucks. Unlike these larger franchises, they do not have applications customers can download to order. After the end of the hackfest, I refined the design of the application with the help of competitive analysis. I used competitive analysis to look at large franchises which have their own purchasing app. This allowed me to see what was good about their applications and what was frustrating.
As Wellington is the coffee capital of the country, local cafes and coffee shops often are just as popular as big franchises like Starbucks. Unlike these larger franchises, they do not have applications customers can download to order. After the end of the hackfest, I refined the design of the application with the help of competitive analysis. I used competitive analysis to look at large franchises which have their own purchasing app. This allowed me to see what was good about their applications and what was frustrating.
Feature Identification
At the start of the hackfest, the team came together to decide which features should be include in our application. We had to take into consideration what was possible to implement by the end of the hackfest day and what we would propose as next steps in the future. The features we decided on were:
At the start of the hackfest, the team came together to decide which features should be include in our application. We had to take into consideration what was possible to implement by the end of the hackfest day and what we would propose as next steps in the future. The features we decided on were:
YOUR FAVOURITE ORDER
We wanted to implement one of those most popular features that Starbucks and Taco Bell offered. Most users want to get their usual order every time they go to their favourite cafe, so implementing “The Usual” feature was one of our key priorities. A customer’s usual order is the first thing a user wants when logging onto the application and will be the first thing the customer sees on the application.
ALLERGEN INFORMATION
ALLERGEN INFORMATION
One of the smaller features few apps had was having small “extra” bits of information within the product description. Although many apps have listed ingredient description before, we thought it would be even better to add a direct warning for any allergen information. This was a feature that not many apps preformed (the closest being gluten free or vegetarian). Having this feature would save a lot of time and frustration for the user and assure that this product would be safe for them to consume.
PROMOTIONAL CARD
As we were required to use one form of hardware provided to us, we wanted to make the most of using Touchcards. As many franchises uses a form of loyalty card or reward from signing up, we found that no other app used this method for their rewards and wanted to take advantage of this. A user would be able to find a promotional card within a magazine or given as a promotion from a previous purchase. The user would be allowed to tap the promotional card at the back of their phone and the discount would automatically apply.
__________
Information Architecture
Creating a site flow while in the planning stage helped us to tighten our scope to something that could be completed within the six given hours.
Creating a site flow while in the planning stage helped us to tighten our scope to something that could be completed within the six given hours.
Sketches & Lo-Fidelity Wireframes
With the help of our UI designer, we crafted together a few sketches to make the basic layout of the app.
With the help of our UI designer, we crafted together a few sketches to make the basic layout of the app.
Hi-Fidelity Wireframes
After finishing the rough layout, I took the sketches and created hi-fidelity wireframes/ layout on the Umajin.
Style Guide
Through our design team discussions, the User Interface Designer and I agreed on Coffee relative colours. We decided on a shade of beige as the main colour and he chose secondary colours that complimented the beige well.
_______________________________________________________________________
CONTEXT —
Product Outcome
This was the final product design over the six-hour period.
Interactive Prototype
Here is a clickable prototype I created on MarvelApp to demonstrate some of the interactions after the hackfest.
Here is a clickable prototype I created on MarvelApp to demonstrate some of the interactions after the hackfest.
_______________________________________________________________________
REFLECTION —
What I learnt
My biggest takeaway from designing airCafe was working on a project with completely new software that not only myself, but my whole team had never worked with before. We had only been introduced to Umajin two days prior and had minimal time to play around with the software (let alone working in a team with it), so creating the application was quite a challenge.
My biggest takeaway from designing airCafe was working on a project with completely new software that not only myself, but my whole team had never worked with before. We had only been introduced to Umajin two days prior and had minimal time to play around with the software (let alone working in a team with it), so creating the application was quite a challenge.
Especially since this hackfest was held for only six-hours, it taught our team how to adjust and learn new software quickly. We asked lots of questions and constantly gave updates to the Umajin team mentors who offered their advice and expertise throughout the six-hours. As asking for help can be one of my biggest weakness, the short time frame really helped me with this problem.
_______________________________________________________________________
Credits
EVENT
Umajin Internet of Things Hackfest
EVENT HOSTS
TEAM
Rosanina Estrella (UX Designer)
Stefan Schultz (UI Designer)
George Riordan (Back-End Developer)
Irene Calangian (Front-End Developer)
Rosanina Estrella (UX Designer)
Stefan Schultz (UI Designer)
George Riordan (Back-End Developer)
Irene Calangian (Front-End Developer)
