My Android UI design process

My Android UI design process

This past week I’ve been listening to the Design Notes podcast quite a bit. One subject stood out to me in the episode with Nick Butcher: sharing design resources.

More specifically, sharing works-in-progress and open sourcing design files. This struck a chord with me. I know I’d love to see the .sketch file for a well-designed, real-world app. I’d love to hear a UI designer explaining decisions they made. I’d love to see the early mockups which got scrubbed and the thinking that went along with it. Sadly, these kinds of resources are remarkably scarce.

For an interesting discussion on the topic, I encourage you to listen to the podcast. In the meantime, here is my humble contribution to the field. I hope you find some value in it.

What we’ve got

You’ve never heard of my app. And that’s fine. You may not even think it’s particularly interesting or good-looking. And that’s fine too. I’m glad you’re here anyway. This is just my part in the discussion. I hope it doesn’t end with me.

I’m no big designer. I dabble. I design the UIs and icons for my apps and websites and I enjoy it quite a bit.

When designing ¿Cuánto es?, I kept all the intermediate steps. For the app UI itself and for the icon. Whenever I felt stuck, I just duplicated the artboard and tried a different direction. And even when I wasn’t stuck, I told myself to just duplicate and try something else anyway. Eventually I arrived at what I liked and moved to Android Studio.

For your enjoyment, here’s what it looked like.

A brief note about the app

¿Cuánto es? is a very very simple “flashcard” app for Android. It shows a random number (in decimals) and asks you to say it in Spanish. When ready, you can reveal the answer or hear it spoken by Android’s TTS engine.

There is no scoring and there are no rewards. I may one day expand beyond numerals, but right now this is it. It’s just a pet project. Don’t expect too much :)

This was a fun exercise because with numbers there’s no need for a word list. A number can be generated at random and its translation can be constructed in code.

If you wish to try it out, the app is available in Google Play and I put the source code on GitHub.

User interface

As a flashcard/language learning app, I first looked for some inspiration at existing apps in the field. The obvious candidate was Duolingo. I also liked the design style of Lumosity. I pulled a few screenshots into Sketch and marked the elements I liked:

With some initial ideas in mind, I downloaded a simple Android UI kit from Sketchappsources and started drafting:

1 Just a simple material-style card. Top half is the "topic", middle line is the question and bottom is the answer. No idea for buttons yet.
2 Trying to be a bit bolder with the blackboard metaphor. Dropped the card border to see if it makes sense. It didn't.
3 Trying out rounded corners and a thick shadow, Duolingo-style. I like it. Also added the "speak" button.
4 How do I tell the user there are more cards a swipe away? Show a peek of the next card maybe?
5 A new idea - the numbers are price tags. Replaced the blackboard with a corkboard. More elements matching the "cartoony" style.
6 I don't like the dark transparent overlay. Tweaking some details around the buttons.
7 First attempt at showing the answer. The idea here is the bottom bar will expand and present the text.
8 Second variant: answer replaces the button. I'm liking it and leaving it for now. Some additional details - edges of previous/next. Oh and the string.
9 Also added a custom "About" dialog. This has not yet made it into the app.
10 Final version drops the "price tag" idea. A large card shows the question and — when requested — reveals the answer. Buttons don't disappear.

At some point I may revisit the “price tag” metaphor. I had some ideas on how to implement it and I still think it may be a fun exercise.

The icon

When designing the icon, I knew I was going with the “paper card” rather than the “blackboard” idea. For inspiration, I looked at the stylish Hangman icon.

1 Started with the "price tag" idea. I felt a "1,2,3" sequence would make sense.
2 Trying to lay them out nicely and with varying sizes. I'm not sure about that...
3 This makes for a more compact icon (and I could tie a nice string on top) but it breaks the "1,2,3" idea.
4 Done with the price tags for now. Just three simple cards. Looking okay, but let's try some more.
5 Playing around with shapes, sizes and shadows. Trying to reach a more "compact" icon.
6 I like the inverted spanish question mark. Trying to work it into the icon. My thought was that the icon would look like a question. But this looks messy.
7 Did some soul searching. Am I trying to be too literal with the numbers and everything? Let's simplify it. Besides, at some point I may expand beyond numbers.
8 Add some life by rotating the cards. Trying out the icon on various backgrounds.
9 Final version adds a stronger shadow. At the time the app is Spanish only, so the flag made sense as something to attract the eye.

Resources

  • Download the app in Google Play
  • Download the Sketch file here
  • See the complete source code on GitHub
  • The grungy font I’m using is Cabin Sketch by Pablo Impallari

Follow up

Care to share your process? Or maybe you know of any resources like these? I’d love to hear from you! Let me know in the comments below or on Twitter.

If you find this content interesting and the discussion worthwhile, please share this post. Thanks!

Łukasz Adamczak's Picture

About Łukasz Adamczak

I'm a mobile & web developer based in Warsaw, Poland. On this blog I write down notes from my programming journeys.

Warsaw, Poland http://czak.pl

Comments