Digital Product & UX/UI Designer
Charlie@2.png

Charlie

Digital Product Design • 2018 • Designer

Charlie is a multi-device digital interface that allows users to aggregate all their streaming services into one interface. Using an iterative design process in conjunction with user research and testing, I designed an efficient system that works on mobile, tablet, desktop, and TV.

My Original Idea

Create a television interface or product that can...

  • collect all the media you use and put it in one place

  • sort that media the way the user wants it sorted

  • be accessed on different devices

Phase One: Research

I started out by doing desktop research, learning about everything from competitors and how they do things, to how to begin designing for televisions. 

I conducted content audits and visual analyses of streaming services including Netflix, Hulu, and Amazon Prime Video. By doing this I was able to examine what users liked about the streaming services, and what could potentially be improved upon. I found that Netflix is the preferred streaming service for most users, despite their announcement that they are shifting to offering more and more original content. I also discovered that Hulu, although it provides a variety of shows that users want access to, the service is inconsistent and glitchy, which frustrates users. Both Hulu and Amazon Prime Video do not provide an immersive experience the way that Netflix does. 

I watched a few online courses in which Don Norman discusses gestural interaction, and how to go about designing gestures that are intuitive but not overly used. I read a couple great articles from Molly Lafferty on the basics of designing for and prototyping for televisions. Lastly, I read through Apple's tvOS Interface Guidelines. This helped create a strong foundation of understanding for a process I hadn't gone through before. 

All of this desktop research ended up being critical when I began interviewing users. I spoke with a few people one-on-one, who all had incredibly different television habits. One young woman I spoke with watches television mostly with her family, and it's an activity that they use to bond since their family is so large. I also spoke with a man who is always streaming something, and dislikes having to switch between services since he considers himself to be extremely impatient. Another man I spoke with has limited time and only watches television rarely, so he wants to be able to find what he's looking for as quickly as possible. My interviews yielded a few key insights, including that people pay for multiple streaming services because there isn't one that just offers absolutely everything they want access to, that switching between services is oftentimes 'not worth' the hassle so they'll continue watching something they don't want to be watching, and the process of browsing for content is often a frustrating journey for users. 

Phase Two: Prototyping

GROUP SKETCHING

At the beginning of the prototyping stage, our class completed an awesome exercise known as 'Group Sketching' that helped push all our individual projects forward. Each person wrote 2-3 short scenarios based on their project. We then broke into groups of 3-4 people, and spent 3-5 minutes sketching interfaces and ideas for each scenario. All group members would sketch interface ideas as quickly as possible, and placing the sketch in the middle, explaining their sketch if necessary. If someone else had an idea that built off of the sketch in the middle, they'd sketch that and put it into the middle. We each presented one scenario to the group, then switched up the groups and started all over again. 

fullsizeoutput_3282.jpeg

At the end of this process, we each had 30 - 40 sketches to work with. After affinity mapping these ideas, I had a multitude of possible interfaces and ideas to iterate on. 

PAPER PROTOTYPING

When it came to user testing, I started out with an exercise that our teacher, Adam, suggested. I created a variety of television elements including sliders, buttons, bookmark icons, rating icons, and small, medium, and large elements in keynote, then printed and cut them out. I then created paper tv, desktop, tablet, and phone 'screens' as well as a remote for users to design. I then wrote scenarios and gave them to users, and asked them to design their ideal screens or, in the case of a remote, products for the situation being presented. 

Throughout the process of designing, I had people explain why they were placing certain elements on the page. It was interesting to see certain people lean toward wanting to see absolutely everything in almost a 'God's Eye' view, while one user wanted a simple drill-down menu and only see what was absolutely necessary. 

 

Phase Three: Design & Identity

Icon used for the background pattern repeated throughout the interface

Icon used for the background pattern repeated throughout the interface

The design aesthetic, and ultimately the identity of this project, was inspired by the great entertainer, Charlie Chaplin. Rising to prominence starting in the early 1900s, Charlie became one of the most iconic faces of film in history. He believed in the power of laughter and entertainment, and used his talents in filmmaking, directing, acting, composition and performance to wield that power. 

LOGOS

COLOURS

I decided to use a grayscale colour scheme not only as a nod to old-school films, but to make it easier for the content to stand out. Working with a variety of streaming platforms and their identities meant that any use of colour, other than for critical feedback, on my behalf could mean a potential colour clash. 

'CREATE A LIST' FLOW

The process to create a list on Charlie is pretty straightforward. You can visually walk through the steps by going through the slideshow below. 

MY LISTS SCREEN