Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2...
Transcript of Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2...
![Page 1: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/1.jpg)
Mingo!Medium-Fi Prototype
![Page 2: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/2.jpg)
Presentation Outline✖ About Mingo
✖ Tasks
✖ Revised Interface Design
✖ Prototype Overview
![Page 3: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/3.jpg)
Mingo!make every mood a travelling mood
![Page 4: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/4.jpg)
Team Mingo
Ben W. Kevin H. Minymoh A.
Our mission: Mingo aims to prevent ‘travel burnout’ by
taking a traveller’s current mood into account when planning an activity. Mingo keeps travel
fresh and spontaneous, allowing users to experience popular sights in new ways while
also suggesting lesser known sights and experiences that help mix up the pace and
tone of a trip.
![Page 5: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/5.jpg)
TasksWe kept the same tasks with no changes from our Low-Fi
Prototype
![Page 6: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/6.jpg)
Task 1 (Simple)Do Something Based on Current
Mood
![Page 7: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/7.jpg)
Task 2 (MEDIUM)Set a Reminder to Explore During
Free Time
![Page 8: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/8.jpg)
Task 3 (Complex)Travel Spontaneously Without
Missing Out on Major Attractions
![Page 9: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/9.jpg)
Revised Interface DesignChanges
![Page 10: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/10.jpg)
Change 1
Before After
![Page 11: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/11.jpg)
Change 1 (Description)✖ Removed
ambiguous left and right arrows
✖ Removed feedback screen
✖ Users swipe left for a new suggestion
✖ Users swipe right to perform the activity
![Page 12: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/12.jpg)
Change 2
Before After
![Page 13: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/13.jpg)
Change 2 (Continued)
Before After
![Page 14: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/14.jpg)
Change 2 (Description)✖ Removed separate
confirmation screens
✖ Use of modals on screens instead (popup or alert box with blurred background)
![Page 15: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/15.jpg)
Change 3
Before After
![Page 16: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/16.jpg)
Change 3 (Continued)
Before After
![Page 17: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/17.jpg)
Change 3 (Description)✖ Added search box
to both mood and location screens
✖ This changes the flow of selecting a mood slightly (results list)
![Page 18: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/18.jpg)
Revised Interface DesignTask Flows
![Page 20: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/20.jpg)
Task 2 (Medium)Set a Reminder to Explore During
Free Time
![Page 21: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/21.jpg)
Task 3 (Complex)Travel Spontaneously Without
Missing Out on Major Attractions
![Page 22: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/22.jpg)
Prototype Overview
![Page 23: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/23.jpg)
✖ We used Sketch to create the individual screens:○ Sketch helped us create
realistic mockups by offering reusable templates for components
○ Sketch mockups are not dynamic (everything is hard-coded)
Tools, Limitations, and Tradeoffs
![Page 24: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/24.jpg)
✖ We used Marvel to link the screen together and create the demo:○ Marvel helped “bring the
app to life”○ We could not test any real
functionality (back-end database, engine, performance)
Tools, Limitations, and Tradeoffs
![Page 25: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/25.jpg)
✖ Simulated Timeskip: Users can get to the alarm screen by tapping the modal dialog box (Wizard of Oz).
✖ All data used (moods, attractions, reminders, etc). is hard-coded!
Prototype Techniques
![Page 26: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/26.jpg)
Thanks!Any questions?
![Page 27: Mingo! - hci.stanford.edu · Change 2 Before After. Change 2 (Continued) Before After. Change 2 (Description) Removed separate confirmation screens Use of modals on screens instead](https://reader034.fdocuments.us/reader034/viewer/2022042810/5f98785b7f598d4aca52e674/html5/thumbnails/27.jpg)
Credits
Special thanks to all the people who made and released these awesome resources for free:✖ Presentation template by SlidesCarnival✖ Photographs by Unsplash