Shutian Wang UX Design

Communication 360
Tutorial App
Background
This is a team project for the INST362 User User-CenteredCentered Design course.
​
Team members and their roles:
Shima Abdulla: Recorder
Vanessa Gomes: Value Leader
Henry Stought: Tech Support
Shutian Wang: Outreach Coordinator
Hannah Zhrebker: Project Manager
Shared Values
1. Responsibility
2. Communication
3. Honesty
4. Collaboration
5. Kindness
6. Inclusivity
7. Integrity
The Problem
-
Groups such as children ages 11 and under and elder adults ages 60 and older are facing difficulties learning how to use communication platforms such as Zoom, Discord, etc.
-
Prior to the pandemic teachers and other family members could have helped them through this process but as everything has shifted remotely these previous sources of assistance have disappeared.
-
These groups are unable to utilize the platforms and thus are unable to communicate with others who may predominately use the platforms.
UX Method Used
-
Brainstorming
-
​Prior to beginning the prototyping process, our group utilized a Miro board in order to brainstorm ideas that bought us joy. As individuals, we listed products, applications, and entities. Miro provided us a platform to work collaboratively on one board whilst still maintaining that individual element so that we could see our individual viewpoints. After creating this initial brainstorming board, we came up with the idea of developing an educational application that teaches users how to use communication platforms. This idea originated from the fact that we all enjoyed speaking and communicating with our peers and currently the only way to do so is virtual.
-
-
First Round of Interviews: Contextual Interviews
-
​When we first completed our contextual interviews, each group member was tasked with finding four people to interview. During this interview, a series of background questions on the individual were asked such as their name, age, and occupation. After the background questions were asked, users were asked to utilize a specific platform. At times a user was given a specific task, such as opening a breakout room if they were completely unfamiliar with the program. Overall, these interviews aimed to examine a user’s interaction with the platform. These interviews also helped us identify common issues faced by users. After completing the interviews and summarizing our findings individually, the group shared their findings through a Miro board. Common findings included older users struggling the most with learning these platforms since they were fairly new and had no resources to learn about the platforms previously. Additionally, users were unfamiliar with how to navigate many of the specific functionalities of a platform. Beyond identifying the target audience a few issues that we would like to address through our application, the contextual interviews did give us insight on features that users preferred. Users preferred simple applications. This meant that applications should simple and minimal language and have a limited number of buttons and pages. Furthermore, users were very visually inclined. This moved us towards using visual elements such as videos and pictures to suit the preferences of the user. From an accessibility standpoint, all videos should include captions and all images should include alt text. Based on these interviews and our Miro board where an empathy map was used to come to these conclusions, we developed our low fidelity prototype.
-
-
Second Round of Interviews
-
​Our second round of interviews was completed after creating our first high-fidelity prototype in framer. For this interview, 10 individuals were interviewed, with each designer interviewing two people individually. All interviews took place in person. For the interviews, users first signed a consent form agreeing to participate in the interview. The consent form detailed the purpose of the interview as well as outlined what would be done during the interview, and what information was collected. For the interviews, a computer was set up with the prototype already open for the user. First, a user selected between two platforms, namely Zoom and Discord. Then on the next screen, a user-selected functionality of the platform they wanted to learn. The user would then be led to a page with either a video or image describing the functionality they are learning. Below the video or image was a text accompaniment for the video that summarized the steps discussed. This element was included so that users had the option to choose between using video/image or text to learn about the platform. We decided to keep the text part to account for people who may find the video hard to see due to Framer's limited screen size. After watching the video, viewing the image, or reading the text, a user was prompted to answer a short three-question quiz. On the next page, the answers to the quiz appeared. From here, the users completed their learning of the application. Next users texted what they learned in the app on the platform. Users were led to a separate computer where both Zoom and Discord were previously installed. The user then attempted to apply the functionality they learned. Whilst these interviews were occurring, we as interviews took notes and jotted a few keywords that were inputted as tags in our data collection form. This data collection form detailed the user in an anonymized fashion, the testing date, the steps/tasks performed during the interview, how long the interview took, whether the interview was a success or failure, problems that sprouted, and keywords/tags that came about during the interview. After completing the interviews, we, as a team gathered to discuss or interviews, we created a Miro board where each member described problems and potential solutions that were evident. We also discussed other key findings. In general, users liked how simple our application was. They liked the short quiz and simple text. They also like the buttons and the simple language. We did have comments asking us to use videos instead of images. This change was made in the final prototype due to the fact that we could add captions to the videos and users performed better after watching a video rather than looking at an image. Additionally, users wanted a description of the two platforms, which we later added. Finally, texts were altered based on the suggestions of the users. Alterations were made so that the app seemed more uniform. Additionally, we increased the font size and bolded certain elements to make it clearer as well.
-
-
Value of Iterations​
-
Throughout the course of this project, a major element related to the success of our project was utilizing the feedback received from both our interviews and submissions to alter the application based on constructive criticism we received. In addition to the prototype, we used interactions while working on the research paper and the consent form. Having an original document and iterating over this document made tracking our process much simpler
-
-
Limitations and Faults
-
One limitation that we encountered with our final high-fidelity prototype was that our platform, namely framer, limited us with regards to including accessibility functions. For example, including alt text on images was difficult or impossible to do. Additionally, since our application is a mobile application, we used a phone as our screen. The phone itself appeared small on the screen which made our videos and texts harder to read when compared to the text size if they been on an average-sized real phone screen. Also, users could zoom in on a real phone. Beyond the technical side to the project a limitation or fault discovered after completing our prototype was in the idea that our application was dependent on videos from outside sources. If these videos are taken down, then our application will lose one of its accessibility-related functions making it less universal. To combat this, we did include a textual description of the steps under the video but at times the text became rather long, especially for more complicated functions. Lastly, with regards to our testing groups are interviews were limited to our immediate circle thus the interviews may have been biased towards us. Ideally, had we not been in lockdown, we would have performed more interviews on a larger body of individuals from an array of backgrounds. This would ensure that our app has a universal element to it.
-

Final Lo-fi Prototype
High-Fidelity Prototype
​
Our hi-fi prototype was created using Framer. Our team used Framer because it provided the usability, collaboration, and user design aspects that helped convey our hi-fi prototype in a clickable and interactive way.


User Testing
Here are the series of tasks we asked users to do:
-
From the home screen, change the application language to any language you prefer then return to the home screen.
-
On the “Choose A Platform” screen, pick Zoom as the application you would like to learn more about.
-
On the next screen, pick the create/schedule a meeting option to learn more about how to use that functionality in Zoom
-
On the next screen, watch the video or read the description of the video
-
Navigate to the quiz on the next page
-
Choose your answers for each quiz question to the best of your ability and submit answers when you are finished
-
Once completed, view the results and repeat the quiz if necessary.
-
Go to the next page
-
Return to the home screen​
​
User Feedback


Final Prototype
Prototype Demonstration
Below is the link to the final prototype on Framer:
https://framer.com/share/Prototype--wBPvgVKGboKU4SyyUCis/f2YTx7xWa#f2YTx7xWa