top of page

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.


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.

bottom of page