About Vuelist
Vuelist allows people to organize all of their shows in one convenient app. Users can organize, rate, review, and take part in community discussions on their favorite television shows without being overwhelmed by massive amounts of information. Vuelist aims to put the connection back into the viewing experience.
Skills: UI Design, Research, Prototyping, Wireframing
Approach
Using Goal-Directed Design, my team had 8 weeks to craft a mobile design that streamlines the therapy experience.
Team Member
Tools
FigJam, Figma, Discord
Why Design This App?
This app is necessary because managing numerous watchlists across various streaming platforms is challenging. While existing apps offer convenience, the lack of sorting leads to frustration and disengagement among users. Moreover, these apps fail to leverage the social aspect of viewing experiences, hindering meaningful discussions and community engagement. Vuelist aims to address these pain points by providing a platform for organized watchlists and fostering social connections among television enthusiasts.
Vuelist was my first project; created for an Interaction Design I class at Kennesaw State University to teach students how to use Alan Cooper’s Goal-Directed Design (GDD) method properly.
About the Method
Goal-Directed Design (GDD) was created by Alan Cooper to put users at the center of the design process by thoroughly understanding their “desires, needs, motivations, and contexts” for using digital products (3). Cooper wants designers to focus on putting the humanity back into digital products. Each phase of GDD was made to ensure the end result of our design guarantees user satisfaction. When we successfully help the user achieve their goals, then we have made a well-designed product.
Given the 8-week time constraint, we modified GDD to include the following phases:
The Research
Pure researchers do not know how to approach gathering key user information from a design perspective and the isolation of designers from the users “eliminates empathetic knowledge” (Cooper et al., 22). To address this issue, Cooper suggests designers become directly involved in user research to encourage empathy in design. By designing from the perspective of how the user thinks, behaves, and feels, we ensure our product puts the needs of the user first.
Kickoff Meeting
Since Vuelist was a university project without actual stakeholders, we simulated a kickoff meeting to discuss the app's potential value to imaginary stakeholders. we crafted a problem statement and formulated assumption statements about how users could benefit from the app and how it could outperform IMDb, our primary competition. Ultimately, our team agreed that stakeholders desired an iOS mobile app prototype enabling users to create, organize, review, and share television show watchlists.
Literature Review
We saw the literature review as an opportunity to become as close to experts on the product as we could. As we conducted our research within the broad space of television, we found particular interest in the correlation between community-building and television watching. Ultimately, our research found television watching to be a means of social capital by allowing people to engage in conversations surrounding show topics.
Key Takeaways
The rise of streaming services has led to an increase in social media discussing and conversing about television.
Social media users have negative attitudes toward being forced to share; yet, sharing on social media drives social relationships.
Television organization apps value information over community.
Users will abandon tasks when overloaded with an abundance of information.
Users need to be able to review and discuss episodes within show-specific communities.
Users share information with their peers online to control their own personal narratives, socialize, and facilitate learning.
Participants answered questions based on organization, television viewing habits, and social connection through television. A majority of the participants rated themselves as well-organized but admitted they have a tendency to forget tasks that are not written down. In addition, four out of five of the participants admitted to engaging in fandom behavior such as: discussing their favorite shows on social media, rating and reviewing episodes, and tracking new season releases of television programs.
Following each interview, the team would pool our notes and look for trends that could be grouped as patterns through Affinity Mapping. Our team assessed how each participant related to one another in relation to each discovered pattern.
Kickoff Meeting Worksheet
Competitive Audit
It is no surprise the market for television supplemental applications is a massive one. Users are presented with a plethora of ways to organize their show-watching habits. We focused our audit on tools designed to provide the convenience of watchlist making: IMDb, TV Time, Notes, Google (Watchlist Feature), and Amazon Freevee. While all of these apps provide useful information and descriptions of shows, the prioritization of information over the utility of sorting lists and sharing opinions leads to a disappointing, cluttered experience.
From our audit, we learned that simplicity in our own application would set our product apart from the rest of our overly complex competitors. We do, however, realize taking this idea too far in the opposite direction would be equally as detrimental. Our team must find a middle ground between overwhelming data and simplicity to the point of uselessness.
Stakeholder Interviews
During these stakeholder interviews, the discussion informs “how user research is conducted” and develops a common language among everyone involved (Cooper et al., 39). As previously mentioned, there were no actual stakeholders for this project, therefore no stakeholder interviews were conducted. Instead, we expanded on the assumption statements made in our Kickoff Meeting worksheet to imagine what stakeholders might want.
The goals our design team imagined our stakeholders had for Vuelist included:
The reiteration that the focus of this application should be to create a digital environment that encourages users to share with one another and the formation of communities.
The stakeholders were averse to their product falling into any single television niche as they wanted the application to have broad appeal across fandoms.
A simple UI and overall design would be important for the application.
The inclusion of an overall rating system for the application.
User Interviews
Modeling Phase
In the modeling phase of GDD, the design team synthesizes their research to “create descriptive models of users”, also known as personas, based on the behaviors and patterns discovered in the research phase (Cooper et al., 62). Personas allow you to design for a specific type of individual and their needs thus accommodating more people. Using the research we found, we can craft a story that conveys our persona’s attitudes, issues, and needs. By creating a narrative for our personas, we manage to synthesize our research and develop a deeper connection that allows the design team to make more empathetic design decisions.
Behavioral Variables
Cooper states that while the number of variables differs depending on the project, it is “typical to find 15 to 30 variables” for each user role (83). Additionally, the continuum allowed us to see a visualization of how the primary and secondary persona’s goals and attitudes intertwine. Because of this, we felt it was safe to design for our primary persona’s goals without crippling our secondary persona’s goals.
We quickly noted subjects 1, 3, and 5 tended to cluster together, representing the enthusiastic viewer interested in online and peer discussions. Alternatively, 2 and 4 seemed to cluster more toward the low-to-middle range of our continuum, suggesting they are the more casual archetype:
As explained earlier, each behavior cluster unveiled itself as a representative of a persona. The cluster composed of interview subjects 1, 3, and 5 represents our primary persona, Bridgette. While the cluster composed of interview subjects 2 and 4 represents our secondary persona, Armaan. We ingrained these clusters into our persona’s personality and narrative. For Armaan, our secondary persona, the behavioral cluster “interacts with community” becomes Armaan “prefers to keep to himself” and “does not care to engage with fandoms or online discussion” but notes he only sees the value in social media for recommendations on what to watch next. We applied this same technique to Bridgette, our primary persona, as well.
Defining Requirements
Jumping right into designing showcases a self-interested mentality of what you personally like as opposed to what may be best for your user. Before we can begin designing the aesthetics and feel of our product, we must figure out the requirements necessary for our design. Using context scenarios, imagine how our product fits into the daily life of our primary persona, writing from their perspective to form our ideal user experience.
How did crafting this scenario help us?
We could now visualize the basic routes our users would take within Vuelist.
We could now visualize necessary user interactions within Vuelist.
We learn to empathize with how the user feels when achieving their goals.
I will say our requirements ended up being very general which required us to expand upon them more during the Frameworks phase.
Frameworks
During this phase of GDD, our design team began laying out wireframes using a Key Path scenario and Validation scenarios. How? By revising the context into a Key Path scenario that further describes “user interactions with the product” (Cooper et al., 106). Key Path scenarios focus on the paths users will utilize the most to achieve their goals. Validation scenarios are the paths used less frequently by our users and are less detailed than Key Path scenarios.
Lo-fi Wireframe
The main goal here was to sketch visual representations of our ideas so we could gain an understanding of the basic functions our product requires to accomplish our user’s goals. We wanted to make sure we had the basic routes laid out before transitioning to the medium-fidelity wireframe.
Med-fi Wireframe
The final wireframe successfully satisfied Bridgette’s, our primary persona, goals without harming our Secondary Persona. All of our requirements managed to make it into the frame with additional ones such as viewing episode details being added.
Hi-Fi Prototype
Our initial design had a plum color palette to minimize brightness. We didn’t want to overwhelm our users with bright colors. While our goal was to maintain consistency, our pages didn’t feel very cohesive. In addition, we did not originally use the grid as much as intended which led to margin inconsistencies. Also, a lack of reference images led us to design purely from imagination which led to a clunkier flow. We decided to consider this prototype as version 1 and create a new version of our design based on feedback received in usability tests during the Refinement Phase.
Usability Testing and Refinement
Refinement Phase
We carried out 3 usability tests over the voice call feature in Discord – reusing 2 previous participants from the user research interviews. Through their feedback, we were able to identify major problems with the framework, flow interruption, and other inconsistencies that may hinder our users from accomplishing their goals.
Participants expected the “What’s Hot?” cards to swipe as opposed to tap.
Participants did not like the plum color palette.
Participants found the icons confusing and suggested they be labeled with a more clear discussion icon.
Participants found the overall design to be inconsistent and readability difficult.
Participants noted they saw no use for our current discovery board; instead, they suggested the search function be implemented somewhere throughout the app.
Our home screen was not clear to the participants.
Overall, the feedback from our participants made us come to the conclusion we needed to do an entire redesign of Vuelist. Version 1 left participants confused and unclear of where to navigate so we need to make our goals more clear.
Vuelist V1 — Home, Details, Discussion
Vuelist V2 — Home, Details, Discussion
To craft Version 2, we first began collecting reference images to have a look at the industry standard for the average television/social media app. We need our app to comply to conventions by working similarly to how other apps generally work. By using these references, we eliminate the previous confusion our participants felt during usability testing.
Here’s a list of all of our changes:
Our color palette changed to a muted blue with a complementary accent color of light orange for buttons.
We combined the discovery and home page into one, adding a carousel to showcase the trending shows.
Episode and show cards featured a more clear “Add to List” or “+” button that changes to “In Watchlist” or checkmark when the user taps the button. This way the user is not confused about whether the desired action has been completed.
We added an action bar that includes a search, profile, and home icon. Our discovery page also routes to home; we felt allowing the user two paths to home provides constant ease of access to their main discovery page. Again, we wanted to eliminate any chance of confusion for our users.
We used Figma’s auto layout feature to create a swipe-to-delete feature for our notifications.
We added the ability to mark specific episodes as watched and participate in episode-specific discussions.
We changed our status bar to match the iPhone 14 Pro Max’s dynamic island.
Lessons Learned🤯
Design is not a linear process; it’s messy and requires you to be open to ever-changing ideas and expectations.
I must always practice empathy and step into the world of my user to ensure I am doing my best to make accomplishing their goals an easier task. Additionally, Wireframing is a messy process that requires keeping requirements, context scenarios, key path scenarios, and validation scenarios in mind the whole time.
Collaboration and communication are key to teamwork.
Working on a team and managing tasks is difficult so we should have utilized a Kanban Board more to remain on track. We also have to keep the lines of communication to foster an environment that allows for effective collaboration and design.
References and usability testing help inform your design decisions and minimize user confusion.
Reference images are your friend – In version 1 of Vuelist, our lack of reference images led to inconsistencies and clunky user interfaces. We should have conducted both our usability test and user research interviews over video calls to better observe behavior. If given more time, I would have liked to have done another round or two of usability testing for version 2 of Vuelist to make sure we have cleared up our previous participants’ confusion.
Works Cited
Cooper, Alan & Robert Reimann, David Cronin, Christopher Noessel. 2014. About Face: The Essentials of Interaction Design, 4th Edition. Hoboken, NJ: Wiley Press