Have you noticed anything new, sleek and shiny about the Android (and iOS for that matter) application as of late? Yes, that’s right! We’ve completely overhauled the look and feel of the Android application, bringing all the hard work that our design and iOS teams took on recently for the iOS App, to Android.
Why update the look and feel of the app?
Blink as a product has undergone a massive amount of iteration in the last few years. As a product team, we love to explore new ideas and add lots of compelling and useful tools to the application in order to better support our users.
With fast iteration comes the potential for design and implementation to suffer from inconsistencies.
Introducing new components to the app may result in adding a new colour, or slightly different spacing. Fonts may be too large, or indeed too small. It’s these inconsistencies that we felt had a negative effect on the way we use the app, and the overall satisfaction. We know that the core functionality we have built is first class, so we want it to look and feel first class too!
One of the core values of the Product and Engineering team is; “Obsess over delighting users”. We really feel that this goes right down to the last pixel, and thus the UI Refresh work begun!
What did we do?
We first tackled Fonts and Colours. Font work required replacing our stylesheet of hundreds of individual font styles, with a much neater and smaller list of 11 styles, plus bold versions of each. Similarly, the colour work required replacing a list of nearly 300 different colours with a list of just 40. Already the app was starting to look much more consistent, and has a much more uniform feeling during usage.
Next up is to align around a new grid system. This means that in almost every view in the app, we’re working on a grid of 4. For various reasons no longer relevant, we had all sorts of paddings, spacings and margins throughout the app, but we’ve converged on a 5 core padding values, with a few more for valid cases where needed. This means that the spacing around the app is now much more consistent, another plus one for uniformity!
The final (if we can call it a single task) task was to take the app screen by screen, and ensure we’ve matched up to new designs where things converged. This was no small feat, but we’re really happy with how it’s come out. Some highlights from the core features.
The Feed
- New comment bubbles.
- Consistency around padding in feed posts, buttons should be more accessible now too.
- New filter tabs layout / style
- The Share box has also had a makeover, and some of the more useful options are presented front and center now.
The Chats
- New tab design, it’s clearer now which tab you’re looking at.
- Slightly updated design for inbox items.
- New font and paddings in the conversation view allow you to focus on the messages.
- Updated designs in conversation detail pages to bring design together.
The Directory
- Consistent icon sizes for Contact/Team rows in the Directory.
- Focus on Favourites, we’ve made the avatars much larger to bring those Favourite colleagues to the forefront.
- Updated “My profile” section in the Directory tab.
- Updated User/Team profile pages.
The Hub
- Brand new Quick Links layout with larger, rounded icons.
- Hub item rows updated to be consistent with other lists in the app.
The Settings
- New profile design
- Again, item rows have been updated to match the look and feel of the rest of the app.
