Milestone 4

System Concept & High-level Architecture

FlexiScreen is a flexible second monitor used to enhance the user's workspace. Among different features, FlexiScreen is easily attachable to walls and it also could be unfolded or collapsed to various sizes. The motivation of this product is to enhance and extend users’ workplaces at home since they are struggling with their home workspace due to COVID-19. We conducted diary study, surveys, and user enactments to understand our users behavior and issues. After that, we finalized the architecture for FlexiScreen. The diagram below shows the basic architecture of our proposed product.

Users utilize the computer to interact with Flexiscreen. The product automatically syncs with the computer and tracks the apps that the users frequently use on their computers. People can select which apps to sync with Flexiscreen, and users can see Flexiscreen dashboard on their main system. After that, Flexiscreen interacts with the users using LED feedback to show syncing status and using foldable screens. In our video demo, our team will used Wizard of Oz prototyping, so our demo architecture looks like the following diagram:

Goals for the Demo

The goals of the demo were to replicate the experience of using Flexicreen and get feedback. We wanted to test how Flexicreen can help users to extend and enhance their workspace at home. We particularly wanted to test the followings:

Folding and unfolding experience
Syncing processes including auto-syncing and selecting apps that they use frequently on their computer
Experience using the LED light feedback to display the syncing status

The Demo

Script

Gordon begins the video by introducing viewers to his remote workspace. He walks through the pain points he experiences even with a two monitor setup: more tabs than he can keep track of, not enough screen space to maximize his applications, and too little desk space to work comfortably. In short: too little space.

Gordon then announces our group's creation of the Flexiscreen, a device for enhancing remote workspaces. He explains how the screen is portable and expandable, that it can be folded to fit the dimensions of everything from a tablet to a poster board, that it can be attached to walls and function as a standalone device, and how it seamlessly syncs with users' computers.

Afterward, Gordon walks through prototypes of the Flexiscreen. Specifically, Gordon walks through the workflow of syncing the Flexiscreen with a user's main computer, and the workflow of moving an application window from a computer screen to the Flexiscreen.

Finally, Gordon demonstrates how the Flexiscreen can be folded to various sizes: he begins with the Flexiscreen being the size of a tablet, unfolds it to the size of a poster board and attaches it to his wall, detaches it, and folds it back down to the size of a tablet.

Materials

We recorded the demo using a poster board, iPad, and Arduino bread board with a colorful LED. We used an iPhone to record video, OBS (Open Broadcaster Software) to record voiceovers, and Adobe Premiere Pro for video editing.

Prototyping Process

Logistics:

Because the pandemic prevented us from filming our demo in a colocated way, one member of our group filmed the scenes of our demo in their home, though our entire group planned and scripted the demo together. After shooting the particular scenes and segments we needed, the video was edited using Adobe Premiere Pro. The video includes inserted slides and voiceovers that further explain the actions our demonstration.

Conveying the flexibility of the screen:

In our video demo, we show that our screen is flexible by showing two different “sizes” of Flexiscreen being used. Initially, the user is using the screen as a tablet-sized device. We used a tablet here to show what the screen would look like when the screen is folded to a small size. We later show the user unfolding the screen to a large, poster-sized dimension and attaching it to the wall. We used a tri-fold cardboard poster board to show the screen unfolding, and poster paper to convey Flexiscreen’s screen when it is unfolded to be large.

Set-up flow

We created prototypes on Adobe XD to show how users would interact with the Flexiscreen for the first time. Upon turning on the screen, the users will be taken step by step through a set-up and syncing system. They will select which device to sync to, select which apps to sync, and finally be presented with the Flexiscreen’s dashboard which shows the users the apps they have synced, as well as other feature options. Once synced, a red light will be activated on the Flexiscreen. We conveyed this action using a LED light.

To incorporate the LED light, a hole was cut into the posterboard that was used to represent the Flexiscreen (when it was unfolded to a larger size). We plugged the photon into the breadboard, along with the necessary wires and the ohm resistor. We inserted the LED light attached to the breadboard into the hole in the posterboard from behind, and used duct tape to hide the breadboard and extra wires. We then connected the photon to the computer via a USB cable. In our video demo, we show the LED turning on after the syncing flow to prototype the process of a status light turning on once the Flexiscreen has been synced.

Displaying screens on the Flexiscreen

Once the user has set up Flexiscreen, their main device’s desktop will have a mini dashboard indicating the status of their Flexiscreen. This dashboard will display the screens that are currently being displayed on Flexiscreen, their synced apps, and general system information like date and battery level.

To move a window from the user’s main device to the Flexiscreen, the user simply drags the window over to the dashboard. The dashboard gives feedback by showing the most recently moved window first on the display of user’s “on display” screens.

Users drags the window over to the side dashboard. The window will now appear under "On display," meaning that the window is now being displayed on the Flexiscreen.

Limitations

A major feature of our product is its flexibility - the ability to fold and unfold the product to any size the user wants due to the flexibility of the material it is made of. As there was no material we could have used to effectively prototype this feature, we decided to use a posterboard and tablet to represent the flexibility of our product. In this sense, we believe our prototype is limited compared to the actual idea we are envisioning because we are not able to show the screen actually unfolding, and we only show two "sizes" of the product. If we had access to more advanced or even futuristic products, we would have potentially use material like this:

Image credits: hackaday.com

Additionally, while we used basic features in Adobe Premiere Pro to edit our video, none of the members of our team are experienced video editors. While we believe we were able to show the basic interactions and features of our product, we were not able to use advanced video editing techniques to make our product seem more "real" through our video.

Page updated

Report abuse