Round two of the mobile user flow for bad racket dot com v5.
Purchase flow steps are visible in the larger shot.
10 months ago
Did you use any mockup software for these sketches? :)
Wacom tablet + Photoshop has worked well for me. Specialized mockup software seems to get in the way of rapid workflow. Plus, I'm already familiar and fast with Photoshop.
When tapping play won't the user be taken to a "music show page" where they then can see a big buy button and more details etc?
Also what do you think about displaying the link rather than telling them to go to their email?
Hey Joe, thanks for the feedback!
Regarding the play button: The way I mocked it, tapping play begins playing the audio without navigating away from the page. To get to the album detail page, the user would have to magically know that the album description text links there. I'll need to find a better way to disclose navigation to the album detail page.
Also, great idea to present the download link in addition to sending an email.
Are you not navigating them away because you want them to be able to preview the other songs very quickly too? Argh wish I could see more of the app already haha
This has exposed unsolved issues in administration, playback, and navigation.
User clicks on an album cover and a song starts playing. Which one? The first one in the album, or a certain song defined by the admin?
When the song ends, playback should continue to another song. But another song from the same album, or a song from the next album to the right? Let's assume the next song is from the album to the right.
If the listener doesn't like the 2nd song that starts playing, how does she hear more music by the 1st artist? Clicking the album for the first artist will start playing a song she's already heard. Now here is the junction where she wants to go to the album page. But how? Where?
Also, all albums should probably show play buttons on mobile, since we don't have hover to work with. See any other interactions that rely on hover?
Cover flow is probably a decent design pattern for you to go off of. I think it covers a majority of challenges that you will face. I am already picturing a few UI's that could support further discovery, either a section at the bottom with the same UI you have for albums, or just relying on the back button. I think the latter may work better. I really like how the cover flow interaction keeps things simple, and aligns with what users are used to.
I don't see any other interactions besides that main one. Hope to see high fidelity mocks soon
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter