Vidde Mobile App

The Concept

Vidde splash screen
iPhone 6 showing the Vidde splash screen

The Vidde mobile app is a platform for curated video content, intended for use on iOS and Android devices with potential for a Windows Phone port in the future. More accurately, Vidde is a simple framework for featuring videos from a variety of sources. 

Requirements

The app had three primary requirements from stakeholders:

  1. Help users find videos through curation and search
  2. Allow users to rate and favorite videos
  3. Facilitate video sharing on social media

Each could be broken down into pertinent user stories from there. I like to stick to the effective — if idiosyncratic — standard of “as a ____, I can _____” user stories, which in my experience helps keep the UX process firmly centered on the User.

Vidde Home Page
Vidde’s Home page, the hub on which all of the other content revolves
  1. Help users find videos through curation and search
    1. As a User, I can search videos by keyword or date
    2. As a User, I can browse content by date, rating, or number of views
    3. As a User, I can view video content
  2. Allow users to rate and favorite videos
    1. As a User, I can see the current rating of a video
    2. As a User, I can rate videos
    3. As a User, I can add videos to my favorites list
      1. As a user, I can view my Favorites list (implied)
  3. Facilitate video sharing on social media
    1. As a User, I can Like or share videos on Facebook
    2. As a User, I can share videos to Twitter
    3. As a User, I can +1 or share videos to my Google+ page
    4. As a User, I can share videos via email
    5. As a User, I can share videos via SMS
    6. As a User, I can copy a video’s URL to share directly

Workflow

It’s important to decide on the macro structure of the app first, to help flesh out the basic experience early on instead of after the UI design has begun.

Vidde-App-flow-01

The decision was made early on to keep the app architecture simple, so that nowhere within the app required more than a handful of taps to access from anywhere else on the site

Brand & Styling

The color scheme was chosen the the stakeholders from a pool of ideas put forth by the design team. The themes at the forefront of the decision making process were “bright,” to help create a cheerful atmosphere, and “quirky,” to appeal to a younger, savvy users in a way that doesn’t alienate their older or less technically-inclined peers.

Vidde Style Tile
Style Tile for Vidde app

Sketches

sketches

Armed with my collected information, I took to my sketchbook to being connecting the information dots necessary to create a fully functioning UI. I find that hand-drawing first helps solidify ideas and rapidly correct errors.

This is also a great time to solicit feedback, as major changes will only get harder from this point on.

Wireframes

Building upon the rough sketches, I used Balsamiq Mockups to refine and polish the UI layout, giving a more formalized idea of the final product for the stakeholders to approve as well as for the first stages of prototyping by the development team.

Color Mockups

My final deliverable, these mockups take the approved layout and the approved color scheme and bring the two together in the final plan for the look and feel of the product.

vidde-presentation-01-7