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!

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.

How I would further improve Feedly App

Feedly is such an app that I love and hate at the same time. I love the way they deliver my news feed when I need them every morning, and the ‘Swipe to mark as read’ and ‘Pull to close’ gestures almost built into my thumb. But I hated them as well. They always look into new idea and fresh design in their app — which isn’t a bad thing at all — but it’s really disappointing to see that they are still ignoring to adhere (or may be should I say, refer) to the Android Design Guideline, that can potentially enhance the user experience even more for Android users.

Sure, there was an seemingly awesome update from their Android team, but this is the one that get on my nerves and I feel the need to rant about it. So how I would further improve Feedly?

Android Design, may be?

Navigation Drawer Indicator

Nav Drawer Indicator

Overscroll Edge Effect

Overscroll

Edge Swiping

Edge Swiping

Consistent Overflow Placement and Color

Overflow

Where is my Roboto Regular?

Font Type

Gingerbread? KitKat is coming out soon.

Settings

Attention to Design Details, may be?

Incomplete Hint

Hint

Spacing…

Menu

More spacing…

Padding

Not-so-smart menu expansion

Scroll

Better QA, may be?

Bug!

Time Machine

Sure, you can call these nitpicking over small details, but every details are design, and every details count. This is what can make your app great or break. And to me, as a user, I have a feeling that Feedly app is always in the beta stage that never complete, pretty much like Siri in iOS.

Perhaps it’s time to look for a better news feed reader that uses Feedly API. Suggestion?

Android UI Design Kit for Photoshop and GIMP 4.3 [Free Download]

Android UI Design Kit 4.3

Today I am happy to announce that Android UI Design Kit has been updated to 4.3, and this is my most complete design kit for Android Designers/Developers to date. And awesome thing always comes in pairs:

  • Supports Adobe Photoshop and GIMP
  • Nexus 4 and Nexus 7 (Basic) Design Kits
  • Both Nexus 4 and Nexus 7 have Portrait and Landscape Templates

Other than that, there are also two new files in the Design Kit: An Android Holo Color Collection swatch (complete with all different levels), and a document containing link to some libraries for development. One of the reason to include such document is to introduce the Android UI Design Kit users about some nifty libraries that the developers can use to achieve the design in the mock up — which hopefully can easily synchronize the design idea between the designer and the developer.

What’s new in 4.3?

  • Building Blocks (Nexus 4 version only)
    • Settings Page
    • Font Size Reference to Developer
    • Empty State Examples
    • Showcase View (Works only on Photoshop version)
    • Random Text List Styling
    • New Date, Time, Color Pickers
    • About Page
    • Cards Library
    • New Stacked Tabs (Similar to Google Play)
    • Glass Action Bar (Photoshop only)
    • Contextual Action Bar
    • Search Action Bar
    • Wizard Pager
  • Files
    • Photoshop PSD (or XCF for GIMP) of Nexus 4 Quick Start (Landscape and Portrait)
    • Photoshop PSD (or XCF for GIMP) of Nexus 4 Building Blocks
    • Photoshop PSD (or XCF for GIMP) of Nexus 7 Quick Start (Landscape and Portrait)
    • Photoshop PSD (or XCF for GIMP) of Gestures
    • PDF of Link to Libraries
    • Holo Color Swatch (Photoshop only)

Tips

  • You must first install both Roboto and Roboto Slab fonts before using the Design Kit.
  • 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
  • Since both Nexus 4 and Nexus 7 template are now in xhdpi, some of the UI elements can be easily reuse with minor adjustment
  • You can only create awesome mock up from this Android UI Design Kit

Price

Initially I was very tempted to charge for this new update since it does taken up part of my free time, however, I changed my mind eventually — I wanted this to be used by everyone that is designing Android app using Adobe Photoshop (and now GIMP), either professionally or as a hobby – so charging a price might be able to grab me a cup of coffee or two, but I am more obsessed with the download number (can you believe that?) and the social connections I made from providing this download. So it will be remain as a Free Download.

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 energy to produce awesome stuffs for the community.

Support via Paypal

Download

As usual, I have made this new Design Kit available at my MediaFire account. File size is larger this time around, but I can’t seems to compress all the awesomeness to a smaller archive size.

Android UI Design Kit for Photoshop 4.3 (~30MB)

Android UI Design Kit for GIMP 4.3 (~20MB)

