Weekly Blog Post

Week 10: Usability playtests, Look-and-feel implementation, bugfixes

Week 10 saw great progress as follows:

Playtesting:

5 usability playtests were conducted with 3 playtesters. On Tuesday, Amanda and Kelsie of the Frick evaluated the usability of the website from the perspective of the Educator role (i.e. uploading media, organizing media into Stops, and turning Stops into Tours). On Wednesday, Rebecca Lombardi gave a tour to ETC students and evaluated the usability of the website from the perspective of the Host role (i.e. presenting materials with the website itself over Zoom). Following this, Amanda and Kelsie also playtested the website as Hosts as well on Thursday for students of Shirley Saldamarco’s class and other ETC alums. 

Key takeaways were as follows: 

  • Usability: The website is probably very usable for Hosts/Educators (according to 3 playtesters)
    • Playtesters said it meets their needs: The website is broadly usable and met the needs of the Host/Educator roles (i.e. the website had all the features/functions absolutely required to organize and present materials)
      • 2 Educators successfully made tours:
      • 3 Hosts successfully gave tours:
      • Guests did not appear distracted by the Website itself: 
  • Presentation view changes: emphasize images/details 
    • The gallery view is the best view for presenting. 
    • Pictures should be easier to get to than Descriptions/text 
  • Cycle Stops: without leaving presentation view

For week 11, playtesting will focus on developing onboarding materials that are up-to-date with the current build. 

Look-and-feel and Visual Design: Completed work on the home page and tour page including buttons, layout, colors, font, and UI. Many of these features were integrated with the build and are mentioned in the change log. 

Programming

Change Log v1.2.0 – Week 10 – 2020-11-06

Improvements

  • [Dashboard – Stop editor] Add “click to add media” instruction
  • [Dashboard – Top toolbar] Remove “Howdy” before current user display name
  • [Website] – Replace the placeholder icons
  • [Website – Library page] Implement popup windows UI – Create stop, Copy stop
  • [Website – Library page] Modify layout details to match design – link position, page margins, carousel gutters
  • [Website – Tour page] Implement responsive grid layout for tour stops. The stop thumbnail size and stop number in each row will be responsively changed based on the screen size.
  • [Website – Tour page] Implement the edit mode UI
  • [Website – Tour page] Add “Copy Tour” button to tour page

Features

  • [Website – Library page] Implement the tour dropdown menu, so that user can delete/edit/copy every tour from its own menu
  • [Website – Library page] Show “Complete/Incomplete” Tour Status, which can be set by the tour creator
  • [Website- Library page] Show the tour creation info – tour creator, tour date
  • [Website – Tour page] Add stop pagination in “add stops” overlap in edit mode
  • [Website – Tour page] Implement collapsible tour title (The tour status and all the buttons will be initially hidden until user expand them)
  • [Website – Stop page] Add “edit this stop” button that will direct to stop editor in dashboard
  • [Website – Stop page] Tags in related topics link to search tags in dashboard 
  • [Website – Stop page] Add “search media” bar that direct to dashboard search the keyword in media
  • [Website – Tour permission] Disable edit button if current tour status is “Complete” and current user is not the author
  • [Website – Tour permission] Disable delete button if current user is not the author
  • [Website – Tour permission ] Disable tour status radio buttons in tour edit mode if current user is not the author