RMG - Random Music Generator - is an app developed by Xingbo Wang that procedurally generates tunes. Its purpose is to allow users such as game makers and videographers conveniently customize and export unique music for immediate use in production. As such, the app design needed to be just as convenient and intuitive.
In this project I worked closely with Xingbo as a UX/UI designer to translate the functioning prototype into a cohesive app design. My workflow consisted of:
1. Breaking down the user stories, flow, and task analyses
2. Creating sitemaps, wireframes, and high fidelity mockups
3. Conducting usability tests to validate design
4. Developing a cohesive visual language (branding TBD)
Check out the design and process below!
With a few taps of a button, users can generate a unique piece of music with ease, save to Favourites, and later revisit and adjust musical settings. Each unique tune has a unique vector for its visualization.
RMG is used primarily for three functions: customizing, saving, and listening to tunes. I sketched out various userflows and sitemaps, connecting relevant interactions and simplifying each step across for every iteration. For example: customization and randomization are like the chicken and the egg — either function can be initiated first in this case, thus demanding a looped interaction in the design. The challenge was how to design the app to seamlessly integrates the two functions.
The userflow was simplified to the version below. I created a set of monochromatic wireframes to focus on the usability and effectiveness of the experience.
When UX animations are done properly, an app flows like a cohesive story. When designing RMG I took into consideration the transitions between screens, such as the "Now Playing" screen to "Customization Settings." The intention is to minimize the playback section when a user wants to tinker with a few settings, rather than slapping another screen on. This ensures that the central character is still the music and that users are not abruptly taken into another environment. Below are two layouts which I've tested with users, with layout A being most preferred.
How is music normally visualized? And how can I give each tune a unique identity (seeing as this app is mainly used to generate random tunes)? This was a fun challenge I encountered when deciding on the visual language. Majority of music apps use album art and equalizers for visualizations. After two weeks of analyzing music app designs on Pinterest and Dribbble I decided upon using a unique, floating vector shape which gives RMG a futuristic, edgy look.
Simplicity was key to the design without sacrificing understanding and usability. I created clean, sleek screens that simplified tasks while promoting reoccuring ideas (such as the omnipresent vector shape).
