Result for Android UI/UX (Re)Design Challenge 2.0

android-design-challenge - result

After taking some times, we finally have the 10 winners from all 42 entries! Congratulations!

No, it wasn’t an easy task to pick the winners – it won’t happen without the judges involved that basically spent hours to look through all the entries and place their scores and comments on them – Thank you! And to those who doesn’t make it to the winner list this time, don’t be disappointed – it doesn’t mean that your entry is bad – go on, apply some tweaks and make it happen!

The 10 Winning Entries

Below are the 10 winning entries, together with the selected comment from the judges (not in any order):

Chris Basha – Dribbble

Awesome stuff. Great work wielding Android design language with some unique taste that feels completely at home. Using an Instagram-esque presentation of content makes sense (I’d do some recon on whether this is true) and the suggestions stream is epic – all about the content. The app has a good balance that caters to Prospects and Players alike – perfecting this experience is crucial.

Only things I can call out are the crowding of content on the Item view. The image is the most important piece of the screen and shouldn’t be covered by anything. At the very least the AB should disappear as soon as the view is loaded.

Besides that and some tight text on the Designers view, this is a great v1 and should be started immediately 🙂

Elad Izak – My Battery Saver

Sweet. While this is taking quite some inspiration from Timely, it’s a joy to just look at those colors. The app’s purpose seems simple enough, to use the visual layer for clean beauty. Make it a reality.

Andre Goersch – RunPee

The app design is clear and clean. Developers will be happy to see this design. I have concerns about scalability of this design though. Going to larger screens will take a lot of rethinking with some screens but would probably be possible. 

Brand and Android UX blend together nicely as well.

Cole Chamberlin – Eve Music Player

First off, great presentation of thought through the deck. This is really important because it helps relay meaning but also forces you to really consider the reasons for your choices.

Overall, this is a fresh presentation that balances native patterns with unique layouts and interactions. I think gestures are a great idea. They can be a double-edged sword however – the next step for this would be some user testing to make sure things are clear and fit the app’s desired use scenario (sitting on the couch vs running, etc.)

Polished to a near-shine – I’d fiddle with the action bar a bit more. GREAT WORK.

Alexander Karpilovich – Kinopoisk.ru

Great Androidy update to the original UI while keeping the brand. The design also looks very scalable to larger screens.

I’d reconsider transparent navigation bar and status bar use though. In this app there’s no added value of using them.

Evgeny Belyaev – Evernote

Great redesign. Evernote feels a lot clumsy on the current version, I would use it again if it looks like this work. I would considerate to not use Roboto Slab everywhere, but it’s a better look and feel, definitely a improvement over the current app.

Swapnil Chitnis – Project Throne

I like this a lot. Finally someone who adds some unique branding to the mix, without sticking too hard to the guidelines. It’s clean, it’s clear, it’s fun and it’s Android.

Paul Forgione – Kho

Any experience that helps manage my medical needs without bringing the “serious medical issue” aura to light is a winner in my book. This presentation is simple and follows the guidelines while staying unique. It feels more “human” than analytical which is especially important for a daily use app.

Only a tad more polish on things like the graph labels and scrolling blocks/buttons at the bottom and you’ll have something realllllly great.

Sean Smith – HBO Go

Then we have (finally) a great use of KitKat immersive features here, you can see the ActionBar but the opacity trick make it beautiful, specially the home screen with pictures and stuff. Love the animations to show UX interactions, great presentation!

James Jun – TweetLane

Great work simplifying the app. Some apps try to be everything and that doesn’t always work out. The focus on content and getting everything else out of the way is a good goal.

The little flourishes like the bird moving with refresh is great – these bits of polish differentiate and delight.

Two points:
The tweet button is nice, although it gets a little lost and covers content. Consider making it the prominent blue and hide on scrolling down. The compose view could have a tad more queue that it is the input box and not just an expanded button.

I’m a little concerned the menu view will be difficult to find, so some user testing and feedback will be needed to confirm its placement.

Nice, simple, and clean!

General Impression on the Entries

I received a lot of great feedback from the judges and sponsors for the design challenge this time – below is the general impression of the entries:

  • General quality of the entries are satisfying (though it can be better!)
  • The Android Design Community show signs of maturation
  • Scalability (read: responsiveness) of the design, most of the time, is not considered
  • Lack of tablet-centric design
  • Entry need to be a complete story/flow to capture the overall UX rather than just a few screens

