User Personas, Sketches, Wireframes

Project Brief

Working from previous studies on competitor apps and their features, I set out to create the following: three user personas, napkin sketches/flow charts, and wire-framing from the napkin sketches. I used my prior research to complete the user personas and applied the flowchart of a competitor's app to complete my own. When approaching wire-framing, I drew from the features outlined in their flowcharts and learned to apply design systems using tools to create navigation, cards, icons, and buttons.

User Personas

I focused my user base around younger people, as this is an application that I see being used for parties among a tech-savy crowd. I don't see an older crowd wanting to pause their time to try and figure out how to use the app and take away from their experience, while a younger crowd can go into the app and do what they need to before becoming too preoccupied and distracted from the social gathering.

Napkin Sketches

Working from the flowcharts I made for a competitor's app, I went about creating flow lines for my own app. There were eleven areas to cover:

Log in to app/create an account
Search for a song, album or artist
Create a playlist
Add or remove a song from a playlist
Share a song with a friend
Add a song to a favorites list and access the list or edit it
Browse new releases and top charts and add selections to a playlist
Access song details to view an album
Access profile to update username, email or contact info
Sign out of the app
One flow that is specific to my value proposition

Some things I also had to take into consideration were user frustrations I had previously recorded as well as my own. There were certain features I wanted to make more accessible to the user.

Wireframes

Lastly, I began my low-fidelity wireframe. Over the course of this part of the project, I created the most basic forms of the screens using the napkin sketches as a guide. I used placeholders and stuck to a gray-scale theme so that only the content was the focus rather than aesthetics and specific details. I also began constructing my symbols that I would use from then on, incorporating inputs, bars, cards, modals, and buttons as part of my design system.