Process and Insights

Creating Usability Tests

The creation of the Usability Tests were a collective effort between me, the UI Designer, and the Secondary UI designer.

Alpha Test: The Alpha Test was focused primarily on the Micro interactions of the ranking and the home pages of the redesign. We wanted to make sure that the micro interactions that we included were intuitive to the user. We also wanted to make sure that the home page that we revampd was what people envisioned when. Before entering a home page, we asked each user to tell us how the micro interaction would customize their home page and how they thought the home page would look like. I also quickly detected that we had our “Create New Profile” page linked to the Home icon instead of the My Stuff Icon. This was a chance for us to test users on what their mental model of the design was. Instead of telling our users where they should go, we saw where they first tried to click on, which was the My Stuff Icon. By doing this, we were able to make sure that we were placing our links in an area where our users would intuitively go towards. I personally tested three different users during the usability test.

Beta Test: For our Beta Test, we implemented a new onboarding process that needed to be tested. We wanted to see how our users would react to the slightly longer, and in depth personalization process. I was able to test 4 users for this round of Beta Tests. What I found within each of these users was that they enjoyed some of our implementations, such as the sub-genre page, but disliked our Cultural Preferences page. The Cultural Preferences Page we found was not disliked because of usability, but because of the lack of options. After the Beta tests, I met up with the team to discuss next steps on how to improve design and functionality.

Cultural Preferences Survey: When performing our Beta usability Test, we received much negative feedback on our Cultural Preferences page because of the lack of options and misrepresentation. In order to resolve this issue, I decided that we should put out a survey as to what cultures people would be interested in watching. Options ranged from Chinese to Japanese, and Jamaican to Italian. We limited the options to collect for Cultural Preferences to 8 due to the limits of the project. I organized the survey so users were able to pick their Top 8 cultures they would be interested in viewing as well as allowing users to input their own preferences that they did not see on the survey. I sent out the survey to different users, as well as the rest of the team. Later the UI and Secondary UI designer met with me to discuss the results and what should be included in the CUltural Preferences Page.

Card Sorting: The UX/UI team was curious about how people would rank the top navigation bar since each person has a different hierarchy system of their own. In order to better organize the Top Nav bar, I decided that a Card Sorting exercise with users would benefit us the most. I created the survey that our testers would utilize during, or after the meeting with their user. For the survey I included a ranking system to show how users would rank each category as well as to what they thought each Navigation category included. Each week I made sure that everyone was on top of getting their usability tests done while also initiating weekly meetings to make sure that designers and the developers were all on the same page for development. Sometimes this came as a difficulty due to the fact that our Primary UI Designer was in Japan for the entire project due to COVID019. Despite this challenge, we were able to set weekly meetings adjusted to both time zones. Additionally, each week based on the analysis we received from different tests, I was able to converse with the team on what changes to implement.

Micro-Interactions

During the very beginning of the process, I teamed up with the Primary UI designer and the secondary UI designer to figure out what changes to implement into the redesign of the Prime App that a previous team had done before us. Because this design was given to us by a previous team, we figured that it would be best to find the strongest and weakest points of the design and design of it’s microinteractions.

The first thing that I worked on was figuring out how to show that our ranking interaction would instantly tell the user that the options show can be draggable and ranked. The redesign that the previous team developed had each ranking option to have arrows to indicate that they are able to be ranked. However, a problem that I saw in this was that users might believe that the arrows are buttons. If perceived as buttons, then the users would be clicking onto them instead of dragging the options. I proposed that we change the arrows into three small lines to indicate that the options were draggable.

In order to make sure that this was a viable choice, the team of UX and UI designers underwent Usability Tests with users. We found through the Alpha and Beta tests that each user understood clearly that the three lines indicated that the options were draggable. We asked each user what they thought the page showed, and how they would be able to rank the options, while having each user perform the task. The tests confirmed that the three line idea proposed was successful.

