Preface: Im writing this is because I want to help Xfinity create a refined experience, tranquil consistency, and gracious flow for their customers.
After a long, Labor day weekend in the mountains, I was exhausted when I got home. After a much needed nap, I scratched my eyes and sat down at my computer to do some catching up on Vice news. I have been using the Xfinity Stream web app for a little over a month now, and I have run into some usability issues that needed some serious attention.
In this article Im going to do a UX review of their existing web app, one of the main problems I noticed with the Xfinity Stream app, and how this issue could potentially cause them to lose customers. Lastly, I’ll go over a few ways that the UX and interaction design could be improved as we apply Design Thinking to the issue.
In the image below, you’re going to be looking at the end of a Vice News episode. The ending credits are wrapping up and I have wiggled the mouse so that I’m able to view a list of my next options on the screen [ie, expand icon, previous/next :30 icons, pause icon, progress bar with remaining time, title of the show, info icon, exit icon, settings and comment icons, volume icons, etc].
OK! Now, I want you to take 5 seconds, pull out your phone and time yourself to see how long it takes you to answer the question Im about to ask you, GET YOUR STOPWATCH OUT!
How would you get back to view the previous episodes in this series?
Ok now lets be honest, how long did it take you to find out how to go back to view more episodes?
- If you answered more than 5 seconds — it needs work.
- Were you able to find any icon / button that would lead you to believe if you clicked it, you would be redirected to another screen? If you answered no — this UX needs some work.
- Would you like more time to feel the app and click around a bit to see if one of these buttons, or icons will take you to the screen you’re looking for? If your answer is Yes — then this is an example of UX that needs some refinement.
I know what you’re thinking, “John, just click the ‘Last watched button and It will take you there.”
Well ok, lets say for example that I did click that button, having not really watched anything recently. The screen would look like this.
Ultimately not taking me back to view previous episodes in the lineup. At this point I feel very confused. Some of the other feelings I have while trying to figure this out…
- I feel stupid that Im not able to find my way back. As a user I feel like I should know how to do that within an app Im semi-familiar with. Finding my way back, is something that should be so easy and obvious that I shouldn’t even have to think about it.
- I feel frustrated after I feeling stupid because I start to question myself. I start clicking around on random icons to see what happens when they’re clicked, creating more interactions between myself and the app ultimately creating more confusion.
But wait there’s more!
By the time I get to the Exit button and Its clicked, 20–30 seconds have gone by and now I’m presented with this screen. I dont know weather I want to go through that long process again, or drop off and go watch Netflix.
This screen STILL doesn’t show the episodes of Vice News I was looking for. I then have to click on the Vice News card in order to navigate to view the episodes in the line up. Creating a ‘back door’ way of achieving my goal. Too many interactions here and not a good flow for the user. There needs to be an easy way to get back to the series of episodes after the conclusion of one of the episodes in the series.
As a user, I dont want to have to go through all these separate interactions within the screen if they’re not necessary. Too many interactions creates confusion and users become ‘lost in space.’
How can we solve this problem using the Design Thinking Process?
- Empathize / Define: Asking the right questions during a ideation session. For example, “What will the users be doing once the credits come on the screen?” or “How will the user know that they cant go back from this screen”. If the user sees this screen, we have to assume that the user will either want to view more episodes from the current list, a previously watched list [like they have], OR they will want to end their session and log out. [Maybe they’ll want to change some language settings and adjust the volume so those specific interactions will make sense , but no more than that].
- Ideate / Prototype. Share Ideas, create mock-ups, and Test, Test, Test — Test the solution. Have a control and a variation, give the user a goal, watch them use the product. If it works, roll it out into production if it doesn’t, come up with a different strategy.
- Knowing how your users use your product — For example, if Xfinity is using google analytics, or Full-story to track their users behaviors, actions, and habits, they can use this to their advantage to refine the experience based on that data collected.
- I dont think Its as easy as putting a back button on the screen and calling it a day. If a back button, or icon is the way to go here, it needs to be tested with a large sample size to prove it out. What did the test results show? Why did the results turn on the way they did? What did we miss?
Part of me wonders if the Comcast UX department just simply missed this problem, or they’re still working on a solution.
Either way, I feel better now having done a deep dive on how this effected my experience with the app and trying to provide some meaningful solutions on how Xfinity can improve the experience overall by using The Design Thinking Process.
Being patient and asking the right questions will always help steer you in the right direction while you’re seeking the right solution to a use case like this.