These feedback are great for me to prepare for the next one (if there is one).

Prizes for the Winners

As promised, each winner will walk away with a Domo Arigato Mr. Roboto T-Shirt at the selected size, and a 10 USD Play Store Gift Card (or 10 USD Paypal cash). The T-shirt has been ordered and it will be shipped once it is printed, and I will email the winners for the Play Store Gift Card.

Thank you and I hope everyone able to grab something from the design challenge, and if it’s all possible, I will definitely make the third one next year!

Minna, Domo Arigato! 

Advertisements

How I would Further Improve Mailbox App

Mailbox

The famous Mailbox app in iOS has finally arrived for Android users, and again it’s a very disappointing move from a company under Dropbox. It’s fine (actually not) to have the Android platform as the second thought of your app/services, but why some of these companies doesn’t just show some Android love by making things familiar and easy for Android users?

I am sure I will hear ‘Taylor, it’s about consistency. Our PdM requested to make it looks all the same across platform, so people gets familiar instantly! And it also provide consistency in the branding and marketing!’. My ass.

My Redesign Suggestions

  • Go consistent with Android UI patterns and building blocks. You can keep some of the unique elements while not breaking the Android Design Guideline.
    • The user of navigation drawer indicator (change color depending on the page)
    • Use the tab style in Android
    • DON’T block the notification bar by your syncing/refresh/whatever you call bar. Just use crouton to display the progress in-app.
    • May be use path-tracing for the loading indicator?

Inbox

  • The color of the elements can be consistent to the different screens, so it keep that uniqueness in mailbox.

Later

  • Check Confirming and Acknowledgement page in Android Design Guideline. Positive (Delete in this case) action should be always on the right side.
  • Why control the user behavior? So now I can’t write a draft when I have some free time? Why the force of deletion?

Delete Cancel

  • Being a mailbox app that encourages users to organize their mails in different categories (read, dismiss, list, later), I find it really strange to place those actions on the top. Once you finish reading the mail (most of the time), you focus will be at the bottom part of the screen, and it’s way easier and natural for the user to reach the buttons at the bottom for organizing the mail.

In Mail

Since they have hacked around to make certain things work differently from what Android has to offer (like the notification bar on top of your notification bar), why not spend a little bit more time to polish it up for Android users?

What do you think?

Android UI/UX (Re)Design Challenge 2.0

Android Design Challenge 2.0

After a successful Android UI/UX (Re)Design Challenge last year in June, I have been occasionally received inquiries on the second one, as well as some industrial feedback on such design challenge. This is one of the feedback I got:

I ended up hiring one of the finalists in last years competition.  I hired him to do a bit of freelance work on an app I’m building – so it would be good to give similar encouragement to upcoming designers.

Frankly, I didn’t expect that. The aim to make such design challenge is always meant to create awareness towards the importance of Android Design, and it seems to go beyond that – it’s totally awesome! This is why I decided to make the second one, namely Android UI/UX (Re)Design Challenge 2.0.

But first, I have to apologize to all the participants last year for the undelivered Android UI Design Kit Logo stickers – there has been some issues with the sticker quality and hence I decided not to ship any of them. I will look into options this year to make good quality sticker (any suggestions?) and I will send them out again.

Really simple rules

  1. Anyone can participate!
  2. Design a brand new app or redesign any existing app by 18th April 2014
  3. The (re)design should use Android Design Guideline as a reference. Only use appropriate UI patterns and building blocks for your design.
  4. At least 5 screens are required (in order to tell the app flow/structure). Please provide comparison/explanation/justification for each screen. A good example of the design entryDon’t let us guess! I repeat, don’t let us guess! 
  5. App icon can be redesigned to match with the new UI (re)design.
  6. Optional: You can design for the Android Wear version if it meet these design principles. If it’s not, don’t do it!
  7. Optional: Making animated UI design (in animated gif or video) is encouraged, but it will not have huge advantage in the judging system.
  8. Optional: Feel free to post your design to any Google+ Android Design Community (including Android Designers) to get feedback and further improve your app (re)design before your final entry. It’s always encouraging to see such design iterations which involved communities.
  9. Post your design entry in Google+ publicly, and remember to use these hashtags:

#androiduiux #androiddesign #ADiA

