Jalen "Jax" Taylor - Vybe Myxer

Project Description

Vybe Myxer is a Spotify extension that allows people to insert their current vibes and their artists to create a playlist that is just right for them and the current situation. The extension is programmed directly into Spotify so an additional log-in is unnecessary. With seamless integration and our “Fairness” Algorithm, the user is guaranteed to have an even spread of each vibe and an easy transition between Vybe Myxes and normal playlists.

Process

Tools and Technology

Adobe Illustrator

Adobe InDesign

Adobe Premiere

Adobe XD

Adobe Illustrator

Adobe Illustrator was used for the style guide and gradients. Illustrator gives me an easy way to copy assets and change them quickly. And since the style guide was focused on not just my branding but also the branding for Spotify.

Adobe XD

XD was the focus of this project. It was one of the first times really tried out the majority of the design tools in the program. Wireframes were extremely important and with a limited window to test, I had to focus on the quick iterations of the design. Also with the ability to allow scrolling in the prototype, XD made it easier to simulate a phone screen.

Adobe InDesign

Adobe InDesign is my staple for putting together static presentations whether it is for GDDs or process documents. InDesign just makes it easier to have a consistent design pattern for different pages set up beforehand. So I can add them in when necessary.

Adobe Premiere

Adobe Premiere was the stage for me to show off the design I had settled on. I wanted to sell the idea that this addition to Spotify would be at home in-app. So I focused on making the presentation geared to the brand identity of Spotify. That way anyone seeing Vybe Myxer would already have it in their mind that the addition would belong in Spotify.

Wireframes

The opening screen will fade in with a small explanation of the extension. The following screens would allow users to select the number of listeners/Vybers, insert their favorite artist, and their current Vybe and name. After that, the playlist will produce a playlist of a balanced amount of each listener's Vybe to create a playlist that everyone will want to listen to. This path is the general process for all of the wireframes.

Wireframe 1: Round and Type

For the 1st set of wireframes, I leaned into a rounded design that I thought would allow for easy tapping of options and assets. Since Spotify is such a tap-heavy application, it would work well with the current IP's design. The opening screen would have the logo of Vybe Mixer fade in with a small explanation of the extension.

Preliminary Wireframe 1: Opening Screen

Preliminary Wireframe 1: Number of Listeners

Preliminary Wireframe 1: Top Artists

Preliminary Wireframe 1: Vybes

Preliminary Wireframe 1: Time Selection

Preliminary Wireframe 1: Final Playlist

Wireframe 2: Box, Select, and Scroll

The 2nd wireframe set was focused on a boxed design. This design removed the cumbersome drop-down menus of the artist selections. The way to select time was shifted to more of a general iOS design as well opting for the scroll rather than a static selection of time to choose between. The user could shift easily between lengths of time as well. The playlist screen also shows the person whose vibe the song caters to on the end of the container of the song rather than directly connected to the song itself.

Preliminary Wireframe 2: Opening Screen

Preliminary Wireframe 2: Number of Listeners

Preliminary Wireframe 2: Top Artists

Preliminary Wireframe 2: Vybes

Preliminary Wireframe 2: Time Selection

Preliminary Wireframe 2: Final Playlist

Wireframe 3: Round, Type, Scroll, and Preview

The 3rd wireframe set was a culmination of, what I believed were, the best parts of both of the previous sets before testing. The earlier designs were missing a place for Vybe Myxes that had been created already. I also found that having the name at the bottom of the Vybe page was odd and felt like an afterthought. So I moved it to the top. The scroll and rounded section of the time was a test to see which was the most useful between the two designs. Finally, the name of the person to whom a song caters was brought below the other relevant information of the song.

Preliminary Wireframe 3: Opening Screen

Preliminary Wireframe 3: Number of Listeners

Preliminary Wireframe 3: Vybes

Preliminary Wireframe 3: Top Artists

Preliminary Wireframe 3: Time Selection

Preliminary Wireframe 3: Final Playlist

User Testing

The user testing was focused on allowing people to go through the app with many restrictions. Then after going through it once, we went back page by page to figure out what was working for each design and what wasn't. This allowed me to take the best parts of each design and formulate a way to combine them. Along with the findings, I also compiled a group of testers in two different age groups with a variety of backgrounds. The people are color-coded to correspond to the participant shown in the key in the upper right-hand corner.

Wireframe Testing for Design 1

Wireframe Testing for Design 2

Wireframe Testing for Design 3

User Statements

Along with the testing and taking note of the pros and cons of the designs, I decided to take note of the statements made by the participants as well. When people are testing, they will speak out loud about things they find intriguing, confusing, or helpful. I took note of those exclamations and unconscious responses. From there I was able to make some important changes to the designs.

User Suggestions

After the testing of the mockups, I gave the participants a chance to offer up their suggestions. These suggestions are important for quality-of-life changes or design changes that bring it closer to the base application.

User Statements and Suggestions

Final Wireframes

After user testing, I went back to the drawing board. I didn't have to wipe the entire design into the trash, but shifting was necessary. One of the designs had something that I needed. So it was a test of breaking down the design and combining them into a comprehensive design. Along with the design, I broke down the reasoning behind the changes.

Final Wireframe: Opening Screen

Final Wireframe: Number of Listeners

Final Wireframe: Vyber Profile

Final Wireframe: Artist Selection

Final Wireframe: Vybe Playlist

Final Wireframe: Previous Mixes

Styleguide

The style guide was the most challenging part of the design process for Vybe Myxer. Since I was working within the confines of Spotify, I would have to study how Spotify portrayed its playlists. That includes placement of buttons, designs of icons, and color language used. Though it required a solid amount of research, I was able to create a design that fit well in the design language throughout Spotify.

In the style guide, I included the branding given by Spotify for people to share and use. For the playlists, I went through and sampled my own playlists. Using gradients that are removed from the user-influenced playlists that already exist, I could make a color scheme that stood out from the general achromatic of the Spotify app.

Post Mortem

I learned so much from Vybe Myxer. Not only was it my first application to make in XD, but it was the biggest research task that I've ever taken upon myself. There were many moving parts that I wasn't aware of initially. Before this project, I was a game designer. I took up this idea out of personal curiosity. I gained so much respect for not just UI Designers, but even more so for UX Designers. Working between the artistic designs and the user experience was unbearable at times. But even though it was difficult, I found a certain joy and draw to UI/UX. The time spent doing testing and changing designs were times when my mind was content. I was proud to do it. I would be remiss to not state that Vybe Myxer put me on the path of becoming a UI/UX Designer. After the Final Designs, there is also a poster to explain the design process of Vybe Myxer.

Make sure you scroll a bit and check it out!

Final Designs