HCI Project Team: I A.M.
Our project topic covers students who struggle with having their names mispronounced (particularly in a classroom setting). Our goal is to prevent this occurrence, and to foster a positive relationship between students and professors.
Link to the project here.
Link to the project demo here.
Task 1: Creating personal profile including name pronunciation + cultural context/origin
This interface allows users to create a personal profile for themselves. Firstly, users are asked to login with their email and password, or create an account. They also have the choice to select a button that says “remember me.” Next, once they press “login,” they press the big plus button labeled “create a profile” and enter in the information about their name. They enter their name, preferred name, and pronouns manually in text boxes, and press next. On the next screen asked to select the country that their first name originates from using a dropdown menu. Users are also asked for the cultural context of their name (e.g. what it means in that specific language), and are given the ability to record the proper pronunciation of their name by clicking on the button with the red circle. Then they can stop the recording by clicking on the button with the black square, play back the recording by clicking on the button with the black triangle button, and start their recording over using the button with the arrow. Finally, users are asked for the phonetic spelling of their name which they can manually type in. Users can proceed to the second portion of the form (for their last name) by clicking on the next button. The form for the last name is exactly the same as for the first name, and users are given the ability to return to the first name portion of the form using the button above “Last Name” titled "First Name". Once users have successfully inputed their last name, they can click the "create" button, which will create their user profile.
Upon creating their user profile, users will be taken to their profile page. Here, there is a static profile icon, the individual's name, an edit profile button, a share button (which allows users to share their profile on social media), a run-down on the cultural context/origin of their first and last names, and the phonetic spelling of their name. Users are provided with a speaker icon (which essentially has meshed their first name recording and last name recording together). They can upload portraits or profile pictures by clicking on the portrait button and selecting pictures from photo albums. Once a profile has been created, they will see the button “edit profile” at the top right corner, which they can click on, and get an overlay that will allow them to edit any information entered. If they want to create even more profiles, they can press the giant “+” button and repeat the process. Additionally, there are buttons titled "email" and "link" which allow the user to draft an email or to link their AM account to an external platform (e.g. Canvas). If a user clicks on the edit profile button, they are given the ability to change any of the information that they provided while creating the form. They can then select the “Done!” button to save any changes that they may have made to their profile.
Task 2: Draft emails with our template and send profiles, links, and messages to professors, TA’s, etc.
Once a user has made their profile, they can click on the email button. After they do, they will be brought to a Gmail integrated screen. There will already be a template with an email to write to a professor or TA, with AI integrations based on the profile the user creates. For example, the email might say something to the effect of, “Hello, my name is Yasmín. I’m contacting you because my name is commonly mispronounced. Attached in this email is a recording of my pronunciation. You can read and learn more about my name here [hyperlink].” This screen largely follows the way Gmail is already laid out to emphasize standardization. At any point, the user can edit the email and personalize it, before adding the recipients at the top of the screen. This is the same as any other emailing platform where users can copy or blind copy recipients. If at any point they want to discard a draft or a mistake they made, they have the option to discard the draft by clicking on the button right next to the send button. The recipients are placed at the top of the screen because the top-bar allows for a sense of separation from the rest of the text, and follows principles of Gestalt. At the bottom right of the screen, which follows principles of Western reading practices and standardization, there is a send arrow button, which is also illuminated by color. Error recovery is supported by the ability to press “home” at any time and discard the email. Once a user presses send, they get a message that confirms that their message has been sent and gives them an opportunity to return to the home page. In the future, if they choose to read the responses from their professors, it would take place not on this site, but wherever else they read their Cornell email so as to uncomplicate things. They can choose whether they simply want to interact with the Gmail interface or want to go back to the main menu.
3. Linking profile to different educational platform/softwares (e.g Canvas)
The users have the option to link their profile to the chosen educational platform or software by clicking on the “link to educational platforms” button under the profile page. The users will immediately be able to see it after they have finished up their profile. All the information about where to link and how to link will be on a separate page to avoid confusion. This design choice offers clear visibility for users because it compromises complexity to make sure the users are not confused by the amount of information being displayed. It is also a showcase of constraint, where the design chooses not to give the users lots of options to allow better flow. It also has the same hierarchy and visual element as the “email” function described before, so the users know that the two functions are two distinct functions parallel to each other.
After the user clicks on “link to educational platforms” on the profile page, they will be directed to a page with instructions to link to their preferred educational software. If the users accidentally land on this page, they can choose to go backward by clicking on the back button on the upper left corner, which showcases the interface’s error recovery ability. The page itself describes three main steps that the users should take: 1) ask the instructors to embed I A.M to the educational platform; 2) confirm the profile that will be displayed on the educational platform; 3) select the desired educational platform and export by clicking on “link”. The steps will be clearly numbered in the same way so it is more consistent and visible for all users. The steps will also follow Gestalt’s principles and be in proximity to each other, so that users can easily follow along. It will also respect people’s visual habit of looking from up to down, left to right.
Before the users perform any steps, they need to double check whether their instructors have embedded this tool on the course page. If the tool has not been confirmed implemented, the users can go back to our page and choose “send request” to draft an email that contains information about this tool, why they should use it, and how they can implement it. The users will be able to edit the provided template to customize the message, and this “send request” function essentially works the same as the “email” function described above. If the instructors happen to land on the page first, they can click on the “instruction on how to embed” to be directed to a page where they can learn about how to incorporate it into their class environment. This functionality speaks to the contextual user experience dimension because it allows different stakeholders to all be able to interact with it. Once the product has been embedded into educational platforms, the users will come back to the page and confirm that the correct profile will be displayed. If not, they will be able to go back to the previous page and edit it. The final step will be to choose an educational platform to export to from our drop down menu. The users also can type in their platform to search for it in our list. The drop down menu is constraining on what platform users can choose to avoid situations of a text box where the users arbitrarily type in random platforms that the product doesn’t partner with. Finally, the users will click on “link!”.
Once the users click on “link!” on the profile page, they will be directed to Canvas, where a pop-up screen will appear asking them to select the courses they want to export their profile to. Below, it will show the courses that support the product with selection boxes right next to them. The users can select multiple courses, which responds to the contextual UX dimension because users may want to have their profiles displayed on multiple course pages or they may not be comfortable sharing the profile to all the courses. It differs from person to person, and this function maximizes users’ control. Once they have selected all the courses they wanted, they can click on “confirm;” if they don’t want to confirm at the moment, they can click “discard.” The “discard” option respects the usability principle of error recovery, and gives people options to undo. The text of “discard” will be smaller than “confirm” to establish hierarchy. We believe users will need the “confirm” button more often, so it will be on a higher priority.
Once the users have clicked on “confirm” on the previous page, their profile will automatically show up on the course pages of their choice. If they go to one specific course page, they will be able to see the “I A.M” add-on on the left. Clicking on it leads to a page with all the profiles of people in the same class that have created a profile using I A.M. The instructors can also create their own profile. Each profile will be shown in a box, containing elements like text, audio play, and a button leading to the respective I A.M site. On there, other people will be able to view our users’ more detailed profiles. The design choice of making each profile into a box responds to standardization and natural mapping. Users will immediately know what is going on and be able to scroll through each profile. It is also related to Gestalt’s principle of similarity, where each item is similar in shape and format. This function responds to unique context, and is specifically tailored to people who have never used I A.M. The users are free to scroll up and down to browse other people’s profiles.
4. Consulting the resources page for the purpose of the project + mental health support
The users can navigate themselves through the navigation bar at the top right corner of the website and be directed to the resource page to access information that is helpful for them to consult when they perceive emotional changes related to their experience of mispronunciation. Considering the nature of this resource page, it will mostly contain information that the users can interact with by actively performing selection and browsing tasks. There is a large plain text field that is filled with an introduction of our product and a rationale justifying the goal of eliminating mispronunciation and the importance of identity recognition and mental health regulation. There is a subtitle “Tips to boost your mental health when you are feeling” underneath the introduction block which directly expresses the theme of the page.
There is a list of emotions that users may feel given the above scenarios. The users can find relevant content about common mental health issues or feelings that the experience of living through micro aggressions may cause clicking on the headers labeled with different categories of emotion. Original content is listed underneath each title for the users to access. Another interface element that is defined in this content block is accordion. Instead of listing all the links under the headers and letting the users scroll down the page to look for desired information, an accordion for each emotion label creates stacked lists under each header for the convenience of information consumption. The design follows the Gestalt design principles that organize the contents on the resource page by their proximity and relevance. Given all the above elements on the resource page, the product will be more comprehensive and effective for its ability to provide solutions beyond simply the higher technological levels but also resolve the problems jeopardizing the user's internal feelings and emotional experiences.
Design Rationale
The changes we made to our design were based mostly on our paper prototype, though there were some things that we realized needed to be integrated or adjusted once we built out the paper prototype onto Figma. We had the feedback that we could not go back to the last pages or recover from errors, so overall, we tried to implement pages that say things to the extent of “back to xx page.” One user mentioned that they would also appreciate having a “preferred name” and “pronouns” section, so that users can enter that information and feel like it’s inclusive across genders. Another user mentioned that people from certain cultures have middle names, which we hadn’t accounted for. Our “create profile--general information” page enables users to enter multiple middle names. For each part of the user’s name that they enter, a page will be generated for them to enter more information. If a user happens to only have a first and last name, there are only two pages for detailed information. Based on another conversation with a potential user, we learned that it might be difficult for people who are unfamiliar with phonetic spellings as a concept, especially for non-native English speakers to generate the correct phonetic spelling on their name. In order to keep the design simple, but still take this critique, we will be offering resources on the FAQ page to guide the users through the process. Under the phonetic spelling boxes, it now says “more resources on phonetic spelling can be found on FAQ page.” On the “How to link to your educational platform” page, we shifted the layout from a combination of vertical and horizontal dividing boxes to only vertical scrolling. This follows principles of Gestalt so that the eye moves more naturally down the page. Users mentioned that we should incorporate our mission somewhere to augment the impact, so we put it on the home page. The last think we did was add more overlay boxes to provide feedback for users if they successfully completed or failed the subtasks at hand. We felt confident in our use of dialogs, text fields, cards, and buttons, but the error recovery and constraints needed to be appealed to more.
As for new functionalities and features, we added an FAQ page based on user feedback to include information about how to utilize the product so the visibility is simple for questions and constraints are appealed to throughout the site. The login function allows us to divide users into new and returning users, allowing for us to separately tailor each experience. Multiple profiles were based on our persona guidelines of a social person who might want different profiles in distinct scenarios.
Prototyping decisions
The prototyping decisions we made can be classified under different categories. For appearance, we made the filtering decision of having the following fonts. Shadows into light was a stylistic choice to make teenagers and college feel at ease, and keep the site from feeling too serious. Roboto Light is professional and a bit easier to digest, so we used it for more text-heavy and important onboarding content. As for the color palette, we filtered in a simple, warm, and youthful color palette that would feel friendly and inviting to the eyes. We also filtered in larger-sized elements so everything can be seen clearly. A consistent navigation bar was central to our goal of making the experience relaxing and easy to consume and navigate.
Filtering decisions can also be typified by their relation to content. The resources page uses real content, which is important to understand since it is a reading-based page. The login information and Yasmín’s profile are made up for the prototype only (partially filtered out). Users of our prototype don’t have to put in their own information. Similarly, only a couple countries are listed at the moment, just because it would have been very difficult to get them all now. Users can only select Canvas on the LMS page, since we could best demonstrate the UI of Canvas with our knowledge. Furthermore, everything in Canvas was made up for this demonstration, but ideally, it would vary from course to course. Users could only use Gmail for drafting emails, which could potentially be subject to change, but the email templates are actual text filtered in that we would want to use.
As for features and functionality, the FAQ page is under development, and isn’t quite working at the moment. The specific instructions for logging in have been filtered out momentarily as this was a new addition to the prototype. The “share to social media” feature on the profile overview page is not yet available. Users are not able to input their own information for logging in, which doesn’t really affect the usability of the prototype. Furthermore, the recording function is only for show, as are the features on Gmail like “blind copy.” These were filtered out because we believe they are standardized practices our users already know how to do.
Interactivity-wise, there were a lot of things that got filtered out. Users cannot input information on a profile, record the pronunciation on the profile, select other countries than China, and other things that were aforementioned. For the resource page, we filtered out the majority of information in the accordions to provide for a more effective and neat information-review. A user can only select Yasmín’s profile to export to LMS, but in reality, they’d hopefully be able to choose more than one at a time. As for Canvas course selection, the user can only link one course at a time in order to prevent user from mis-selecting course. On Canvas, for the time being, users cannot interact with most of the functions. They can only view other people’s profiles. In reality, we would want to filter in interactivity here.
We made the implementation decision of using Figma as our material because it has medium-high fidelity and is especially perfect for web interaction. Most of our implementation decisions dealt with resolution. It was crucial to us to use images to add to the aesthetic and break up the graphs and text with something fun and engaging to see. We lay out the actual instructions for users on the resources page instead of using placeholders, which we felt was important for users to understand. We also took the Gmail template from the Figma community and created our own high resolution Canvas UI to give users a sense of familiarity. We have a couple of pages listed as “under development,” which is definitely low resolution as they are irrelevant to our four tasks. The mood of the prototype is correct in terms of resolution. It feels warm and comfortable as intended.