Cleu Alarm App

Description: I designed a solution to integrate SoundCloud into the Cleu Alarm app in order to allow the user to wake up to new music everyday. After researching a large cross-section of Cleu's users, I discovered that one of their main pain-points was that they could not stay awake after the alarm activated and would fall back to sleep.

SoundCloud would be used to discover new music for the user based on their favorites stored in their account. When a user wakes up to newly discovered music, their intended motivation would be to stay awake in order to find out who the artist is and to continue listening to the song.

The MVP for this solution, however, was to simply attach SoundCloud to the alarm app so that a user could select a song from their SoundCloud account. The UX process included research, wireframing and a clickable prototype to show how this integration could be acheived. Additionally I designed and built a jQuery Parallax desktop site to launch the app for iOS8.

Mixpanel Analytics

The Alarm's features were recorded by a cusomtized analytics dashboard to track the user's preferences. The most useful data I obtained was the user's preference of wake-up time, snooze button hits per day, when the alarm was disabled and what alarm sound was used. I used the analytics to determine which pathway the users currently take to set an alarm which in turn would help me determine how they might prefer to navigate to their SoundCloud library.

API Hooks

In order to retrieve the kind of useful information from the User's SoundCloud account that I needed in order to allow the user to access their library, I needed to research the API of the source. I found a lot of useful hooks that I could pass on to the developer to aid in our discussion about the possibilities and challenges of my project.

Designing a Solution

Using a Task Analysis and results of the Analytics, I determined how the user would access SoundCloud. By wireframing user flows from my discovery phase and conducting extensive user testing on these wires, I discovered the most popular path a user could follow in order to select sounds from the SoundCloud library and add them the Cleu App Sound Library. After the user has added the sound/music to the library, they can then play that sound/music or select it as their alarm sound. This is all acomplished using native iOS gestures.

Prototyping the Interactions

In order to show the client how the user flow interactions worked, I made an interactive prototype in Axure. To show realism in the navigation I simulated slide and tap gestures using Axure's Javascript cases. Additionally, I incorporated variables to manipulate data collected from the user's naviagation path. After more user testing and feedback analysis on the prototype I discovered how the user receives music suggestions each morning and how they prefer to explore those songs. The goal here was to determine how to scale the experience to a point where the suggestions are automated, smart and received by the user at the right time. The playlists are updated with the name of the new song using variables and the user's personal details were also collected via introductory onboarding screens and used to persoanlize the user's experience.

Building a Parallax site to showcase the App's features

As an addition to the intergration of SoundCloud I designed and built a promotional website to show off the main features of the app in anticipation of the iOS8 release. I designed a single page site that was unique in the way that it displayed information. As the user scrolls down the page, jQuery (Skrollr) and CSS3 move images and text up from the bottom of the site to display the features of the app. This style of animation relies heavily on timing and a heavy use of CSS3. To give the site a calm and serene visual aesthetic, I edited and embeded a full screen video into the background that loops over in a seemless fashion. Since the animation is controlled with CSS and jQuery, I was able to fix the video background to be stationary while the animate images and text moves over the top of the video throughout the entire site.