I challenged myself to create an app from an original idea from start to finish on Figma.

I decided to look at five mobile applications and one web application for research. I chose SoundCloud as a mainstream app that often showcases lesser known artists and Uber Eats for its search capabilities. MixCloud and Audius Music to research the “competition” of lessor know artist/streaming apps. These last two apps offer services most similar to what I had envisioned when starting this project. I wanted to also research popular apps to pick out their positives to incorporate them within my own. Referenced online reviews as well as my own opinions. I reached out to my own local venues with a survey but unfortunately they did not respond in time for this project.

I created two user personas to better illustrate the different types of users the app hoped to have. One was to represent creators and the other to represent enjoyers/listeners. I also wrote down a complete problem statement of the app- including the problem I wishes to solve, past research/conversations, risks & rewards, ideals & validation, and project goals. Writing everything out, especially the project goals, helped with guiding the direction of the app.

I created a user flow with two different final objectives to represent the two users’ goals. The first is for the average listener to search, discover and find a new musician to follow, while the second is for a musician to find a venue and then send a message to a venue contact. I tried to make the process and steps as clear and eay to understand as possible to help with visualization, future design ideas, and flow easier. The user flow chart should also help with making sure to not deviate away from the main goal and loose focus on what the user is trying to accomplish. The main screens and actions were labeled but if during the design process I find that a screen become too confusing or busy, then I will adjust for better usability. Steps have been condensed to make each process as simple as possible but if I find this not to work, it will be subject to change as well.

For the wireframes, I heavily referenced the flow chart I made and designs, layouts, and features from similar apps/services. I decided to “combine” the two user end results by having an artist both follow and message a venue. I used a grayscale design to better illustrate visual hierarchy and to better help me see the overall design of a page without worrying about colors or font just yet. For the splash screen, I wanted to really reference the name of the app so I made a wave-like design to surround the logo and sign in. For the onboarding/introductory pages, I used a simple and common layout - picture at top, title, text, and page indicator. I wanted to make this as simple as possible so users could focus on the content rather than the deign or layout. I opted for a one page sign up to make registration easy and straightforward. The suggestion page was inspired by Audius’ since I liked the idea. I changed it up a bit to match what I had in mind. The horizontal scrolling became a frequently used feature to help keep continuity throughout the app. The discover/map feature was inspired by Google Maps, Uber, and Airbnb. I wanted the discover feature to be the most impressive of the app so I made it the most involved. Finally, I wanted venue pages to resemble user pages with only a few differences- the biggest having a messaging feature which I opted to be super simple as well.

The waves I colored and designed I for the splash screen I decided to used throughout other parts of the app as well. Though thr pallet colors are similar, I stilled tried to create a visual hierarchy with both using Orbitron abd a lighter color for titles while body text was darker and smaller. I also used similar base and interacted colors for buttons. The main color difference for these is when different types of buttons appeared on the same screen. Some design aspects where changed compared to the wireframes when I found I could simplify a process or I thought a different design would better suit the users’ needs or what I wanted to accomplish with the app. The biggest change was the removal of a staff page which you would then message from, this seemed like the appropriate choice to better simplify the messaging process. Though not fully illustrated or developed, I added navigation icons/other buttons to suggest additional app usages that weren’t shown.

If I were to revisit this project, there are things I would definitely like to change and would do differently, but overall I'm pretty satisfied with the end result.

Final Prototype

Feel free to contact me if you'd like to work together! I'm still new to design but I'm excited to grow and develop my skills 😊✨