The Ask
I was approached by a developer who had created an app for musicians and music lovers to create song lists and keep track of their music groups. He had created a mockup of how he had imagined the app working, but wanted me to see if I could improve the experience with some visual design and streamlined flows.
The Plan
I started with the main goal of taking the mockup the client gave me and determining the flows from the main screens. I also had a brainstorming session with the client about how the app could best help musicians. This enabled me to begin making a list of potential needs of the app.
Can I add an additional group and, if so, how do I do that? Many musicians are in multiple groups and need a way to store information that is unique to each group they work with.
Can I create multiple set lists? Even within one music group, it is common to have set lists that vary for specific venues and events. It's handy to be able to store multiple lists.
Can I store the lyrics within a song's information page? This was a popular request as many musicians need quick access to lyrics while recording, practicing, etc.
With this list of questions, I began working in reverse to understand the flows and began visualizing and cataloging the screens I would need to accomplish each task.
On the left, you can see my initial sketches where I began brainstorming app icon/logo ideas for SongListMan. I ended up feeling really drawn to the icon where I combined an S with a music note. I originally thought the icon was too angular and needed to be smoother, more organic. So, I edited the shape and ended up with the final designs shown on the right.
The Process
I began with some sketches that implemented a navbar into the bottom of the screen to improve ease of access for users. I also sketched some ideas for a logo/app icon and, based on feedback from the client and peers, moved forward with building the app icon and logo in Figma. Using the client's original mockup as a starting point, I created a wireflow of how I could see the app progressing.
Sketching the wireflow helped me to envision the composition and functionality of the app. This is also where I started seeing places where modals would be beneficial.
The style guide I created utilizes an organic blue/green color palette and slightly rounded shapes. When I picture visuals to go with the concept of music, I tend to imagine unpredictable and curvy, yet sleek, shapes. Kind of like Matisse's paper cut-outs.
I wanted the visuals for SongListMan to be calming and fresh, while still being vibrant. I added in the chartreuse to bring a little zap of energy, but it is used sparingly. It is really only used on the login screens and for modals, as I do feel the bright color seeks the attention needed for alert messages.
I felt Roboto and Nunito paired nicely for typography and were both very modern without being hard-edged, which would not have fit the organic style I was going for.
The Outcome
Many changes were introduced as I went through prototyping. As I learned more about the intent of the product, new ideas or important inclusions would spring to mind and I began seeing a need for the addition of various modals for alerts and the ability to store and edit group/member information. The final prototype enables users to store songs in their account, create lists, along with adding new songs, groups, and members. I tried to keep flows straightforward and minimal in their approach to create a delightful and intuitive experience.
Login
Songs
Add A Song
Song Details
Groups
Members
The prototype brought all of the visual design together. I ultimately ended up making the add button a part of the navbar because it was such an integral part of the user experience. It became clear that it is used more often than the hamburger menu because of the vast number of different types of information that can be added to the app (e.g., songs, groups, lists, members). So, I moved the hamburger menu to the top right to make room for the add button in the navbar, where it would be easier to reach.
The client is currently developing the app with these designs. We have discussed further collaboration to beef up the member profile and account details portion of the experience at some point in the future.
The Lesson
Working on this app taught me the value of working backwards. Sometimes it is easier to see the bigger picture and determine the most efficient flows by starting with your end points.