There is also an updated Android UI Design Kit for Photoshop 4.4 at Nexus 5 resolution (1080×1920), so if you prefer to design in a larger size with latest UI elements, grab that as well!

Android UI Design Kit for Photoshop 4.4

Result for Android UI/UX (Re)Design Challenge

Early this month I have organized a design challenge which welcomed anyone that are interested in design/redesign an Android app to participate, and I am really thrilled by the huge responses from the community! There are in total 25 qualified entries which is really challenging for the judges to pick the best 5 entries that deserve the 10$ Google Play Store Gift Card. Speaking about judges, these awesome people formed the judgment team: Asher SimondsGuenther BeyerLucas Rocha, Juhani Lehtimäki, and Walmyr Carvalho. Huge thanks to these guys for helping me out voluntarily! And yes, I am not part of the judgment team for maximum fairness in the result.

Result

And the final result are as below. Congratulations to these people! In the upcoming weeks, I will publish posts for these 5 entries to discuss about the comments from the judges, and my point of view about them.

Result

Prize(s)

As promised, the best 5 entries above will win away a 10$ Google Play Store Gift Card. For all other entries that are not in the chosen 5, you guys rock too! This is why I have decided to give away 10 pieces of Android UI Design Kit Logo sticker (measured at approximately 4.5cm x 5.5cm) to all other participants to show my appreciation for your entries. Isn’t that awesome?

Android UI/UX Brand

So everyone that participated in this (Re)design Challenge, please do the following to claim your prize:

  1. Send an email to androiduiux [at] gmail.com with the title Android UI/UX (Re)design Challenge Prize Claim
  2. In the email content, please include your full name, your entry title, full international mailing address and full phone number (with international codes)

That’s all! I will send out the prizes as soon as I can. Again, thank you very much for your entries and I hope to see more awesome design/redesign from you in the community! Till next time!

Android UI/UX (Re)Design Challenge

Android Design Challenge

Taking cue from Android Design in Action Challenge happened last year, I just feel like making another similar Design Challenge for everyone, hence this Android UI/UX (Re)Design Challenge. The aim is to create more awareness towards the importance of Android Design, and a (hopefully) rewarding experience for those who try their hand at Android Design.

Really simple rules

  1. Anyone can participate!
  2. Design a brand new app or redesign an existing app (any app) before 16th June 2013 (I like to see high quality works thus the longer design period)
  3. The (re)design should use Android Design Guideline as a reference. The use of new UI elements like Navigation Drawer and Fading Action Bar are encouraged only if they fit into the app design.
  4. At least five screens are required (in order to tell an app flow/structure). It will be awesome if explanation/justification is provided for each screen. One good example on how you can document your (re)design is the m-Indicator redesign by Swapnil360.
  5. Optional: Feel free to post your design to any G+ 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.
  6. Post your design entry in G+ publicly, and remember to use these hashtags:

#androiduiux #androiddesign #ADiA

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 G+ account and androiduiux.com within a week after the deadline (before 23rd of June).
  2. All entries will be judged by professional android designers in order to pick the winners.
  3. I will make some posts in my blog for all best entries (and probably some interesting entries) after the design challenge.

Prize

  1. Five 10$ Play Store Gift Cards for five best entries only (from my own pocket!)
  2. I reserved the right in prize management based on the quality of the entries.

That’s all! If you are interested, start (re)designing and submit your design entry before 16th June 2013! Waiting for your awesome entry!

Yes Life for Android Redesigned

It’s been a long time since my last blog entry, but definitely I am still working on tons of Android Design (in private) and they are often very inspiring, which I hope I can share them in the near future if it’s possible.

Today I would just like to share some redesigns for an app that is local to my home country. The app called Yes Life, which basically an app that allows the user to call and send SMS to any local number from anywhere around the world with internet connection. Below are some screens from the current app:

Yes_Old_Dialer

Yes_Old_SMS

There are few things in the app motivated the redesign:

  • Almost 90% iOS UI Style (and ugly)
  • (Very) Bad navigation system
  • Usability issue (For example, online/offline status only in the Dialer page)
  • Buggy (which unfortunately cannot be solved by a redesign)
  • Missed the opportunity to enhance the branding 

To address these few issues that I see, I did some redesign on some screens with Holo UI approach (of course!) with the following changes:

  • Designed with Holo UI approach
  • Used (swipe-able) tab navigation
  • Used Action Bar (for better context actions and navigation)
  • Show connection status in every screens (which is important for such app)
  • Used light/white theme (for branding enhancement)

