Streaming TV
Improvements to the design system for a streaming video on demand service.
Business Goal
Update the TV Application so that it feels more modern and relevant.
Role
UX Designer
Background
Hallmark Movies Now (HMN) is the Streaming Video on Demand Service for Hallmark Channel content. Over the past couple years HMN has been undergoing rebranding on the website and was starting to evolve the applications for all the other devices.
The TV applications have been untouched for a while and definitely needed some love. The original scope of this project was to give the app a "face-lift" with as little dev effort as possible. It was a great opportunity to start to build out the design system and sneak in some much needed UX improvements along the way.
Unfortunately, this project never got completed due to shifted business priorities, but it was still such a challenging and fun project to work on.
Persona
The persona that we used on a lot of other Hallmark Movies Now projects is Carol. Carol is everyone's image of a sweet older lady who is a hopeless romantic at heart and enjoys spending as much time with her family as she can. She also is a huge gift giver and appreciates a good thank you card for all her efforts!
“I just want watch wholesome movies without fidgeting with the remote”
Reframing the Problem
How might we help Carol focus more on the content and less on the interface?
Preliminary Research
In order to fully understand this project, I had to dive into the world of TV user experience. One of the biggest differences I noticed from other projects, was the limited controls that are available to the user. I found that although it was challenging, it really wasn't that different from designing accessibility controls on a normal website.
I did a lot of research looking at the experiences of competitors and understanding our existing app. I connected with developers, explored the current experience, and asked a ton of questions. There were a lot of things I noticed right away that I wanted to improve, but I also knew I had to be very smart with the prioritization of these fixes due to the nature of this project.
I worked very closely with the Project Manager and discussed my initial research and the things we knew we needed to update, like the design system. We also talked about how some of my initial recommendations might actually be easier for the developers as well as improve the experience for someone like our persona, Carol.
I was able to understand the perspective of the Project Manager and communicate to their needs while being an advocate for the user. This sparked a lot of support and trust from the team, allowing me to provide other UX recommendations along the way.
Wireframes
Once I was aligned with the team, I started outlining the happy path through the experience, which also helped inform the epics in our Agile process. This included logging & signing in, browsing, looking at title details, interacting with the video player, and changing account settings.
I then brought some of the main pages and flows and started to get some concepts down on paper. I started all of my sketches with something very similar to the existing app so that I could understand what it could look like with just visual updates and then I started exploring how it could be improved even more.
This is one of my favorite parts of the design process because I get to expand on ideas and explore everything I want to before beginning to narrow it down on based on feasibility.
Design System
Once I had the designs somewhat fleshed out in terms of what elements were needed, I explored the visual design system. I designed the buttons, text input fields, navigation elements, typography styles, colors and patterns for implementation.
With all of these elements, I began creating a reusable style library and symbols within our design tool so that we could potentially iterate in the future.
Prototyping
I incorporate prototyping whenever possible. With this project, prototyping was especially valuable because it helped both the team and me visualize how navigating with just arrow keys would truly feel.
It also sparked some conversations around iteration and continued the conversation of updating the experience as well as the visual design.
Outcome
Unfortunately, there were a lot of business changes and reprioritization that resulted in the ending of this redesign. I had hoped to continue iterating, testing with users, and refining the TV application experience.
Although this project had an abrupt ending, I am still very happy to have worked on such a different type of project. I gained so much experience in learning how to design for the TV.