The Sciencenter is a hands-on science museum in Ithaca, New York. A series of interactive exhibitions and multiple touch screen kiosks are available for children to play around, but updating the kiosk content was rather frustrating. In this project, I designed an online kiosk builder for the project managers, and recommended a hardware solution for the kiosks.

Time and Duration

Fall 2019

3 months

Team

Ian Lomeli

Kamille Gomez

​Mingxiao Hu

Phyllisia Angelia

Personal Contribution

Hardware Research

Competitive Analysis

Ideation

Low/High-Fi Prototyping

Interactive Prototyping

Usability Testing

Heuristic Evaluation

Data Analysis

​Project Management

handsonprojects.JPG

Hands-on exhibition projects

Touchscreen Kiosk
IMG_0085.jpg

The current Mac mini & touchscreen monitor setup

IMG_0083.heic

A kiosk introducing animals in the touch-tank

fishtank.jpg

Project manager Cass showcases the touch-tank kiosk setup

The touch-tank

 

Background

​Project managers in the Ithaca Sciencenter need to update the content displaying on the touchscreen kiosks regularly, to match with the exhibition themes. The previous approach was creating a Keynote file locally on a Mac mini, but it took too much effort to remove each kiosk shell from the wall, open it from the back, use the keyboard & mouse to edit the Keynote, close the shell, and put it back on the wall. This procedure of keeping the content updated was particularly frustrating when animals got sick or equipments broke.

During the client interview, we addressed the following issues:
  1. The current Mac Mini does not work well with the touchscreen monitor. 

  2. A Keynote is not the ideal way to present digital exhibition projects, because all pictures and videos need to be stored locally, and the links between pages break easily when editing.

  3. Editing Keynote slides on-site requires too much effort and is inefficient.

Our client is expecting a platform that is able to:
  1. Conveniently create, edit, and remove digital exhibition projects.

  2. Upload and manage the media assets, and use simple interactions like drag and drop to deploy assets.

  3. Create multiple independent stories inside one exhibition (for example, the stories of the horseshoe crab and starfish in the sea animal exhibition).

  4. Hide certain stories easily if the animals get sick or the exhibited objects break.

  5. Share the exhibition project with other science museums in the nation.

...

Problem Statement

​How might we create a platform that allows project managers to upload, edit, deploy, and remove digital exhibition projects on a kiosk remotely and efficiently?
 
...

Solution Walkthrough

​Choose one existing project to display on the kiosk, then log in as admin.
Remove a picture and upload a local picture to the project asset collection.
Create a new project "Climate Change," and modify its description.
Create a new story "Coral" under the "Touch Tank" project.
Create a new page "Introduction" under the "Coral" story, deploy visual assets on the page, and create a hotspot link to page "Choose an Animal."
 
...

Design Process

I started with exploring current kiosk building solutions in the market regarding both software and hardware.

I conducted an in-depth analysis of 4 different hardware options, ranging from a combined implementation of a mini PC with a touchscreen monitor to a full-fledged kiosk platform that can support comprehensive exhibition design, customizable software development, and physical kiosk rental. 

Considering the client’s budget and concern regarding a licensing fee, the high cost of implementing a full-fledged kiosk platform for only a few exhibition projects at this moment made the implementation less cost-effective. Instead, I recommended replacing the existing Mac mini with an Intel Mini PC NUC Kit with Windows 10 that would work well with the touchscreen.

nuc_10_performance_brief_6_rwd.png.rendi

Intel Mini PC NUC Kit

  • 10th Generation Intel® Core processors

  • 8 GB Dual-channel DDR4-2666

  • 256 GB NVMe SSD

  • Support for three 4K60 displays

  • Intel WiFi 6 and Bluetooth® v5

  • Windows 10 Home to support touch screen

  • Fully customizable, upgradable kit at a reasonable price

  • 4.60’’ x 4.40’’ x 1.50’’ slim form factor

