UX /UI Design
PROJECT GOAL
The task is find something you want to teach users which have several steps and design an interactive process to present the ideas. The design must meet the following requirement:
1. The user interface must provide instructions in discrete steps
2. The UI must let users track their progress (i.e., completed steps) and see which step they’re on
3. The UI must try to provoke an emotional response upon completion of steps, with special emphasis on the final step.
4. The UI must be able to support multiple lessons (i.e., sets/groups of steps)
BAILEY
This is an app that leads users to understand the process of training the dog. My intention for the project was giving some hints and encouraging interactive flow for users to gradually learn the steps and tips on how to train their dog.
FLOW-FIRST VERSION
This is the first version I made to present the concept. I made up the sitting training at the first and use the interactive interface to indicate the corrected training steps.
FEATURES
Voice interaction
I wanted to apply the voice function instead of just touching the screen, so user can call the dog out to complete the first step.
Interactive bar
In this main interface, I wanted to have the bar that can represent the progressing, let users gradually figure out the position they should go. Once they reach the height and fulfill the bar, the dog will sit down.
Showing draggable treat
The second step was showing the treat to imply that user can drag the treat to interact with the dog.
Give order
This is a important step which confuses user a lot. We give the order after the dog on the right position in training process. I wanted to use the interactive flow to teach user the right steps.
Failture
I designed a scenario to emphasize the treat should be place around nose to have the dog smell, otherwise it would be eaten.
Feed
Finally, award the dog by feeding it the treat and complete the training. The dog would give user a feedback when having the treat.
PROTOTYPING & TESTING
I made the working prototype and had over 15 people test it. As the result, I gathered many valuable feedback and start to work on some adjustments. Repeating the process, I eventually have the final version.
Sound feedback
After the testing, I got the advice that user need some feedbacks when they done voice calling so that they can know they've completed the step. Therefore, I add the animation feedback to inform user.
Directions
Another feedback from user is when they drag the treat to the nose, they don't know the exact location. So I made a new feature- if they failed the first time, there would be a red indication on the nose showing up to guide them to the right location.
Stronger connection
Testing results tell me the connection between the moving hand and increasing bar was not strong enough and users want some upgrading feedback during the journey to make sure they are doing it right. In oder to fit the requirement, I put a dog sitting silhouette at the end of the bar and the different texts as the feedback during the action.
Explanation
In the typical training process, after the dog sit down, user give the order “sit” make it memorize, but people get confuse of the sequence so I think I need more explanation here to help.