KAREN J.WANG
Thumbnail 2.png

UX & UI | Video Dictionary

Role: Product Designer (UI|UX)

Skill: Product Strategy. Wireframe. User Flow. User Testing. Visual Communication. Icon Design.

Tool: Balsamiq. Illustrator. Sketch.  

Available to download at Apple Store.

 
 

About the Product

SayWhat is the hilarious video version of urban dictionary for all trending slang. User could search and explore new trending words explained by creative videos from contributors all over the world. Or one can become a contributor to act their own understanding of such word in many hilarious way. SayWhat is launched in Apple store with over 30,000 installs and average 4.8 rating.

 

The Problem 

  • Lack of valuable videos content

  • The overall interface is not clean or consistent across each tab

  • The Explore page, as a long list of all words is not efficient for explore purpose

 

Objectives:  User Experience Design.  Interface Design.  Visual Design. 
Team:  Ding Ding.  Elisa Budelli. Karen Wang. Victor Reventos. Stanley Chen. 
Date:  Nov 2015 - Jun 2016
 
 
 
 
 
 

How it works?

The design journey started from paper prototype, which aims discovering valuable features to introduce our concept to the new users. The user flow is focus on encouraging more users to explain the word from our "term list" by creating videos.

 
 
 
 
 
 

The story of "Nomination" - 32.1% growth on valuable content 

Nomination aims to trigger user's action of creating video contents, by applying gamification to video creation process among the SayWhat community. The result shows the amount of video created by users went up 32.1%. The action of "Nomination" allow users to nominate their friends or popular content creators to explain a word under "special scenario". The below contents has showed the user journey to invite their friends externally or nominate some popular user internally to act out a chosen word with a specific challenging direction. 

 
 
 

User Flow Example

 

Nomination "How" Interface Development

 

"Nomination" Final Mock Up

 
 
 
 

Interface Development 

Each view of interface has been developed in various stages. For example, more features have been added on the video display page strategically as the product grow. Initially, the moment only shares limited action to user, which includes "view count", "comment" and "like/dislike" . Due to increasing user views and growth of the amount of words, features like Caption, Collection Category, Total Number of Video Contents, Leaderboard and How to act the term has been added to page.

 
 
 

Moment/ Video Display 

 
 

Term List under "Collection" - Initial Concepts

 
 
 

"The Collection" - Organize the list of words 

Based on our growing content, how to arrange terms into category became a challenge. This will allow user to explore according to their preference, instead of just viewing featured video or most recent. The main task is to differentiate "collection" from "term list", the final design is replacing form of list to icon display.

 
 
 
 

Collection Explore Page Development 

 
 
 
 

Icon Collection

All the below visual icons are designed for the Collection categories.