UI/UX evolution: Cloudskipper on Android

With the release of Cloudskipper coming up next week, I thought this might be a good time to show off some UI pron. Great UI/UX takes time and many iterations, so for UI/UX geeks like me it’s fun to see how it can evolve. Even starting with decent graphics, there’s a lot of tugging and pulling to make an app work just right.

Let’s start with the first mock-up (below). In this case, the graphic elements were reused from our desktop prototype. The top grey bar is a placeholder for the status bar. In the control bar, the left button toggles between loop & repeat settings and the right button is for sharing (very important!) Here it is:

Early tests for album artwork: scale-to-fill or scale-to-fit? Also A/B-ing the control buttons:

More onscreen controls. How does my iPhone do it? How would that work for us? Like this:

At this point I started digging into Android’s open source music player to see what we could use. The Android music player had a Now Playing view on the bottom, we wanted it to be more visible so it was moved up top. I played around with the tab-based layout a little bit and experimented with the controls, figuring out what they would look like if they were to persist between screens (screen #1 below)

I eventually settled on simpler controls on the bottom and added a progress bar up top. Loop and shuffle buttons were moved to the title bar. The Share icon is inherently vague, so I decided to use a chat bubble instead (since you’re “telling” people about music). I also added a placeholder for a future “play on external screen” icon. Finally, I added a native Droid2 Steven-King-blood-red scrubber just to see how native styles would fit in. (screens #2 & #3)

Not bad, but it’s dark. Really dark. Time to add some color, detail, and more screens. I mocked up a Library screen and more controls in the Audio Player. Maybe some carots? These are a few of the final comps from which we started building:

What about landscape layout in the player? I did a mock-up of how that might work:

Meh. Changing views during screen rotation is really annoying. Portrait only!

Just for fun: during production, my Illustrator canvas got rather cluttered. Not only did I need to convert all the pieces over to bitmaps, but I had to make two of everything since Android has multiple resolutions. Here’s a screenshot of my Illustrator workspace:

Back to the player. I kept wanting to click on the progress bar, like a scrubber. So I made it a seekbar (you can see a tiny little thumb button in the middle). We also needed a lockscreen with player controls so I drafted our first version. We wanted the lockscreen to be useful beyond just controlling the music player, so we included a large time & date display, a silence/vibrate button, and a flashlight:

It felt disorganized having a scrubber up top and player controls on the bottom. Around this time we were also starting to study other music player UIs to figure out what we liked and why. Both PowerAMP and Rdio had mid-screen controls that just felt better. But how would that work? I experimented a little:

The app was finally starting to take shape and define itself. We made a few more tweaks and released the first beta. Here’s actual screens:

We had positive reviews from our early testers. The two biggest UI issues that came up was the app was dark and navigation was weird. We were using swipes to go between activities – basically from screen to screen – but it didn’t feel right. I also felt the Library and audio player screen lacked *pow*, so I gave them a few bells & whistles. The mini-player’s scrubber was hard to click, so it return to being a progress bar. Looking through user comments on other music players, an onscreen volume slider was very important for people, so we added that to the player and lockscreen.

I’ll not go through a bunch of screens and just cut to the end for this example. Basically we changed over to a lighter theme along view-based lists that you could move and touch (much slicker and nicer!). Here are actual screens of the final design of the app:

So if it’s done, why aren’t we releasing? We still have some bugs to squash plus another feature we want to test thoroughly before it hits the public. Here’s my artboard as it currently stands to give you a taste of what’s to come:

So as you can see, even starting with decent graphic elements and a well thought-out layout, the UI will evolve in early stages based on the UX. It’s not until you have you’re hands on something that you know how it should work. Great UI & UX is iterative and can go through massive changes before it’s truly ready. That is, if you care… ^_^

The RC with the new feature should be out in a few days. And next week… release!