Showing 2 Result(s)

Streamline

As part of a 24-hour hackathon, I helped design Streamline, a fictional app that allows users to search the databases of streaming services and cable providers to find where to watch specific movies and shows.

Design of Streamline’s main search functionality.

On February 20, 2021, I participated in StormHacks hosted by SFU Surge, a virtual 24-hour hackathon competition to build a project on the theme of “connection” using design and programming. I chose to make time for Stormhacks during a busy semester, to practice designing under time constraints and geek out with fellow creators. 
For our project, my partner Alex Grant and I created Streamline, a fictional app where users can search where to watch their favourite content. The concept for Streamline was inspired after personal frustration searching multiple streaming apps trying to find Marvel superhero movies. 


I was responsible for the organization, wireframes, and prototype, while Alex worked on branding.

Turning Concept into Design

I started by listing the app’s features and categorizing them (Figure 7). For the app to be realistic, I thought it was important to include extra features such as creating and editing profiles. Next, I sketched the interface to visualize the content on-screen.

Sketch list of Streamline features organized into categories of use and hierarchy.

Sketches of Streamline’s visual interface and user flow based on four sections; 1) Application on-boarding which describes Streamline’s features, 2) creating a custom profile tailored to user’s streaming and cable services, 3) Main search functionality to find where to watch specific content, 4) Bookmarking feature to save content and profile settings to edit services

Putting Together the Pieces

I designed a set of low-fidelity wireframes in Figma, a digital design and prototyping software, focusing on how users would navigate the app. For example, Figure 10 highlights the flow of navigation for search functionality. I wrote the copy for Streamline to provide an understanding of the features. The wireframes were handed off to Alex for branding.

Wireframes for searching (left), browsing results (middle), and viewing details (right). Users first search for content by pressing return on the keyboard which brings up related results and immediately shows available platforms. Click on content for a detailed view regarding purchase options, synopsis, and cast, click back to browse search results.

Making it Interactive

I created an interactive Figma prototype, which makes design elements such as buttons clickable, allowing judges to fully experience the app.

I ran into a technical challenge when trying to use multiple prototype overlays on a single screen, which place a design on the top of the existing screen. I realized this option is not available in Figma, and alternatively used a pre-defined user path meaning users must select specific options for the prototype, unlike a real app.

Figma overlay to organize saved content. When the bookmark is clicked, a pop-up overlay appears, over the screen.

Close up of Figma prototype illustrating pre-defined user path. Users must select Netflix, Prime Video, and then Apple TV in that order instead of selecting any available app. This is because the overlay with a purple border, which indicates an app has been selected, can only be applied once per screen.

We Won!

We recorded a pitch for submission and were judged on five criteria: technological proficiency, real-world impact, intuitive interface, presentation, and wow-factor.


I am thankful I made the time to attend the hackathon as it taught me to focus on the big picture rather than pixel perfection. Also, I received my first ever design achievement so that was super exciting!

Streamline won Best UX/UI out of 60 submissions and 410 participants at StormHacks. The judges commended our effort to solve a relatable real-world problem and use of Figma interactions.

Announcement of Streamline winning Best UX/UI at Stormhacks closing ceremonies over Youtube Live by SFU Surge Vice-President, Praneer Shrestha.

Spotify Collections

As part of an academic UI/UX project, I researched and designed a new feature for the music app Spotify that allows users to organize their library by grouping playlists into a collection.

The goal of this project was to create an additional feature for an existing mobile app, by utilizing research to make a strong case for the feature. The project was completed individually over 3 weeks, where I was responsible for conducting user research, analyzing the current design and interaction systems, and designing the new feature. I created high-fidelity visuals and prototypes in Figma (check out the prototype at the end of the project).

Uncovering Frustration Through User Research

Over 3 weeks in May 2021, I conducted user research to gain a better understanding of the listening habits and frustrations of Spotify users. I used a Google Forms survey to collect initial research regarding different pre-existing features of Spotify and later selected 4 participants for in-person and remote user interviews to walk through the steps of how they navigate Spotify.

Quotes from Google Forms survey by Spotify users and research synthesis of goals and frustrations that came from user interviews

Getting to the Problem

The majority of Spotify users listen to music by using playlists, either that they make themselves or find pre-made. But with an abundance of playlists available, users struggle to organize and find their music within the long scrolling library.

A New Feature: Spotify Playlist Collections

Playlist collections allow a user to select playlists from their library and group them in a collection. Essentially a collection is a playlist of playlists.

Design of new Spotify Playlist Collection. Group tile shows up in user’s library with an arrow icon. Once clicked on it reveals a list of playlists

A Collection allows users the control to categorize their library in a way that makes sense to them, rather than relying on Spotify’s sorting filters such as recently played. For example, collections can be based on the genre of music (pop), the time period (summer through the decades), by friends (all playlists by Kyle), or by mood (party playlists).

Collections to organize playlists are meant for music fans, and avid Spotify users, since they may have over 20+ playlists accumulated in their library. In this sense organizing a library can be seen as a shortcut for expert users to tailor their experience to speed up their interaction.

Working Within Spotify’s Design System

The first step in the design process was to analyze Spotify’s existing design system and interaction patterns, to ensure any new designs would fit appropriately within the application. By leveraging the already existing design and interaction patterns, users can rely on their past experience with the app and know what to expect. It is not only about the aesthetics of the application but also about creating a consistent experience.

Swipe Bottom to Top

Swipe Right to Left

Tap on Elements

Tap on Elements

Analysis and recreation of Spotify’s design system including colours, typography, icons and interactions

Implementing Designs; From Paper to Prototype

I started the design of the Spotify Collection by sketching the user flow for a possible interface. While this was still a brainstorming stage, I worked to incorporate previous research of Spotify’s design system to re-use existing patterns that users would be familiar with.

Rough sketches of user flow, interface designs, and Figma mockups

I made high-fidelity mockups of the layout in Figma, utilizing Spotify’s existing design system and analysis from my research. This stage was about finalizing the visual design to replicate Spotify. Once the layouts were completed I populated the designs with real content from Spotify to better visualize the prototype in its context.

Design Key Moments

Selecting Playlists

While most mobile grouping patterns are drag and drop (such as iPhone folders), I deliberately chose a simple checkbox method to avoid complex interaction while scrolling through the library. The selection interaction is based on the selection for adding songs to the queue because it has the option to tap to select with visual feedback.

Edit a Collection

Since the function of editing a collection is similar to that of editing a playlist, I choose to re-use the same interface patterns and icons that users would already be familiar with. Because the functionality is the same, it doesn’t make sense to re-invent the editing options.

Open a Collection

Opening a collection to view and listen to playlists is based on a simplified version of the playlists layout. In order to streamline the process of finding a playlist there is minimal options available so that the user can get straight to the playlists without any interruptions.

Library View

There are two options to view collections in a users Library; either the general view for recently played or by filtering to display all collections. A collection will appear in recently if a playlists in the collection has been recently played. Collections are primarily meant to group together playlists, but users also have the option to add podcasts shows for further flexibility.

Check out the Figma Prototype!

Reflecting on the Research Process

Throughout this project, I gained practical experience conducting design research to inform and validate my design concept.

This was my first time conducting user research by using survey and interview practices. The biggest consideration when conducting user research was to pay attention to any bias or assumptions we have as a designer as they can harm the quality of results.

I continued my research by analyzing Spotify’s current design and interaction systems and incorporating the research into my new designs. Working within an existing design system was a fun challenge, especially to see how closely I could replicate Spotify’s interface.

css.php