Firefox Download Button
Ready for a deeper look? Here is how I organize my thoughts prior to and through the production of a project.

Moodmash Process & Wireframes

Concept

What do you do when you want to listen to something, but you can't decide what to queue up, or your collection feels a little stale?
We like to discover new music, and what if we find something we like so much, that we'd like to see a live performance of it?

Our solution is to pick music for the user based on a single input: their mood. And using the only other input, the user's city, we can deliver on the second need by automatically displaying nearby performance dates, if any, of all the artists on the current playlist. This feature is convenient for the user, as it saves them one step of researching an artist once they hear something they like. By lowering this barrier, the user is encouraged to get out and experience new music in person.

User Journey

  1. Log in
  2. Enter location
  3. Select feeling
    • Music starts playing
    • If any current artists have nearby shows, they'll be displayed
  4. Want to change feeling? Tap the current feeling.
  5. (See step 3)

Technical Requirements

Two APIs: Spotify and Bandsintown. Spotify is used for playlist search and play, and for login, so the user must have a Spotify account.

Firebase, to store user locations for two purposes:

  1. Remember each user's location so they don't have to enter it every time they log in
  2. The app will also hold each user's current feeling, and use it to find the most common feeling in a city for the "Austin is feeling ____" display item.

Design Direction

Cool, dark greys to coordinate with the Spotify applet and be gentle on the eyes for mobile users. This minimalist base pallete will be neutral, so that the mood-specific colors will stand out as having an obvious meaning, a connection to mood. Prototype background color animations are developed and refined at codepen, using css gradients and animations. There are javascript plugins for similar effects, but they would be unnecesarilly heavy and, in one test, add significant demand on battery life.

Feelings will be displayed as a grid of large buttons. We will stick to simple colors for each feeling type and not use icons or emojis, since this would quickly lead to a cluttered appearance. Feelings will be grouped into color schemes by categories, and the text for each feeling will be more specific.

Wireframes

Final Product

Future Feature Wishlist

  • Add a hamburger nav button with side menu where user can see their personal info and saved shows, wioth option to log out.
  • A way to create a database entry per user so the user can "star" a show, saving it to their profile. Then the user could access a menu which would show a list of starred shows with the option to add it to an external calendar application (documented on Github issues)
  • Refine the firebase-related features and "[City] is feeling [feeling]" aggregator, it seems buggy

Launch
Github

This was a group project from the UT Austin Coding Bootcamp, and the alt-style branch is my personal revision I continued working on after the end of the program.

Skills:
  • CSS
  • HTML
  • Javascript
  • jQuery
  • APIs
  • AJAX

Home