Based on the results of user research, we created the persona of project manager Christopher and assigned him the task of creating a kiosk page.
TeamH-Persona.png
TeamH-UserJourney.png

Persona and user journey

This journey map highlights the different steps the project manager takes in order to create a project page on the kiosk. The journey map allowed me to examine and highlight the pros and cons of the current strategies the museum project manager is utilizing.

Following our research and definition stages, our team worked together to brainstorm possible solutions.

Each team member created multiple sketches that we shared as a group where we discussed both the pros and cons of each other’s ideas. We used what we learned from these sketches to create a concept map and final sketch, which we then presented to our client for feedback. Our initial concept included one kiosk controlled by one account. From there the kiosk displays would be broken down into projects and pages.

TeamH-ConceptMap.png

Kiosk Builder concept map

Based on the concept map and initial sketches, I created a low fidelity prototype using Figma.

During the design process, I focused on the structure of the basic functions of the kiosk builder. After showing the client the initial sketches, it was decided that one user account would be able to control multiple projects. These projects would correspond to actual exhibits in the museum, such as "sea animals in the touch tank." Projects would then be divided into stories, which are smaller chunks of the overall project, such as a story about horseshoe crabs within the touch tank project. From there, stories would contain the actual pages that get displayed on the kiosk screen. The low fidelity prototype also included a section to store assets, as well as a timeline to track changes on the different projects.

Login

Login page with the function of displaying one project on the local kiosk.

Homepage

Home page displaying all exhibition projects under this project manager.

Assets

Assets page to upload new assets and manage current assets under each exhibition project.

Upload

Upload a new asset.

Project

Project detail page with page structure on the left and introduction/assets library on the right side.

Low fidelity prototype of logging  in, home page, asset page, and adding new assets

After discussing the prototype with our client, we decided to remove the timeline feature because he would not use it in the actual application. Overall, our client liked the project, story, page structure.

After evaluating the results of the usability test, and interpreting the client’s feedback, a mid-fidelity prototype was made in Adobe XD.

This prototype aimed to refine the interaction details from the low fidelity prototype while enriching its functionality. Limited colors were used to showcase the fundamental visual style of the kiosk builder. The various elements of the prototype, like uploaded images and videos, were labeled to better demonstrate the asset management system.

A new function of managing stories was added based on the client’s need to temporarily disable certain stories when certain exhibition objects were unavailable. Instead of showing the project structure on the project page, a dedicated story page was added to show the connections among all the pages within a story. This enabled easier control over more complex connecting situations and provided better visualization.

Login

Login page

Homepage

Home page

Project

Project detail page

Connections

Hotspot connections between pages inside a project

Page_preview

Page editing

Edit_title

Edit text on a page

Assets

Assets management page

Upload_Assets

Upload a new asset from computer

Key screens of the mid-fi prototype

The mid-fidelity prototype was tested by 2 participants who had not been exposed to our design before but have experience in a technology or information science-related field. Notable feedback from the participants included:

  • Pages do not belong to any stories (like the summary page of an exhibition project) were not handled in our prototype.

  • Confused about the hierarchy of project manager - exhibition projects - stories - pages.

  • Confused about the two functions at the login page: displaying an exhibition project on a local kiosk screen versus managing an exhibition project as Sciencenter staff.

  • Misunderstood the list of page templates as the list of all pages in stories.

After these usability test sessions, two human-computer interaction design students were recruited to conduct a heuristic evaluation. The heuristic evaluation was based on Jakob Nielson’s 10 usability heuristics, which is a set of general usability principles for interaction design.

 

The goal of conducting the heuristic evaluation was to identify any problems associated with the design at an early stage. Because the issues were discovered and categorized according to their estimated impact on user performance or acceptance, we were able to quickly decide which problems should be fixed first.

