Chronotron

WDI 13 | Project 4 | Alaina, Andrew, Mark, Peter, Sara

UX/UI Consultant: Ben Frates

“There's never enough time to do all the nothing you want.”

Purpose

The purpose of Chronotron is to allow you to put your free time to good use. Give Chronotron an amount of time you need to spend and it will provide you enough content to fill that void. Search YouTube for interesting videos. Test your knowledge and learn fun facts with trivia questions. Discover new music with an auto-generated Spotify playlist. Find a nearby hike or park and take in the beauty of the Pacific Northwest.

General Approach

Working in a group of five allowed us to create something expansive. We wanted to generate as much content for the user as possible so we each selected a way for the user to spend their allotted time: video, music, trivia, and hiking. In order to create a cohesive and rich experience, one team member focused on front end and worked as project manager. The four topics were divided between the remaining team members and each built out their own content generator. Once each facet was built, they were brought together to produce The Chronotron.

• 
• 

• 
• 

Tech Used

• Ruby on Rails
• HTML & CSS
• JavaScript & JQuery
• YouTube API

Used YouTube to search and display videos based upon relevance in the time allotment. Through allowing the user to search the length and number of videos he or she can search through and find the most relevant video to watch without having to search again. By doing so the user can find myriad topics from one location and consume them.

• Trails API

Used Trail for parks and trails information within a specific area. This allows the user to identify hikes, walks, and parks.

• Spotify API

Used spotify to make playlist on the user profile on the time allowed for wasting. The user connects their spotty account to the embedded Iframe which allows for communication with the users web phone applications. This dynamically stores the user’s playlists which can be accessed from any device. By doing this way we have allowed users to take their created playlists wherever they go!

• OpenWeather API

Placed weather conditions on the page for the displayed park.

• Open Trivia API

Used OpenTrivia to return questions on a topic in true/false or multiple choice format. Then created a javascript game that creates an environment that the user interacts with to play a game of Trivia. The user is told if they get the question right or not and their score is incremented thusly.

Wire Frames

• 
• 
• 
• 

Installation Instructions:

1. Fork/Clone Repository
2. Create new folder and clone project
3. Create DB
4. Migrate DB
5. Get API keys from Youtube, GoogleMaps Directions, Spotify, OpenWeather, and GoogleMaps Embed - Then create a .env folder and enter these API keys after each declaration in the ENV file
• SPOTIFY_CLIENT_ID=''
• SPOTIFY_CLIENT_SECRET=''
• DEVELOPER_KEY=''
• YOUTUBE_API_SERVICE_NAME=''
• YOUTUBE_API_VERSION=''
• WEATHER_KEY=''
• GOOGLE_MAP_KEY=''
• MAP_EMBED_KEY=''
6. Run Bundle Install
7. In console type: Foreman run rails s

UX Testing

UX testing was performed at all stages of the websites creation.

Paper Prototype Testing

Changes made from this stage:

• Users were drawn toward selecting all inputs on the front page. We originally had the user select time, then provide further input on each page.
• Since the music page relies on Spotify, and opens a new tab if the user does not have the Spotify app installed on their computer, it was suggested to reorder the home page by activities that keep the user invested in our app. Originally music was the first page listed.

First Deployment Testing

Changes made from this stage:

• Too many options for music genres. We limited the possible choices so not to overwhelm the user.
• The "short", "med", and "long" option and number field for video search weresn't clear on the home page, so we added labels.
• To switch categories the user had to return to the home page. We added a category toggle on the sidebar nav.
• The music button on the home page originally said "choose genre". Users wanted to know that it would use their spotify accounts before pressing the button to sign in.
• Users forgot to select how much time they wanted to spend, which is required before proceeding. We made a default time of 1 hour so not to disrupt the user with a reminder.

Next Steps

• Users would like a way to track how much time has been spent on each activity.
• Users would like guidance if they don't know what they want to do, or what to search videos for.
• Additional topics would be great, as well as the ability to customize the home page for your favorite categories.