Submission

  1. Submission of the final entry must be sent to the email address androiduiux [at] gmail [dot] com (so I know which is the final entry if you have multiple revisions)
  2. The title of the email should be Entry for Android UI/UX (Re)Design Challenge 2.0
  3. Send me the link to the final entry in a public Google+ post (or any link that can be viewed publicly)
  4. I will then send you the confirmation email to acknowledge your design entry

Design Tools

  1. Feel free to use any design tools that you are comfortable with, as long as the final result are high-fidelity mock up screens.
  2. If you are looking for some design resources to start, check out the Free Design Resources page

Winner announcement

  1. Five best entries will be announced via my Google+ account and androiduiux.com after the deadline. They will be also informed via email.
  2. All entries will be judged by awesome android designers in order to pick the winners.

Prize

The 5 best entries will walk away with:

  1. Domo Arigato Mr. Roboto T-shirt. This is a new T-shirt campaign that I just launched for Android fans. If the Teespring campaign is not successful, I will print these T-shirt myself and ship them accordingly.
  2. 10 USD Google Play Store Gift Cards. You can request to make it a Paypal transfer if the Google Play Store Gift Card in USD is not usable due to the difference in region/currency.
  3. I reserved the right in prize management based on the quality of the entries.

Credit

I would like to thank these people for their awesome support:

That’s all! If you are interested, start (re)designing and submit your awesome design entry by 18th April 2014!

Android Design Mock Up Preview Kit for Photoshop and Powerpoint [Free Download]

Android Design Mock Up Preview Kit

I was working on a client request for a realistic screen preview in a device for marketing purpose, and I realized while there are so much love for the iPhone/iPad mock up, there are rarely such mock up preview kit for Nexus devices for free. So while I am working on that request, I also made the Android Design Mock Up Preview Kit (Nexus 5) freely available for any use.

What to expect

  • 1 x Adobe Photoshop file (.PSD)
  • 1 x Microsoft Powerpoint file (.PPTX)
  • My left hand (in the image, not the physical one)
  • Nexus 5 device with replaceable smart object for the screen

How to use

It’s rather straight forward to use them. You should have the screenshot/mock up image (ideally in PNG format) ready with the resolution of 1080×1920. Android UI Design Kit for Photoshop 4.4 can output at this resolution.

  • Adobe Photoshop version: Open it up, double click on the smart object with the label ‘REPLACE SCREENSHOT HERE’, paste the screenshots or mock up in it, and save. The screenshot should be reflected in the preview kit. Drop a background image, apply some light Gaussian Blur on it, and you are good to go! If it’s necessary due to brightness difference, adjust the color overlay effect for the hand layer.
  • Microsoft Powerpoint version: Open it up in Microsoft Powerpoint 2013, right click on the hand layer, send to back. Then right click on the screen layer > change object > select the screenshot/mock up. The screen should be changed to your selected. Send the hand layer to the front. Drop a background image, send backward, apply blur, and you are done! You can turn on the Selection Pane to make the layer management easier.

Some examples

If you are wondering how this preview kit can be used, below are some examples (click on them to view full size):

Example 1

Example 2

Download

As usual, it is ready to download via my Mediafire storage space – Android Design Mock Up Preview Kit.

Hope this helps in creating some awesome marketing material! I will try (no promise) to release a few more variants of such preview kit if I am able to do so.

Android Wear UI Design Kit for Photoshop 0.1 [Free Download]

Haze Watch on Moto 360

As you might have aware, Google has announced Android Wear specifically designed for wearables, and I am really excited about it – new form factor and new UI/UX to explore (and the sexy Moto 360).

I was playing around with mock up on a small app called Haze Watch (to monitor Haze condition in Malaysia), and it’s really fun – with that very limited screen estate, it’s really important to only show crucial information that is meant for a glance, not read – and this design principle is well explained in the official Design Guideline. I am really looking forward to see how Android Wear change the very new wearables market, I guess exciting time ahead?

Android Wear UI Design Kit for Photoshop 0.1

Then I was thinking, why not a simple design kit for those who want to play around with this new form factor which has a very small screen estate? So I decided to make one very simple Android Wear UI Design Kit for Photoshop. What you can expect from it:

  • 2 Adobe Photoshop files – Square (280×280) and Round (320×320)
  • A few different layout like Incoming Notification, Notification Stack, Contextual Card etc.

