Reimagining the Peek Movies & TV Shows App Experience
The Problem
The Peek Movies & TV shows app aims to create a space where people can share their reaction about movies and tv shows, see what their friends are watching and discover new content to watch. The problem is that the app had usability issues and the overall visual design wasn’t cohesive.
Project Goals
Increase the number of people using the app
Encourage people to social more within the app
Keep current users engaged who are already on the app
Update the user interface to have a more modern and cohesive look
My Role:
Product designer, team of 2
Conduct secondary research
Plan and conduct usability testing
Update the app UI
Design Process
This project took place over the course of 6 months where I partnered with another designer and worked closely with the development team who created the app.
Usability Testing
I created a usability test plan and co-conducted in-person usability testing. In-person usability testing was the best way to get insights from participants and allowed us to view participants actions and reactions to the app more easily.
We also wanted to gather background research about how people get information about what movies and tv shows to watch and how their overall experience was with the app. I created a pre and post test questionnaire to use with the usability test that helped find out more information about Peek users.
Collaborating on Solutions
We shared our research insights with the development team and solutioned to solve issues collaboratively by using the “how might we” approach, which allows for team brainstorming on how to solve problems. During this time we also talked about additional design ideas that could improve the app before starting the redesign.
Wireframing & Applying Research Learnings
Sketching and wireframing were done to address potential solutions before creating a high-fidelity prototype to use for testing. Below are some design enhancements that were made based on the usability test learnings.
Making it easier to comment on a movie or tv show by simplifying the user flow
Making it easier to view information about a movie so that a person has enough information to decide whether they want to watch it
Enhance the way that people view their friends’ movie reviews because opinions from people they know are influential in determining what they will watch
Further Usability Testing
After creating high-fidelity screens, a prototype was created to test the new app design with users. Because the testing was done on a laptop computer and not all of the components were clickable, participants did have some trouble using the prototype.
Final Designs
Once the second round of usability testing was completed I updated the design further using Figma. When designing it was important to me for elements across the app to be consistent.
Homepage
Through testing we learned that crafting a personalized experience was important for people.
On the homepage we really wanted to highlight content that would be specific to each user and tailor the app experience to help them discover movies and tv shows they may be interested in.
Including a section about what movies were recommended by friends was included because we learned that this was important to users.
Movie Page
Some of the information on this page was reorganized to improve the visual appearance and group similar information together like the share and like buttons. The design of the React button is meant for it to stand out and catch the user’s eye.
Discovery Page
The content of this page had originally been on the homepage of the app. We found through usability testing how important it was for users to be able to see what their friends were watching, and we wanted to make this content easy to access. The text on this page was increased in size to improve readability.
React Feature
During the usability test we found that users had trouble using the react feature. We improved this feature by making it easier for users to select what audience should see their post and making the comment section more apparent.
Light Mode
There was also an interest from the team in having a light mode version of the app. There were some challenges of creating the light mode second while still keeping the new style of the app. One of the challenges was having to choose new colors while still maintaining the style of the app.
Lessons Learned
Looking back, it would have been better to test with the prototype on a phone rather than a computer. Because not all of the components were working on the computer, it caused confusion for some users.
I learned that frequent communication was best and continually showing my work for feedback and input when working with the development team on the UI.