Another microinteraction design that I worked on was the design on the home page Carousel featured at the very top of the page. The original design did not seem quite right. We understood that the intended effect was to create a look of perspective, but instead, it just distorted the photo. I proposed that we offset the images so the user would know that this is something that could be dragged to see more. By having the images offset, it sparks the curiosity in the user while also intuitively telling them that it is a carousel microinteraction. To make sure that this design was viable, it went into two rounds of usability testing, where it succeeded to let users know that it was a carousel.

Cultural Preferences Page

Since I am the Secondary Front End Developer, I had to assist whenever there was needed help on the Front end side. Most of the time our Front End Coder was able to manage, along with help from our Back End Coders. If needed, I was able to assist if there was a need for assistance. This occurred when we were developing the Cultural Preferences Page. This page was included onto the new onboarding process that had to be developed between one to two weeks. I primarily worked on the HTML and CSS for this page. I did not work on the micro interaction, but the Primary Front End coder managed that. The difficulty that I found when coding was trying to adapt to another coder’s code and their organization. Fortunately our Front End Coder, along with everyone else who chipped in to code are all very organized with their code. When creating the CSS for the Cultural Preferences, I happily found a new CSS code that I had never used before. It was the CSS background property that utilised ‘cover.’ This was a new concept that will be implemented in further projects.

Case Study

I worked on implementing the content of the case study into an HTML file. First what was done was to actually create the content needed within the case study. I worked on writing out the Overview, background, Increasing User Inclusiveness, ‎Reordering the Top Navigation Bar Categories, Changing the Bottom Navigation, and The Results sections of the case study. After writing those sections out and reformatting the order of sections within the case study with the UI/UI Team, the content was then implemented into the HTML and making sure that the case study had responsive CSS.‎The challenge I faced with this was that I had to look at another person’s coding that she has already done before and implement the content into it. It wasn’t difficult to replace the content, however being it being another person’s code, I had to learn how to adapt just like when I was coding out the HTML and CSS for the cultural Preferences page. With our comfortable dynamic within the team, it was easy to figure out what specific lines of code in the HTML meant. However it was different when it came to the CSS. I had to find out what was causing the pave to overflow and have a horizontal scroll. In the end, I was able to figure it out by debugging each line of the CSS sheet.

THE FINAL PRODUCT

Looking at our project overall, we made considerable changes and improvement to our critical path. We added and implemented various features to create an engaging and personalized experience for our users. We relied heavily on data and feedback from our usability testing phases to push us towards continuous iterations and revisions. These revisions drove us to expand our user personalization process to create a process that was overall more complete. By adding pages for age, genre selection, and cultural preferences, we were able to hone in on and include more user interests. These would then help the user’s home page be specifically tailored according to the choices they had made. We also considered the user during the personalization flow by implementing a progress bar so that they would know how far along they were in the process and how much they had left. In addition to that, we created additional screens to give users the ability to skip by clicking “maybe later” or to “go back” in case they wanted to revise their responses. These same screens also increased user emotions through animations like a hand wave, welcoming them to their new profile or letting them know they completed the process successfully.

User experience design methods governed our design thinking throughout this project. Some highlights from these methods aside from our usability testing sessions include using card sorting and surveying potential users. We wanted to make sure we were designing our product in a way that is intuitive to our users. We used a card sorting technique to pull responses about the order of our navigation structure. From it, we received helpful feedback which we used to restructure our menu. Another form of user experience we used was through creating and sending out a survey. This was to promote user inclusivity for our cultural preferences, and we implemented the categories based on those comments.

Lastly, we knew even little details should be clear to our users. With that in mind, we revised the names of our categories to avoid confusion on the personalization aspect of the product. We also changed the “My Stuff” page to “My Profile” and made the critical path start from that page instead of the home.

All in all, our final product is enhanced with setup personalization, micro interactions, and more clarity for a smooth and pleasant experience that tailors watch suggestions for each user.