CLAPBOARD
Client: Google UX Design Professional Certificate
Goal: Design an online video site that lets users categorize content into genres/topics.
Role: Research, interaction design, visual design
Client: Google UX Design Professional Certificate
Goal: Design an online video site that lets users categorize content into genres/topics.
Role: Research, interaction design, visual design
To find out what Clapboard could do to stand out from other video platforms, I had to understand which needs existing video platforms were not meeting. To that end, I performed a competitive audit on several online video platforms.
Online video platforms generally fall into two types:
Social Media Sites, which let users upload their own videos, read comments and gain followers.
YouTube is the most prominent of these.
Subscription Streaming Services, which let users access movies, TV shows and original series for a regular fee.
Netflix is a prominent example of these.
Since Clapboard is a social media site, YouTube is its most direct competition. But services like Netflix are still indirect competition, since they also provide video content that competes for users' attention.
I also added Vimeo to this audit, which is functionally a social media site, but has an air of professionalism more like a streaming service. Vimeo mainly sells itself to indie filmmakers and businesses, rather than average people.
To understand how users felt about competing apps, I created a System Usability Scale (SUS) form with 8 statements that users could rate on a scale of 1 (strongly disagree) to 5 (strongly agree):
I had 8 users complete this form while looking through the three platforms in the competitive audit.
The data I gathered pointed to one conclusion:
Compared to Netflix and Vimeo, YouTube left users feeling more overwhelmed, and less confident that they could find any video topic they wanted.
This suggests that Netflix and Vimeo's genre systems helped users feel more oriented when using the site, while YouTube's much more limited search functionality left users feeling lost and overwhelmed.
Applying Netflix and Vimeo's genre system to a site like YouTube poses a challenge: on sites like YouTube, users invent new "genres" without warning, and more content is uploaded than an employee can easily categorize.
I decided that the best way to add a genre system for a YouTube-like site would be to have users create the genre labels themselves. Luckily, there is already a good example of how this might work: Reddit.
Reddit is a social media site where users create forums ('subreddits') devoted to a topic. Some subreddits are about general topics, like Ask Reddit (for question-and-answer posts). But others are absurdly specific - a forum called "Trees Sucking on Things" is devoted to images of tree trunks surrounding nearby objects.
Clapboard takes this same idea and applies it to videos - when a user uploads a video, they upload it to a forum called a 'board' which is devoted to a particular genre of video. Users can also create boards devoted to genres or topics that interest them.
To better understand the information stored in Clapboard, I decided to draw an entity/relationship diagram showing how users, boards and videos are related to each other.
Having a list of entities and relationships made it easier to sketch the information architecture:
With the wireframe done, it was time to come up with the brand identity of the app.
HEX: E6E6E6
RGB: 230, 230, 230
HSB: 0, 0, 90
HEX: 333333
RGB: 51, 51, 51
HSB: 0, 0, 20
HEX: 686868
RGB: 104, 104, 104
HSB: 0, 0, 41
HEX: E23F3B
RGB: 226, 63, 59
HSB: 1, 74, 89
NOTE: Board icons can have any background color, so long as the color contrast ratio between it and white is greater than 4.5:1
Saira
Regular: Used for <h1> and bottom menu bar buttons
Medium: Used for <h2> and below
Semibold: Used for large, dark-colored buttons
Bold: Used to indicate that a bottom menu bar button is selected.
Extrabold: Used to indicate that an option is selected
BUTTON
OPTION 1
OPTION 2
I used this brand identity as a guide when turning wireframes into mockups using Adobe Illustrator.
.jpg)
The "clapboard" (or "clapperboard") is an iconic symbol of video production: a plate with a swinging arm at the top that helps filmmakers identify takes and sync audio with video.
Clapboard invokes its titular object in a few ways:
I imported my mockups into Adobe XD and used them to make a high-fidelity prototype.
This prototype demonstrates the use case of exploring the app and looking for boards and videos. It shows the ways that users can find new content:
Since Clapboard was a class project completed over a short time, I could not complete the entire design process. Were this project to continue, the next steps would be:
