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
Leave a Reply. |
Blog chronicling project activities and student work.
Areas
All
Archives
May 2021
|