by Ricky Chen I https://medium.com/@rckychen In the previous Smart Maker post, I documented my process of constructing the form of the booth while noting specific components like materiality, structure, and assembly. In this post, I will document the progress I have made on the video prompt interface, the visual components of the booth, and the video viewer interface for both the students’ side as well as for the teachers. Video Prompt Interface:My role in the video prompt interface was to refine and clean up the existing UI and prompts that the teachers and Eric Gan have settled on. After listening to the recorded QV 2/19/20 meeting, these were some of the key components on the video prompt interface that I noticed kept reoccurring in the meeting:
From this, I settled on SDL Studio to be the name of this space, which I feel is much more interesting than a booth or project. As for some of the wording, I refined everything to leave out the idea of this being a project so that it is more of an SDL experience for the students. In the interface, some visual elements that I refined were the typography, spacing, and background color. (insert photo) For the background, I decided to use a dark gray instead of a complete black to give a softer experience for the viewers’ eyes. A light yellow color is also used as the selection and highlight colors, which is based on the Quaker Valley gold color. However, the color on the screen is not the exact shade as the QV gold, so it might change in the future. The instructions at the bottom were also tightened up with it always being held by two brackets with the main verbs being in all caps for emphasis. By following this system, I was able to make the entire booth much more professional and cohesive through the uniformed style on each screen. One of the concerns of the teachers was on the screens that would show that that they were recording, and how we could make it less time-based to allow the students to focus more on their ideas rather than the time left. We thought of some ideas like a recording camera indicator to show that recording was in progress as well as a countdown timer to help give time, but in the end, we felt these were too intrusive for the experience that we want the students to have. After exploring a little more, we settled on a growing progress bar, which indicates that recording is happening as well as gives a softer approach to the time they have left compared to a countdown timer. (insert photo) The micro-credentials screen was one that had a lot of refinements. Originally, it would only show one micro-credential at a time, and the student would have to constantly scroll to go through each of them. I felt this was an issue as the students would not be able to see all their possible options at the same time. For this, I have changed it to where it shows all the possible micro-credentials on one screen, which I think would be helpful for when the students are deciding which one(s) they believe their evidence supports. It also has a done option, which only becomes available after a student has picked at least one option. Overall, the video prompt interface that Eric coded is quite similar to the ideal one that we have mocked up on the Google slides. They all have the necessary information on each screen, but there are some differences in type size, alignment, and content organization. In the future, I’m hoping that the actual program can become as close to the ideal version as possible so that we can have a more cohesive and uniformed interface. From this, we believe it will allow the students to have more professional experiences when using the SDL Studio, which will contribute to the overall learning goals we have for this space that we are creating. Booth Visual System: For the visual system of the booth, there were many different components to incorporate. After listening to the QV meeting audios, here are some components that I noted down:
From looking at some of their requirements, I started looking at some concept boards based on geometric shapes as well as QV colors. Much of foundational learning comes from the understanding of shapes, so I wanted to see how I could incorporate these simple elements to become components that would attract and incentivize the students to use the booth. (insert photo) In the end, this was the booth design that I came up with. It uses many simple geometric shapes as well as some intricate ones to emphasize certain words like fostering and new on the booth. From the final presentation, the teachers were pretty happy with this design, but I feel that there can still be some future iterations to help clean and simplify the design. On the right, it has the visual system with the colors, logos, and typeface that I used. I hope to keep refining this visual system as I continue to make progress in the design. In the end, these elements are also going to be incorporated in the storyboard and instructions I will be creating in the future to allow everything to be as cohesive as possible. During the final presentation, I also received interesting feedback about whether we have done testing to see whether the students would actually be attracted to the booth design that I have created. Initially, our plan was to do some testing and evaluation during the booth implementation phase, but due to the current situation, everything went remote, and I completely forgot about the importance of user testing. I am glad this feedback came up as it is very important to actually get some feedback from my main users. In the future when it becomes more possible, I think it would be a good effort to do some quick surveys and interviews with the students to get some insight into what they currently think about the visual designs I have created for their SDL experience, and how it can be improved to fit more of their interests and needs. Video Viewer Interface: (insert photo) For the video viewer interface, I initially started it off by making it as similar to the video prompt interface as possible. So here, it has the same 3-digit login screen as well as a similar type, color, and layout. For the first two columns, it shows the student’s side, and on columns three to six, it shows the teacher's side. I think overall, the student side was pretty easy to design as there are not as many components and functionality to include. The only important components are to show the different encounters as well as the evidence and micro-credential tags for the videos. The teacher's side was much harder as there are so many possible layers of information to showcase. Here, I decided to separate information based on students, calendar, encounters, and evidence and micro-credentials. After finishing this quite prototype, I realized the different components all shared similar information, and it was quite repetitive to have them all on different screens. Furthermore, from my first iteration, I got some feedback to actually look at some teacher dashboard interfaces to get a better idea of how information can be showcased and organized in a way that teachers are more familiar with. (insert photo) After looking at the feedback that I received, I decided to restart the interface design and just start with quick and simple wireframes without considering any other visual components. This was a really helpful part as it allowed me to better organize what information I needed to show without the distraction of visuals. Here, the student side is pretty much the same as the first iteration except that it has a timeline on the home screen. This component was included as a helpful visual to show the students where they are in their progress as well as to give them an overview of their SDL journey. The students can also click on a specific point of the timeline to access that specific video if they know which one they want to review. On the teacher side, there were many adjustments as it now includes tabs for class overview and video filter. The overview tab is the home page, which gives the teachers a glimpse into their class activity for a specific week. The teachers felt most of the information was useful to them except the average number of minutes for video recordings. Instead, this was substituted with information on how many unique students recorded videos to allow the teachers to have a better idea of whether the videos for the week were made by the same students or not. The roster and filter options were refined from the initial iterations where the roster is organized alphabetically, and the filter options have a cleaner and simple UI for the teachers to select what videos they only want to see. From this, it fixed the initial problem of repetition where the same information was showed on different pages with just a few bits being new content. Reflection:
Overall, I feel that my experience working on this project has been quite valuable as I learned a lot of things I previously was not familiar with. For the booth, I have never really experienced prototyping something this big before, so it was an interesting process to learn how to cut, construct, and assemble something at this size. Another aspect I really enjoyed during the semester was the amount of freedom I had in the direction I wanted this project to go towards. For the next steps, I want to work more on the visuals of the SDL experience as well as develop the other necessary components for implementation like booth instructions and assembly guides. In the end, I am really glad I had this opportunity and am excited to further work on this project and hopefully see it implemented and come alive during the Fall.
0 Comments
by Eric Gan | https://www.linkedin.com/in/eric-gan-cmu/ Hello my name is Eric and I’m a first year student in the School of Computer Science at Carnegie Mellon University. This past spring semester, I had the opportunity to work on writing code for the Smart Maker Video Reflection Booth. The reflection booth is a part of a larger NSF Smart Making Spaces project that revolves around how reflection practices support project based-learning. The booth provides students with a space to reflect on their projects and they are able to save these recordings so that they can look back on them in the future. These recordings allow the students to really see how they’ve progressed the course of their projects.
by Ricky ChenCarnegie Mellon University’s TRACES Lab (HCII/SOA) is exploring how to use emerging technologies to help spatially and temporally scaffold documentation practices in creative, constructive project-based learning experiences. Through a two-year co-design process with Quaker Valley High School educators and administration, the project team has generated multiple proposals for connected technologies solutions to support documentation practices for their sophomore year Self Directed Learning (SDL) project experiences. Quaker Valley stakeholders see the proposal for a Pitch Booth installation as being a highly promising way to try to foster ongoing student reflection and documentation of work products while increasing students’ self-confidence in presenting and explaining their final projects in a public Pitch Session. Design Brief: Problem: How can we construct an intimate environment or space that allows students to personally reflect on their work? How can the booth become a space that fosters and increases students’ self-confidence and skills in presenting and explaining their ideas? Audience: The main audience is the students who will use this space as a way to reflect, practice, and review pitches. By doing so, they can better articulate and explain the ideas behind what they are doing, and teachers can also use this as a way to monitor student progress and performance. Constraints: Booth dimensions must be 40" x 31" x 96"; name and branding should be clean, elegant, and simple; CMU logo somewhere; white exterior and black interior; needs a hidden space component that hides wiring and extra components; screen needs to face sidewall to make sure video background is a clean slate. End-Deliverable: Booth is reflective, intimate, and inviting to the student users; quality lighting to allow good video capture; height-adjustable stool inside; the curtain is not at full-length to provide a social signal when the booth is in operation; enough distance between the user and the screen; sound isolation to cancel out noise from the nearby bathroom as well as to prevent the recording of other students’ conversations. Research: User research and study to deploy, observe, and conduct evaluations on how the booth intervention is affecting learning outcomes; consistent revisions and updates from user feedback; research on the materiality of the interior and exterior components. Low-fi Sketches and Storyboard Starting off with the project, I began with sketches to help visualize the form and components of the booth as well as creating a list of considerations that might be important for the build process. This part was then later used to help quickly build a small mock structure out of foam. I also worked on a quick storyboard to visualize the process and interactions that would occur if a student wanted to utilize this video reflection booth. Currently, the storyboard is quite simple, so I will be working on a more detailed one later that focuses more specifically on the student’s interaction inside the booth and show how the space inside is one that feels inviting and intimate to the user. Pitch Booth Mock Model
After creating some sketches, I began to create a small mock of the booth’s physical forms with foam. At this time, there were three main components: the roof, three sidewalls, and then a sign. These pieces were then velcroed together so that they can be easily taken apart which allows easy transportation in the full-size model as well as being simple enough to have quickly resembled. However, one problem I noticed with the velcro is that since the surface of the foam is so inconsistent, the velcro does not stay on well and can be easily be ripped off if one is not meticulous and careful about the disconnection of the pieces. Furthermore, since the velcro is quite strong, I decided to only put them in increments on the sides instead of having them be at full-length. However, after assembling all the pieces together, the areas that do not have velcro leave a small hole which can be seen in the last image. From this, I had another consideration to think about: how can I effectively use velcro or maybe even other materials without making the booth feel low-budget, cheap, and messy? (insert photos) caption: First mock of the booth’s physical form Here, I have the second mock of the booth which has the inclusion of a side compartment that will allow the wirings and cables to be stored and hidden. The side of the wall compartment (left) is where the monitor and lights will be located on. Instead of being on the wall across from the opening, having the monitor and lights in this new direction will allow the video recordings to have a much more simple and clean background. Like before, since this material is still foam, I had to figure out a better method of using the velcro. Initially, I felt that using a full strip of the velcro would make it a little too hard for the disconnection process, but after noticing that some pieces would just fall off due to the inconsistent surface of foam, I decided to use full strips for better placement and durability. In the end, this also fixed the problem of the small holes between pieces in the last mock-up as now the walls are more clean and uniformed. (insert photos) Caption: Second mock of the booth with updated dimensions as well as a side compartment Concept Board, SketchUp Model, and Materiality This component of the project is where I became more specific. After looking at the notes from the Quaker Valley meeting with the teachers, a new list of requirements and considerations came up. For example, the booth had to be 40" x 31" and have a black interior and a white exterior. This was quite different from what I initially had planned out as now the size is much smaller from what I had mocked up before, and the different colors between the interior and exterior were going to be a challenge as well. From this, I came up with a concept mood board that helps visualize specific components and materials of the booth and how that will all come together. In this process, it also allowed me to come up with a list of possible materials to get which changed quite a lot over time. The most difficult materials to choose were the light system and the monitor stand. Due to the new size constraints, I had to figure out how to place a monitor that doesn’t feel too intrusive to the space while also finding a way to implement a light system that is also aware of the space limit. During the process of figuring out materials, one of the most important considerations was the material of the overall booth. We were looking for materials to fit the criteria of being sturdy, light-weight, easily manipulable. From this, we narrowed down with foam-core and gatorboard. However, after experimenting with gatorboard, we noticed that it is much more fragile than foam-core as any fall would result in the board chipping. The board was also much more expensive than foam-core and not as accessible. There was also a benefit to using foam-core instead of just foam as only the sides have foam with the main front and back being covered with a consistent flat layer. From this, the velcros that are attached here will not come off as easily compared to those on the inconsistent foam areas. insert photo Furthermore, in SketchUp, I create multiple iterations of the booth model with the final version being the one on the right. Here, it fits into the 40" x 31" requirement. Initially, I had 40 inches being the wall with the monitor and lights, but then I changed it to 31 inches and 40 inches for the width of the booth to account for the side compartment as well. From this, the space between the user and the screen will be just about right and maybe a little tight but better than the other options. For the top of the booth, I also looked at an IDEO guide and created this frame that will provide the booth with stability at the top especially since the rod for the curtain will apply some tensions to that area. In the guide, there was also a frame for the bottom, but in my model, I decided to exclude it as it would make the already limited ground space feel more cluttered as well as take away from the minimal aesthetic of the booth. (insert photos) caption: SketchUp Models Booth Dimensions and Cut Template After finalizing the size and dimensions of the booth, I created a dimension sheet of all the components of each piece as well as a template for how each piece will be cut from 96" by 48" pieces of foam-core. We initially had ordered 8 pieces (4 whites and 4 blacks), but I was not sure how well everything would cut from the first try in the woodshop, so I made outlined templates to help make the most use out of each board especially since they were quite expensive. Also, each piece was only 0.5" thick, which would be not as sturdy as we wanted them to be. To account for this, I decided to combine two layers together making it 1" thick, which also allowed us to check off the requirement of having the interior being black and the exterior being white. (insert photos) caption: Specific Booth Dimensions and Templates for Cutting Woodshop: Cutting and Assembly Our plan initially was to cut each board with just a blade, but I found that to be too inefficient as well as hard to cut neatly and precisely since the boards were so big. From this, I decided to transport all the boards to the woodshop in the School of Architecture where we were able to cut and resemble all the boards in just two days of working (around 6–7 hours each day). I’d imagine it taking much longer doing this by hand as the material is actually quite hard to precisely cut, and that there would more likely be errors and issues when cutting the material. (insert photos) caption: Cutting Foam-core to Booth Structures For assembling all the pieces together, the majority of it was done through velcro. In our first small mockup, I noticed that having increments of velcro instead of full strips would create holes that light could come in. However, in the full-size, it was much less noticeable, and since the walls are so big, I decided to go back to increments as it would be much easier to take apart in the end. For the booth framing, it was put together with hot glue then attached to the interiors of the booth through velcro. (insert photos) Assembly! First Iteration Assembly This is the final outcome of the booth. I am quite happy with how clean it has come out, but there are some areas that I could touch upon. I was also able to install the new stand with the light standing on a monopod. It works out perfectly as it is minimally installed into the space, and the distance between the user and screen is actually not as close as I expected. The current pole we have for the curtains work okay, but I am a little worried that it might fall off if any pressure or quick force is put onto sliding the curtains. For the next iteration, I will look at more options for the curtain as well as making the overall booth more durable with maybe wood framings that hold the exterior sides of the booth. (insert photos) caption: First Full-Size Booth Iteration Assembly with Interior Components Reflection Overall, creating a booth at this scale was not as easy as I expected. At first, it looked quite simple to cut and assemble everything together, but when everything is at such a big size, there are multiple considerations and calculations to make to ensure that everything comes together as you wanted. Here are some reflections of what I learned from this first iteration as well as how that contributes to what I might do differently in the future for the coming iterations. Transporation: 96" by 48" foam-core is actually quite big and heavy when you have 8 pieces of them. Initially, we had them delivered to the Human-Computer Interaction Institute at Newell-Simon Hall. However, because we decided to use the woodshop, I had to transport it all the way to the College of Fine Arts, which is quite hard as I had to take the long way to do so since it wouldn’t fit in some areas with staircases and halls. So in the future, I think it is important to quickly decide where this is going to get build, where you can easily store it if you do not finish, and how can you transport this back and forth and have those plans ready for when you are going to build. If we find something similar to the adjustable panel trucks that Home Depot has, then this would greatly aid the transportation of the material. Cleaning Up: Another thing I noticed after I put the booth together was that I forgot to use sandpaper to clean up the side edges of the cut pieces. While the tools in the woodshop allow precise and clean cuts, there are still some rough edges as well as extra materials coming off, so in the future, I should sand all the pieces before attaching them to velcro and assembling them all together. Furthermore, because I only used increments of velcro instead of entire strips, it leaves some openings between boards. While it is not very noticeable, I need to figure out ways to make it much more cleaner which could be done through possibly gaffer tape or some other thing. However, methods like these would only work after the booth is assembled, so it would have to be taken off every time it is being disassembled and then added back on when it's being installed again which might be a hassle. Attachment: Lastly, I think this is one of the most important considerations as this is how the entire structure is held together. At the moment, we are using velcro on foam-core which has some components being flat, clean surfaces, and others being just foam. While the velcro sticks on well on the flat surfaces, it becomes a problem for the ones sticking onto the foam. When I disassembled the booth in the woodshop to be transported to the HCI lab, I noticed that some of the velcro pieces started coming apart. From this, I need to figure out a solution that can make the velcro have a stronger attachment to the foam areas or just create a careful method of disassembling the pieces to prevent this from happening. Also, during the building process, I noticed something else. By incorporating velcro, it adds a visible amount of material that needs to be counted when calculating dimensions. When I made the roof of the booth, I didn’t take this into account, so from that, I had a roof that was slightly smaller than what the booth needed. From this, I need to continuously remember that velcro will always add additional dimensions which can be a hassle to add into calculations but is necessary if you want the outcome to be accurate, clean, and appealing. |
Blog chronicling project activities and student work.
Areas
All
Archives
May 2021
|