That’s it! It’s not meant for accurate mock up as of now since I don’t have the design specs, but it’s good enough to play around and get prepared for the next wave.

Download

You can download it from my Mediafire account Android Wear UI Design Kit for Photoshop 0.1. For the round one, it goes really well with Spiderfly Studio Moto 360 Mock Up tool for Photoshop (though you might have to do a little bit of resizing)!

Android UI Design Kit for Photoshop 4.4 [Free Download]

Android UI Design Kit for Photoshop 4.4

Happy New Year folks! In the past few weeks, I have worked slowly on the new Android UI Design Kit for Photoshop 4.4, which is a Nexus 5 version, and today I am happy to announce that it is ready! This time it only comes with Photoshop version though, I am still working on the GIMP version, mainly on replacing the text layers (which I just found out recently the text layers from Photoshop won’t work in GIMP!). If there is any GIMP gurus would like to help out replacing the text layers, do let me know in the Comments section.

This update the Design Kit to Nexus 5 resolution (Portrait Mode – 1080×1920), with several new building blocks added in it.

What’s new in 4.4?

  • Action Bar – PullToRefresh
  • Action Bar – NotBoring
  • HoloGraphLibrary
  • Scroll Bar
  • Search Action Bar
  • Contextual Action Bar

Other than that, every building blocks from the previous version are included, making it the most complete Design Kit to date.

Tips

  • You must first install both Roboto and Roboto Slab fonts before using the Design Kit. It’s a must. If you doesn’t want to install them, you won’t be able to use the Design Kit at full potential.
  • The recommended way to start designing is to use the Quick Start file, then Shift+Drag the required UI elements from the Building Block file
  • Nexus 4 and Nexus 7 Design Kit is available in the previous version

Price

Free. As I mentioned previously, getting every designers to use this and create awesome high fidelity mock ups will already be a very good motivating factor.

However, if you think I deserve to have a cup of coffee from the work that I have done, you can always support me via Paypal, so that I can maintain the chakra to produce awesome stuffs for the community.

Support via Paypal

Download

As usual, the Design Kit is made available in my MediaFire account. Go get it and be awesome!

Android UI Design Kit for Photoshop 4.4 [Nexus 5] ~14MB

If you are using GIMP and wanted to use the WIP version, feel free!

Android UI Design Kit for GIMP 4.4 [Nexus 5][WIP] ~9MB

How I Would Further Improve Camera Awesome for Android

Camera Awesome, a famous camera app in iOS has finally arrived at Play Store for Android users after 20 months of hard work — and it has made a lot of disappointed people, especially those who cares about Android Design (1, 2). I appreciate the hard work that the development team poured into the app, but with 20 months of development time (which they have blamed the fragmentation in Android), I would really expect something meant for Android users. The app itself is almost completely made with skeuomorphic design (I do not against skeuomorphism, but I personally think that flat (or almost flat) design are better one in digital world), which is a completely port from the iOS version in terms of UI and functionalities.

It wasn’t just us Android Designers reject about this, but look at the comments/reviews from the users — they are just going to further strengthen something we are always talked about — users are rejecting Android app with iOS porting, especially when the UI/UX is almost a blatant copy of the iOS version. Further more with this UI, it doesn’t looks too fitting on the iOS 7 which has been refreshed with flat UI design too — probably the designers in the team doesn’t work hard enough.

I understand that this is a 1.0 release, but with 20 months of development, I really expect an almost-polished app. Besides the skeuomorphic design, there are a few things that I really hate:

  • Complete (old) iOS design in Edit screen and Settings screen
  • Used elastic feedback for overscroll together with overscroll edge effect (I don’t think they understand what’s that for)
  • Switching between screens have no hierarchical transition effect (feels like I am using some mock ups)
  • Used the (old) iOS style Share button (I am not really sure when this can be stopped)
  • Strange Share intent

My Redesign

Below are some redesigned screens showing that the functionalities and the layout doesn’t need to be changed, as long as it is designed for Android (ideally with flatter design) and using the right UI patterns. Sure, I must admit it does looks a little bit similar to iOS 7 stock camera, but even with this design, I will already be a happy man using this ‘awesome’ camera app.

DefaultOptionsEdit

Settings

What do you think? Do you like the iOS UI porting or you would prefer a design meant for Android users? I hope you would say the latter.

Sure, Camera Awesome team, I know it wasn’t easy, but I don’t think it’s that hard either.