#Melbstagram Tour App
DDD30020 – Interaction Design for Mobile Devices Brief 02 Part 01– Interactive Prototype and Testing Report Jane Novella 101990306 Class: 2019 S2 Wed 11.30 AM Tutor: Anton Linden
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
Table of Contents I. Interactive Prototype Melbstagram Tour App Mobile App Prototype
.............................................................................................................. 3 .............................................................................................................. 4
II. User Evaluation User Testings Details Heuristics and Evaluation tools
.............................................................................................................. 8 .............................................................................................................. 10
III. User Evaluation Report User1
Video Transcripts Testing Reports User2 Video Transcripts Testing Reports User3 Video Transcripts Testing Reports User4 Video Transcripts Testing Reports Lists of Refinements & Changes
.............................................................................................................. .............................................................................................................. .............................................................................................................. .............................................................................................................. .............................................................................................................. .............................................................................................................. .............................................................................................................. .............................................................................................................. ..............................................................................................................
13 16 18 21 23 26 28 31 32
IV. Acknowledgement References
Jane Novella – 101990306
.............................................................................................................. 32
DDD30020 – Interactive Prototype and Testing Report | 2
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
Melbstagram Tour App About Melbstagram is a walking tour mobile app that brings its users to top 10 photogenic (Instagrammable) spots in Melbourne, which locations vary from gallery, museum, garden, and brunch places. The app name comes from a popular hashtags on Instagram and is an abbreviation from‘Melbourne’ and ‘Instagram’. Melbstagram aim to let users have good pictures (of them) in Melbourne, to educate users about Melbourne’s arts, history and lifestyle by letting users to explore Melbourne and have fun. Melbstagram also aspire to re-evokes and challenges users’ passion for art and photography.
Domain Name: www.melbstagramtour.com.au Narration
Self-made Tour: Users are able to visit each location separately without have to follow the whole tour. Melbstagram Tour: •Users are set to be in a ‘game’ aiming to be the most influential instagram/blogger. •Starts with 0 followers, maximum followers users could get is 100K, 10K for each locations. •Users will be able to see their progress within the tour. •Complete given tasks to unlock filters, get badges and 100 follower: - Reach location on time >> Unlock IG filter - Unlock IG filter >> Gain 5K followers - Read full info >> Gain 5K followers
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 3
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
Mobile App Prototype Digital Prototype Prototype is an initial model or sample of a product, built to test a system or a concept. “They’re simulations of how a finished product will work. Sketches, wire-frames and mock-ups serve other purposes in the design and prototyping process”(Ross,2017). In this brief, to see how users will interact with the app, I will be creating a digital prototype of the app and test them. Ross stated that digital prototype wins in terms of UI quality, testing real interactions, remote testing, ease of usability testing, and clients are also more likely to understand a system’s work-flow with digital prototypes (Ross,2017).
Prototype Development Initially I began create a low-fidelity prototype, which is actually only sets of wire-frame sketches. This is to see how the overall layout and to see how effective the information architecture will be. Then I create its digital version in Adobe Illustrator, equipped with more details, but still not interactive and serves only as a guidance of its overall aesthetics. In this brief I developed an interactive prototype in Adobe XD to test its real interaction with users. More details about the testing will be shown later in the document.
Initial Low-fidelity prototype(wire-frames)
Jane Novella – 101990306
Low-fidelity digital prototype (Adobe Illustrator CC)
DDD30020 – Interactive Prototype and Testing Report | 4
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
Mobile App Prototype Link to Interactive Prototype (Mobile Version):
https://www.figma.com/file/muopxiD87Z3g1ztmiAqO4C/Melbstagram_vivo_revised2?node-id=1%3A3
Below listed are the screenshots of some of the app prototype pages just in case the link to the interactive prototype link is not working. Note that every location have media (images & full information text) in it, but during the testing some of the media doesn’t apper because it lagged. Landing Page
Create an Account
Map Page
User Profile1 - Badges User Profile1 - Filters
Jane Novella – 101990306
Sign In
Tutorial 1- intro
Tutorial 2 - rules
Tutorial 3 - rewards
App Menu (overlay)
Exit Warning (pop-up) Notification Page
Tutorial 4 - final
Home Page
Location Lists Page 1
Location Lists Page 2
About Page
Feedback Page 1
Feedback Page 2
Tour Introduction Page
DDD30020 – Interactive Prototype and Testing Report | 5
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
Mobile App Prototype Link to Interactive Prototype (Mobile Version):
https://www.figma.com/file/muopxiD87Z3g1ztmiAqO4C/Melbstagram_vivo_revised2?node-id=1%3A3 Location 1
Location 2
Jane Novella – 101990306
Location 3
Location 4
Location 5
Location 6
Location 7
Location 8
Location 9
Location 10
DDD30020 – Interactive Prototype and Testing Report | 6
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
Mobile App Prototype Link to Interactive Prototype (Mobile Version):
https://www.figma.com/file/muopxiD87Z3g1ztmiAqO4C/Melbstagram_vivo_revised2?node-id=1%3A3 Check-point example: Location 5 Exiting Tour Warning (pop-up)
Progress Notification (pop-up)
Jane Novella – 101990306
Location 5
Finishing the Tour: Location 10 User Profile - filters
User Profile - badges
Completion Notification (pop-up)
Location 10
User Profile - filters
User Profile - badges
DDD30020 – Interactive Prototype and Testing Report | 7
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User Testing Details User Testing
Target Audience & Participating Users
Usability testing, in terms of user-centered design, is a process to evaluate how usable a system’s work-flow and interface are. This qualitative process focuses on “what the user do and not what the user say” (Foggia, 2018). User testing is done to see if users are satisfied with the system, “(c)heck if the design is matching business decision to real world use... (and) if the user can perform the tasks we proposed” (Foggia, 2018). By gaining insights, reactions and feedbacks from users, developers and designers are able to know whether they are on the right track or not.
As listed in the previous documents, my target audiences are within such categories; Female (Primary) & Male, 18 - 30 y.o, College/University students/ Working young adults, Fashionista and Foodie enthusiasts/ Bloggers/Vloggers/Influencers (children under 18 needs to be accompanied by guardian). Some other variants of the type of users have also been listed as personas and user scenario in the previous document.
Testing Aims
Primary User1: Catherine (F,21) Hobby/work: Fashion/Foodie/IG enthusiast, owns a florist business Study: Marketing student, Commerce, UniMelb
•To see users’ responses to app’s interactivity •To get users’ feedback on visuals and usabilities (i.e. error prevention, navigation, interactivity,etc.) •To pinpoint any confusion/misuse in the app’s UI design – suggestions will be used to refine the design, to match users’ need more. •Positive responds will be used to emphasize design’s strengths. As app prototype give users an illustration of how the final app will look like, feedback from users are important to predict how markets will respond to the app once it is released.
Jane Novella – 101990306
To obtain higher accuracy and realistic data from the testing, individuals with higher similarity to the target audiences have been picked (in range and some are similar in terms of characteristic and behaviour rather than in physical qualities).
Primary User2:Vanessa (F,20) Hobby/work: Retail Staff, Travelling/Hiking, owns a tour business Study: Marketing & Mannagement student, Commerce, UniMelb Secondary User3: Valerie (F,19) Hobby/work: foodie enthusiast, likes to take photo, travelling, drawing, baking Study: Accounting & Finance student, Commerce, Unimelb User4: Maurice (M,21) Hobby/work: Watch anime, playing games, cooking Study: Computer Science student, Science, UniMelb
DDD30020 – Interactive Prototype and Testing Report | 8
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User Testing Details Testing Procedure 1. Make appointment with users, let them know about brief details of the testing and ask for their agreement consent for their audio & video recording. 2. User enters the testing area (desk with phone & camera set up) greeted by the invigilator and invigilator read the introduction script. 3. Users are free to explore the app for 20-30s. 4. User will be asked to do several given tasks (Range 5-10 questions) 5. User will be asked to rate 20 criteria regarding the app’s usability (Questionniare will be given under user’s preference). 6. User will be asked 4 questions for the app’s feedbacks. 7. User will be asked for additional comments/opinions on the overall testing. 8. Invigilator thanks the user and user is free to leave the testing area.
Briefing Script “Thank you for your time to participate in the evaluation of Melbstagram Tour Mobile App. Melbstagram is a walking tour mobile app that brings its users to top 10 Instagrammable spots in Melbourne. Supposedly the app is to be used to respond to user’s location within the city and re-routing them from a place to the other. However this location feature will not be implemented on this test. The app you are testing is an initial digital prototype which has limited functionality and content. I will present you with my app and you are free to explore the app in your own pace before I ask you to do some tasks and ask you some questions regarding my app. If you feel lost or if you have any questions feel free to ask and I will assist.”
Testing Technical Specifications Prototype Software: Figma Internet Browser: Google Chrome Mobile Device: VIVO V11 Pro Camera: Canon EOS M6, canon EF lens 50 mm 1.8 Additional Device: MacBook Pro (Retina, 15-inch, Mid 2015)
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 9
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
Heuristics and Evaluation Tools Heuristics Reference Heuristics Developed by the invigilator for this brief is inspired by one of the most popular heuristics which is often used as a guideline in designing an interface is Jakob Nielsen’s 10 Usability Heuristics. “They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines (Nielsen, 1994)”. Heuristics are as listed below: 1: Visibility of system status 2: Match between system and the real world 3: User control and freedom 4: Consistency and standards 5: Error prevention 6: Recognition rather than recall 7: Flexibility and efficiency of use 8: Aesthetic and minimalist design 9: Help users recognize, diagnose, and recover from errors 10: Help and documentation This heuristic is used as a reference and guidance for this brief’s sets of heuristic in interface design, interaction design, tour design and visual design.
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 10
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
Heuristics and Evaluation Tools Heuristics – Interaction Design • User Control & Freedom - Let users feel comfortable by giving them control over the app; this also let them to learn using the app quickly • Match Real World - System operates in users’ language, so that users would feel familiar and info seems to be presented naturally • Visibility - Users should be informed about what is going on the app/about their position within the app . • Responsive - System should be responsive to user’s action and give feedback to let users know that the system is working. • Error Prevention - Prevent users from the possibility of making mistake - done by give clear and concise warning messages
Heuristics – Interface Design • Minimalist Aesthetic - Interface should contain only relevant, needed information and shouldn’t be complex (to save storage and not confuse users) • Understandable - interface design helps user to understand what are they doing on the app (i.e. icon to represent a certain action/task) • Accessible - design should be familiar to as many people as possible (i.e. for color blind people) • Consistency - Same styles given for the same tasks/response (i.e. next page button are the same on every pages) • Clarity - Interface design looks pretty and organized, doesn’t appeal too dominant, doesn’t suppress main info, instead support them to be seen
Heuristics – Tour Design •Straightforward – Clear and easy to understand narrative •Intriguing - Tour has interesting narrative based on the chosen aspects •Flexibility - Give freedom to users to follow the given tour or explore each location on their own time •Credibility - Information provided must be highly accurate and detailed - make sure users won’t be confused, info is not biased •Reliability - Must be able to guide/help users to reach the destination even when users are lost
Heuristics – Visual Design •Unity - all elements appears to belong together, design doesn’t look dull or overwhelming. •Coherent overall design that communicate mood & message (graphics media and interface). •Hierarchy are clearly shown, therefore users will be looking at infortmation in the right order. •Composition - helps users perceive the overall design as opposed to individual elements. arranged properly - overall design will be very clear. •Comprehensible - Overall visual design (color,font,scale,etc) supports users to be able to read/gain information. Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 11
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
Heuristics and Evaluation Tools Tasks (0: try the app in your own time) 1. Create a new account in this app. 2. Search for maps. 3. Search for badges/filters. 4. Search for feedback form. 5. Follow the melbstagram tour. 6. Exit the app.
Task Ratings E = Easy | D = Difficult
Questions: Interaction Design
Questions: Interface Design
Questions: Tour Design
Questions: Visual Design
1. Is feedback after an action is completed visible and necessary ? 2. Does the buttons and links works immediately/responsive ? 3. Does the location of menu make tasks difficult to be done ? 4. Does the map usable/easy to interact with? (i.e. zoom, scroll) 5. Does the size of buttons/icons suitable for mobile device interaction ? 1. Does the narrative concept of the tour interesting/engaging ? 2. Does the goal of the tour clear/easy to be understood ? 3. Do you think the app gives enough help and guides to you ? 4 .Do you think the distance between each venues are too far ? 5. Do you think the time of completion are suitable ?
Feedback Questions
1. Which task did you find the most frustrating ? 2. Did you ever find yourself lost in using the app ? 3. What was your favorite part of the app ? 4. How can this app be improved ? 5. Ask for personal opinion/ additional comments.
Jane Novella – 101990306
1. Does the icons clearly represent the tasks they are doing ? 2. Are you able to see your progress clearly during the tour ? 3. Is the navigation bar easy to use/accessible? (Making each pages clearly distinguishable ?) 4. Does the overall layout structured and consistent ? 5. Is it easy & quick to go between each pages back & forth ? 1. Does the overall design supports the mood of the narrative ? 2. Does the overall design supports you to read important info first ? 3. Does the overall design composition looks clear and organized ? 4. Does the font size and color choice make you read easily ? 5. Does media image & video choice suits the overall aesthetics ?
Questionnaire Ratings 1 NO
2
3 Neutral
4
5 YES
DDD30020 – Interactive Prototype and Testing Report | 12
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 1 – Video Transcripts * = Action [] = English translated
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 13
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 1 – Video Transcripts
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 14
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 1 – Video Transcripts
User 1 Testing Video
Jane Novella – 101990306
https://liveswinburneeduau-my.sharepoint.com/:f:/g/personal/101990306_student_ swin_edu_au/EkwBsVfwWdpFj0NiEzQn2JMBOMYH554k9R5waer8pAmulA?e=soMShK
DDD30020 – Interactive Prototype and Testing Report | 15
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 1 – Testing Reports
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 16
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 1 – Testing Reports
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 17
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 2 – Video Transcripts * = Action [] = English translated
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 18
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 2 – Video Transcripts
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 19
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 2 – Video Transcripts
User 3 Testing Video
https://liveswinburneeduau-my.sharepoint.com/:f:/g/personal/101990306_student_swin_edu_ au/EkwBsVfwWdpFj0NiEzQn2JMBOMYH554k9R5waer8pAmulA?e=soMShK
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 20
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 2 – Testing Reports
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 21
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 2 – Testing Reports
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 22
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 3 – Video Transcripts * = Action [] = English translated
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 23
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 3 – Video Transcripts
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 24
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 3 – Video Transcripts
User 3 Testing Video
https://liveswinburneeduau-my.sharepoint.com/:f:/g/personal/101990306_student_swin_edu_ au/EkwBsVfwWdpFj0NiEzQn2JMBOMYH554k9R5waer8pAmulA?e=soMShK
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 25
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 3 – Testing Reports
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 26
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 3 – Testing Reports
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 27
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 4 – Video Transcripts * = Action [] = English translated
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 28
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 4 – Video Transcripts
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 29
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 4 – Video Transcripts
User 3 Testing Video
https://liveswinburneeduau-my.sharepoint.com/:f:/g/personal/101990306_student_swin_edu_ au/EkwBsVfwWdpFj0NiEzQn2JMBOMYH554k9R5waer8pAmulA?e=soMShK
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 30
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 4 – Testing Reports
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 31
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
User 4 – Testing Reports
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 32
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
Lists of Refinements & Changes Testing Procedure and Questions Lists One thing that I’ve learnt from my testing in terms of procedure and execution is that I need to be more professional. I asked my friends that fits into the target audience to do the testing. At some point during the testing, they would laugh or talk to each other which makes the whole process seems more like an exercise or a practice due to its lack of professionalism. Next time, I could be stricter with the procedure when briefing the users. For the screen recording, I also need to move the button to the side of the screen so that it is less distracting to the users. I also could have re-arrange the words of the questions in terms that is more universal/easy to understand to the target audience.
App Workflow & Functionality I made the prototype with a rule that if user starts to ‘play the game’, they wouldn’t be able to look at their achievements until they’ve reach the ‘next level’ - this is tested with the task to search for badges and filters once they’ve reached the fifth spot. And the result is that all users have difficulty in doing this task. They’ve given the input to make the user profile’s page (where the badges and filters at) to be fully accessible during the tour - but still give the warning when user try to access other buttons. Some also mentioned that users usually will not exit the app through the menu - they will usually just press the ‘back’ button on their phone. So maybe the action ‘exit app’ should be changed to ‘log out’. I also received a feedback to make the input fields responsive, this is however out of the brief criteria, so I will take it into a consideration. The map in the prototype is not really usable as it only allows user to scroll and not zoom - this is probably negotiable on the prototype phase, however for the final application, it needs to have responsive and usable map showing the whole tour route.
Narrative and Tour Design Users within my target audience are satisfied with the concept narrative of the tour, however most of them are quite concerned with the distance between each location and the time of the completion. I will re-pick some of my tour locations and re-arrange them so that they are closer apart and so that the tour could be completed earlier.
Visual and Interaction Design All users are satisfied with the overall aesthetic of the app’s design, information layout and the media content. One consideration that I am consider doing is to change the circle lists icon of the top navigation bar menu into a gear (setting) icon and the user profile icon into a badge (star icon). This may not match the design aesthetic of my app, however it may helps depicts the task of each menu better. Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 33
Interactive Prototype
User Evaluation
User Evaluation Report
Acknowledgement
References Ross, J (2017). Prototyping: Paper Versus Digital. UXMatters. Retrieved October 1, 2019 https://www. uxmatters.com/mt/archives/2017/05/prototyping-paper-versus-digital.php Foggia, L (2018). Usability testing: what is it and how to do it?. UX Collective. Retrieved October 1, 2019 https://uxdesign.cc/usability-testing-what-is-it-how-to-do-it-51356e5de5d Nielsen, J (1994). 10 Usability Heuristics for User Interface Design. NNG/Nielsen Norman Group. Retrieved October 1, 2019 https://www.nngroup.com/articles/ten-usability-heuristics/ Usability.gov (n.d.). Visual Design Basics. Retrieved October 1, 2019 https://www.usability.gov/what-andwhy/visual-design.html
Jane Novella – 101990306
DDD30020 – Interactive Prototype and Testing Report | 34