Below shows a few redesigned screens:

DialerSMSsSMS Detail

What do you think?

I hope this gives some idea on the importance of the app design in branding enhancement. If you have excellent solutions and branding, but decided to give your user bad products, it doesn’t do good on anything except getting rejected by the users.

Design is not just what it looks like and feels like. Design is how it works.

Bloomberg Redesigned

Bloomberg – another app that I wanted to redesign so long, because the app is pretty badly designed ever since day one. It is almost an exact port of the iOS version, with a really strange ‘MENU’ button at the bottom of the app,  and the deadly legacy menu button. Below show some shots from the current version for comparison:

Old_News

Old_Equity

Old_Stock Details

So what if the app is redesigned with the Holo UI approaches and full Android experience? Below are some shots that I have redesigned:

Worldwide News

framed_Slide In Menu

Equity Indices

Currencies

Bonds

My Stocks

Stock Details

And also some redesigns for tablet version:

Tablet - News

Tablet - MarketsWhat do you think? Do you like the redesigns? Don’t hesitate to shot in the comment box!

LinkedIn Redesigned

LinkedIn app is one of the app that I wanted to redesign so badly that I hate it when I am using it (only for accepting request and replying message). It might looks good 2-3 years back, but not anymore today.

There are a few reasons that I think this app deserve a complete redesign:

  • Resemble iOS version almost completely 
  • Lack of navigation in the app
  • Unnecessary skeuomorphism
  • Legacy menu button
  • Badly designed UI (for example, the dashboard give really limited information)

Below I included some screenshots from the current app:

Old_Profile Old_Updates Old_Dashboard

Using the Holo UI approaches, I have redesigned a few screens that fit nicely in today’s Android devices. I have replaced the dashboard UI with the Sliding Menu due to the huge number of sections available in the app. Check them out below:

Linked In - Slide Menu

Linked In - Updates

Linked In - Profile

Linked In - Profile 2

Linked In - Shared Item

Linked In - Other Profile

Update 28/12/2012: After taking some feedback from my G+ post, I have decided to give it another revision for better LinkedIn branding, and below are some updated shots. What’s changed:

  • Action Bar is in dark grey color to give a distinct UI layers
  • Added frame for photos
  • Used Card UI for details
  • Added some iconography
  • Increase the size of the sliding menu and smaller icons
  • Added Share button besides Invite to Connect button

Linked In - Profile

Linked In - Slide Menu

Linked In - Other Profile

What do you think about my redesign? Do you like them? Shot me your comments or suggestions!

Android UI/UX Tips #5

Another month, another UI/UX Tips article!  This time I looked into the swiping action between tabs, proper handling of multiple notifications, proper dialog actions, and some smart use of colors to indicate different states.

Swiping between Tabs, Please

Tab Swiping

I think this has been mentioned many times by Android Developers Team, as well as some Android Designers. If you are using tabs in your app, please please please, make sure they support the swipe gesture. It is a system-level interaction pattern, and it is clearly mentioned in the Android Design Guideline. Your users won’t be happy to realize that they can’t swipe to change tabs, which is extremely useful when the device is used with one hand.

Properly Handle Multiple Notifications

Multiple Notification

In a previous version of Google Drive, when you try to upload multiple files in a session, you will get the notification spams (shown in above image), fortunately, it has been fixed in the latest update. If your app can create multiple notifications with some user actions, please make sure that they are handled properly – group them and show the relevant information.

Proper Dialog Actions

Dialog Actions

Sometimes developers/designers tend to overlook the actions available to the user in a dialog. In this shown example, when I was shown with this dialog, I have no way to confirm my selection of font unless I press the Cancel button. This is very confusing for the user,  and definitely not designed according to the Android Design Guideline. Ensure that whenever there is such selection dialog, dismissive and affirmative action buttons are there for the user.

Smart Use of Color for State Indication

Color 1
Color 4
Color 3

Above shows some great examples from recent updates for Google Current and Google+. These are very subtle, yet informative approaches to notify the user about the state, so do consider for such approaches whenever your app requires to give the user some information/feedback regarding the state of something in the app. I really like these!

That’s it for this Android UI/UX Tips! Feel free to share around if you find these information useful, and as always, hit me with comments if you have any.