Notable issues discovered in the heuristic evaluation included: 

  • In the Add New Page editing mode, the user has no indication which page he or she is working on inside the story.

  • No confirmation if the user wants to delete a page. 

  • "Set to display" is set as a switch for each project, but only one switch can be turned on.

Moreover, several feasibility issues were pointed out during the design critique session with field experts.

Two experts, Gilly Leshed, who is the Director of the Information Science Masters of Professional Studies program, and Jon Saxe, who has experience as a Managing Director and is the current MPS Project Professor, were invited to critique the mid-fidelity prototype.

 

During the design critique, the major issue of balancing ideal solutions and the workload for the development team was pointed out. While our client valued the ability to create exhibition project pages using the uploaded assets, the field experts believed that this function of deploying texts, images, shapes, and changing backgrounds was a reinvention of existing slideshow solutions such as Powerpoint. They felt that the current scope of the design would be too challenging for a student group to develop. The experts suggested we look into integrating existing technologies into our design, for example, embedding PowerPoint slides into the pages.

Edit_title.png

Assets deployment and content editing with a PowerPoint-like style

After evaluating the results of the heuristic evaluation and design critique, I created a high-fidelity prototype using Sketch.

This prototype slimmed down the page editing capabilities by removing the majority of the related features. They were replaced with the capability to upload a pre-made image from another source, then create hotspots on areas to build links among pages. Furthermore, I added error prevention and increased the visibility to certain features. 

Log in

Log in

Project page

Project page

Project detail

Project detail

Page connections

Page connections

View page

View page

Create hotspot

Create hotspot

New project detail

New project detail

New project connection

New project connection

Create a new page from uploaded pic

Create a new page from uploaded pic

Asset page

Asset page

Upload new asset

Upload new asset

New asset

New asset

Key screens of the high-fidelity prototype

In our transition from the high-fidelity prototype to the final prototype, we decided to add the majority of page editing features back after negotiating with our client.

This decision was not made lightly, rather we combined our viewpoint as designers and our client's viewpoint. Our client emphasized that removing the page-editing capabilities would require him to find different workarounds to create pages. This would force him to open multiple applications at once, which would add to his workload rather than decrease it. Furthermore, the removal of page-editing capabilities would not allow for quick changes to the displays, which was something the client specifically mentioned was important for the exhibits.

 

As designers, we felt that removing the page editing feature would interrupt the workflow of the application, which would harm the user experience. Because of this, we decided to include page editing in the final prototype. To support the development of the application, our final design specification includes ways in which the design can be slimmed down in order to make the workload of the developers easier if they need.

Final page editing.png

Page editing feature of the final prototype

The final prototype maintains the hierarchical project, story, and page structure that I created in the low fidelity prototype. Throughout different forms of testing during the three sprints, this structure remained understandable and practical for our client.

Site map.png

The final prototype also includes another layer for assets, where assets are organized into the different projects that they are for.

Content structure.png
 
...

​Project Management

Besides interaction design, I also participated in the project management aspect of Sciencenter Kiosk Builder project.

Agile methodology was adopted in this project because we wanted to receive constant feedback from our client and other stakeholders. This enabled us to work on the design refinement before we handled the design specification to the development team. 

Major tasks.png

Four sprints were scheduled in the prototyping phase. The low-fidelity and mid-fidelity prototyping phases were assigned one week each The high-fidelity and final video prototyping phases were assigned two weeks, with time buffers for unexpected design changes and additional evaluations. Because none of our team members had previous experience working with touchscreen kiosks, and because meeting schedules with our client could change, risk management was another big part of the project management. 

Risk management.png

​A sample of 4 Box Report for risk management

A 4 Box Report was generated every two weeks to document potential risks and issues, recent progress, and planned activities for the next two weeks. All the reports were reviewed by the Managing Director Jon Saxe to make sure the project was on track. Other tools like project plan and work breakdown structure (WBS) were also used in this project, which gave me hands-on experience in project management.

...