VideoList

2 Weeks in May 2024

Shane Cullen | 781-742-5573 | shane@ktchupstudios.com

Project Details

Project Prompt

Design a website and mobile app that seamlessly integrates with a music app to convert playlists into corresponding playlists of official music videos on YouTube.

Goal

Make it very quick and easy to take, for example, a music playlist from Spotify and create a YouTube playlist of all the available official music videos for each song.

Devices & Resolutions

Design for Mac app and mobile app, newest model sizes, and operating systems

  • Apple iPhone 15 Pro
  • Apple Macbook Pro 13inch

Timeline & Milestones

  • 2 Weeks
  • 1 week to create all non-design materials
  • 1 week to learn Sketch and create all designs and prototypes

Requirements

  • The product must be able to import music playlists from a music provider and then use YouTube’s API to find associated videos.

Assumptions

  • Users will have and be able to provide login access to music providers and YouTube and provide API keys if needed
  • YouTube’s API will allow for fetching videos based on music track metadata.

Constraints

  • Must use Sketch for inital mockups
  • Must incorporate Apple IOS Sketch Components

Design Process

1. Empathize

Simulated Research Study

Empathy Maps

Personas

User Stories

John Davis – The Daily Commuter

As a daily commuter, I want to seamlessly switch between listening to music and watching music videos without worrying about data consumption, so that I can enjoy a richer media experience during my commute and make the most of my travel time.

The Enthusiastic Fan

As a social media manager and music enthusiast, I want to discover new music and instantly access corresponding music videos, so that I can share the latest and most interesting content with my followers, keeping my social feeds lively and engaging.

The Casual Viewer

As a casual music listener, I want to occasionally watch music videos related to the songs I listen to, so that I can enhance my relaxation and enjoyment without the need to actively search for or manage these videos.

User Journeys

2. Define

3. Ideate

4. Low-Fi Designs & Prototype - Sketch

User Flow Diagrams

Site Map

Wireframes

Lo-Fidelity Designs & Prototype - V1

5. Test

Testing

Iterations - Indicated by Red Circled Element

6. High-Fidelity Designs & Prototype - Figma

Sticker Sheet - Colors, Fonts, Icons & Components

Hi-Fidelity Designs

Final High-Fidelity Prototype

7. Final Product

Shane Cullen | 781-742-5573 | shane@ktchupstudios.com 

Scroll to Top