Or How We Gave The Trello Android App A Material Design Makeover.
At this point you’ve probably already read about, used, and given us helpful feedback on our latest version of Trello’s Android app. Now it’s time for us to give you a little insight on how we brought this beautiful app baby into the world.
What is Material and why did we embrace it?
Google’s Material guidelines were created to develop a cohesive experience across devices and platforms. It’s anything but “flat design.” The guidelines are based in reality — using paper, ink, and shadows — without falling into the realm of skeuomorphism. They also emphasize the use of magical, smart, and intuitive interactions and animations. Interacting with an app using Material’s principles is more tangible and innate, yet has a touch of delight and whimsy.
So, in August, the team was discussing a roadmap for the Android app. We were aware that the next version of Android, Lollipop, was going to be pushed out to the public in a few months and we wanted to be ready for it. Our app was feeling stale. Until now, new features were bolted on instead of being massaged in with the deft fingers of a designer. This seemed like a perfect opportunity to reimagine Trello on mobile! We decided that we should redesign the app using Material, while addressing existing sore spots, for a more user friendly product.
How did we keep the app feeling like Trello?
We were acutely aware of the possibility of losing the Trello experience if we were to update our visual style to that of Material. We also wanted to keep things unified across Android, iOS and the web as much as possible. The app’s structure and user flow had to be taken into consideration before jumping into design and development. We used Material’s principles as a guide rather than strict rules that must be followed to the letter.
Our main goals for the app were:
- Be recognized as Trello
- Retain the core functionality that our existing users know and love
- Be easier to decipher for people that are new to Trello
- Be the starting point to designing a more consistent experience across all platforms
Not everything outlined in the Material guidelines fit the way Trello works:
- Cards in a list are a no-no
- But, that’s uh, kind of how Trello functions
- The Floating Action Button (FAB) doesn’t always fit certain situations
- Having one in a board would be too confusing, although we really did try
- The colors provided in the Material guidelines, while vibrant and playful, didn’t mesh with our brand
- We stuck with the colors specified in our branding guide. While it might not seem like a big deal, staying on-brand really helped emphasize the Trello-ness. This will also help with consistency in the future when working on other platforms such as iOS.
Alright then, what changed?
EVERYTHING… But ending it there wouldn’t be much of a blog post! Let’s get more in-depth.
The overall structure has been...materialized.
Trello for Android: before and after.
We stuck very closely to Material’s principles, metrics, keylines, structure, and typography. These alone made a big impact on the overall clarity and cleanliness of the app, and since they’re universal changes, I won’t go into specifics on each section.
Users get to the core functionality of the app faster. The layout is based on an 8dp baseline grid. Typography has been cleaned up, as well as our color usage. Saying we had
fifty (ugh, sorry) many shades of grey (and blue) throughout the app would be quite an understatement.
Bye bye, navigation drawer. Hello home screen!
Home screen: before and after.
After much deliberation between the designers and devs, we got rid of the navigation drawer. The drawer was a big part of our app, and it was a hard sell to scrap it. Every progress meeting would touch on the subject, everyone had their own opinions, and until the design team came up with a convincing flow, there was hesitation when it came to implementation.
Our use of InVision helped us experience the flow of the app without tying up devs. It was invaluable. We also set up a system where everyone can voice their concerns, but our
dictator agreed upon designer, “The Decider,” would take everything into consideration and make a final decision.
So, instead of having a hamburger icon available to open a drawer that doesn’t provide much room to see a list of boards, we now have the user navigate to and from the home screen. The home screen already existed, but was redundant when you had it and the navigation drawer open at the same time.
The home screen is populated with all of the user’s boards, listed by priority: Starred, My Boards, and organization boards. It’s a better use of space, provides clearer hierarchy, and is a visually friendlier way of finding the board one needs. Starred boards, the boards most frequently opened by a user, conveniently cater to Material’s suggestion to use “bold, graphic, and intentional imagery.” They also make use of hero titles, even on phones, because of the extra room, providing more hierarchy cues.
We knew we had won with this new solution when one of the devs — one of our main opponents against losing the nav drawer, in fact — mentioned that he hadn’t missed the drawer when using the app!
Feels good, man.
Here’s something to note: A key component to any app redesign/creation is that the people working on it should also use the product. If we were not avid Trellists, we wouldn’t have thought or debated as much about what we were working on. If we didn’t actually use every beta we came out with (not just test for specifics), we’d be poorly informed when making decisions and would be clueless regarding what problems have been solved or created.
App bar menu.
The app bar, “a special kind of toolbar that’s used for branding, navigation, search, and actions,” has undergone some changes, aside from losing the hamburger icon.
Our logo is no longer included in the app bar. If you’re already in and using the app, we trust you’ll remember what it’s called. Plus, if it was there, we wouldn’t have room for your avatar and name, which acts as a menu to switch the home screen from displaying your boards to your organization’s boards.
Search and notifications have been updated to fit Material guidelines, as well as the overflow menu. There’s one thing missing from the overflow though, and that’s the “create board” option. We turned it into a FAB!
Tap the FAB to create a new board.
Previously, new boards could be created through the navigation drawer, which meant it was easy to dismiss; and the overflow menu, which was hidden. Neither made sense for a core function of the app. This was especially painful for a first user experience and it needed to be fixed. Now, the FAB is always visible on the bottom right of the home screen so a user can create new boards at a moment’s notice.
Board view: before and after.
We made use of elevation, giving the board view some hierarchy and dimension, using the z-axis, starting from the bottom where we have the board, then building upward to lists, then cards.
The app bar within a board is a little different from the one on the home screen. Along with the stripping of the hamburger menu and Trello logo, we no longer have a spinner that hides members or archived cards and lists. Because of this wonderful development, we now have room for the board name to breathe.
All the colors!
If a board uses a background image, the app bar will pull a color from it, further personalizing the board. The notification icon has been removed — board activity updates are in our new drawer menu. Filtering has been moved up to the app bar to help users easily find the card they’re looking for. Finally, the overflow icon activates a drawer with menu items for board actions.
New addition: Board-drawer 1
The board drawer is accessible by tapping the overflow icon (the ellipses on the right) in the app bar. The drawer slides out from the right, above everything, providing easier access to different actions a person can take on the board they are currently on.
Our previous interface required people to hunt and peck for the actions they wanted to take. For example, it was nearly impossible to find items like archived items or members, especially for those that were new to the app. We needed a solution that gave a user easy access to every action they could take on a board with no time wasted.
We toyed with the idea of having a toolbar for members, activity, and archived items at the bottom of the screen; but that would have taken precious real-estate, leaving very little room for actual content, and causing too much back and forth between screens. It also created a problem where importance was given to items that might not matter to some users.
Eventually, we came to the solution of having all actionable items in one easy to access place. It made more sense. It provided greater ease of use and wastes less time.
Archived items: before and after.
The drawer also includes archived items, which were previously hiding behind the app bar spinner. Now, one can see what cards and lists have been archived for the board in question and easily unarchive should they feel the need to revisit.
We understand that having a more robust drawer interface where there should be a menu breaks a pattern in Android, but we feel that it works as a strong solution and went forward with it. The drawer serves as a direct way to access items that aren’t important enough to be front and center, but still deserve more than a convoluted user flow in order to access a dialog or bottom sheet.
Lists: before and after.
Lists now look more presentable with distinguishable headers and footers that also play into our use of elevation. This change gives the look of cards sliding under pieces of paper instead of mysteriously disappearing underneath a list title when scrolling. Just that small change cleaned up the look of lists (and subsequently, boards) ten-fold.
Cards: before and after.
Cards have all the same content as before, so no need to worry when it comes to quickly scanning for information. In fact, there should be some celebration! Cards are more readable, and feel more at home with other Material Android apps, due to our use of Material’s card layout guidelines.
Circular avatars are all the rage, but our use of them is more than just being on trend. Changing our avatars from squares to circles softens up the look of the app, which can tend to be rectangles on top of rectangles. Circles also help differentiate avatars from board thumbnails, which are rounded squares.
Cover images are flush to the top and sides of a card for some deliciously clean, full width images. Because of this, cards have a more uniform look no matter what the true size of an image may be. Hooray for no more weird whitespace! This has been a point of contention within Trello, especially for the web app. With all the information a card contains, especially labels, it’s hard to prioritize what should be shown first, or what gets the most emphasis.
Speaking of labels... We love them and use them almost obsessively. But, what’s the point of having so many wonderfully colorful labels if you can’t see them? Exactly. That’s why we decided to move them below those beautiful cover images to give them some room to grow. Larger labels serve the purpose of gathering information at a glance, especially for those of us with waning eyesight. The larger size and move is also in preparation for Unlimited Labels, a feature that’s already available on the web, and coming very soon to Android. (We promise!)
Card back: before and after.
We’ve been experimenting with the card back interface for over a year — well before and during the introduction of Material Design. The card back is the interface you see when you tap on a card. Our two main concerns are always:
- A card can contain a lot or very little information. How do we balance the design so that it’s beautiful, functional, and quick to use for the varying amounts of data a person can input?
- How do we add complex data types such as members, labels, due dates, etc, that all have data actions within each one?
The card back has always been a huge design challenge for us and we’re constantly looking for ways to improve it. The new guidelines offered us another opportunity to ask some additional hard questions:
- What if there were no dialogs and the user could add content inline or through bottom sheets?
- What if the FAB was attached to the header? Do we need the FAB at all?
- What if we had a bottom toolbar for quickly adding content?. (View this on InVision.)
View how a toolbar would work on InVision
The list goes on, but we came to the conclusion that we needed to validate these experiments thoroughly. We decided to keep things simple and clean up the card back’s main pain points for this release.
The card back has had a FAB even before it was introduced as part of the Material Design Guidelines. We haven’t changed a lot of the functionality of the FAB, but we went through many iterations on the best placement. We opted to keep the same position, updated the UI, and added labels to easily identify the icons.
Tap the FAB to add your card!
Like the rest of the application, we completely readjusted the metrics of the card back to align with Material Design’s patterns. We updated icons, spacing, alignment, and obsessed over UI polish to make sure you can find what you’re looking for and process information quickly.
We’ve cleaned up all the dialogs. Adding members, labels, due dates, and attachments now feels unified. We also simplified adding due dates so that it’s easier and faster with predefined options such as today, tomorrow, and next week. Of course, you can still implement a specific date and time when necessary.
Redesigned, recoded, and collapsable: checklists should provide no more frustrations! We improved spacing around all checklist elements to help you quickly process information and easily add, check, complete, and delete items. And, as we all know, checklists can grow exponentially — they can also multiply. Because of this, we’ve added the functionality to collapse/expand checklists so you can focus on the items that are most important to you.
Action Bar Menu.
Action bar items have always baffled us as designers. “Why can’t the user just tap ‘Done’ on the keyboard?” is something that we’ve said over and over. Yet, all of our user tests and feedback show that people expect a UI control for the “Done” command that’s separate from the keyboard. For this reason, we’ve unified and cleaned up the action bar edit commands. It now features a title for what you’re editing, the ability to cancel, and a checkmark to complete the edit.
Attachments: before and after.
The number one item of feedback we get from our beta testers is related to attachments. The majority of users don’t want to see image details; they’d rather see more of the image itself. It makes sense: images want to be looked at. We’ve started to organize attachments by their data type. Images are larger and displayed as a grid. Other types of content, such as files, Google Drive and Dropbox links, now feature vendor specific icons and attachment details. We have a lot of work to do here, but based on your feedback we are taking a step in the right direction.
We’re very happy with this iteration of the card back, but it’s an iteration, and we have many ideas and experiments that we’re working on. We plan to bring a lot of updates to the card back in 2015.
Good grief, that was a lot!
Yeah dude, I know. We toiled over this. We made endless notes and sketches on notebooks: plain, lined, gridded and dot-gridded. We designed in Sketch and critiqued on Trello, InVision, multiple hangouts, and even in person (we’re a distributed team). Then we iterated. And iterated. We’re still iterating, honestly.
We got a little angry and frustrated. Those stupid dialogs wouldn’t give up without a fight! Animating that board drawer was a pain. The L preview made the battery on our devices die within hours, even if the dang things were just sitting on a desk!
I personally had dreams about some of this, which is a fun moment in my life that I probably shouldn’t share publicly.
We hope you love this version of the app. We’re happy to do this for you, and to continue working toward making a beautiful and effortlessly useable experience on a product that, just like you, we use every day! There are new features that will be making their way to the Android app soon that a lot of you have been requesting, so please keep an eye out and join the discussion! We encourage you to add yourselves to our beta group as well as follow the design team’s work on Dribbble.
1 Since I started writing this blog post, we have received feedback on the drawer that we decided to implement. We will be releasing a version of the app soon that will go back to having a menu, somewhat restoring the pattern that we broke. The menu will still work the same way, just look the way it’s supposed to. Everything is still easily accessible from the overflow menu, so no need to worry! Feedback and iteration, y’all. It’s a thing that happens.
And oh yeah by the way, we are hiring.