LocalLedge: Material UI/UX Redesign, Icon, Illustrations

I worked on redesigning LocalLedge, a social based app that lets you chat with others within a specified distance. The old app was hard to navigate and didn’t really follow any platform specific guidelines. Icons were all over the place. Things overlapped each other. There was an un-skippable 8 step tutorial at the beginning. I updated it all to conform to Material Design standards and created some illustrations to make the app more fun to use and easier on the eyes. The 8 step tutorial was reduced to 3 steps, plus one to explain the general concept of the app. Each was accompanied by an illustration as well. I updated the icon to better represent the brand and, once again, to conform to Material Design guidelines. I worked with the owner of the company as well as directly with the dev to help him get the app looking as it does now. I pointed him in the direction of specific support libraries he could use and told him about Android 5.0’s new SVG abilities to keep iconography looking sharp and clean across all screen sizes. Overall, a very enjoyable experience working with the owner. Here’s what he had to say:

“I’ve outsourced 1000’s of projects during my 10 years of Digital marketing and can say without a doubt Casey is on the top of that list when it comes to providing value, communication, finishing mile stones on time and being able to perform creative quality work. I would recommend him for any Material Design project and plan on using his abilities again in the near future.”
Jacob E. – Founder LocalLedge

Keep scrolling for a more detailed breakdown of every decision I made when redesigning LocalLedge.

full app

A small overview of the app as a whole.

New Ledge

A detail of the “New Ledge” illustration.

Intro Screens

Detail shot of the illustrations for the reimagined intro screens.

the ledge

This was the first part of the app I tackled. The main page. There were several iterations of this and several different parts that had to be thought about. The first and most obvious change was the switch from bottom tabs to a navigation drawer. A lot of thinking went into this, because studies have shown that navigation drawers do decrease day to day interaction within the app. In the end, we decided to go with it though. The next big change was the left hand iconography. LocalLedge lets the user change the privacy of his/her “ledge” (basically a chat room), from public, private, or protected. Previously, the iconography for these options was inconsistent and confusing (private and protected even shared the same icon). I changed this behavior so that a red lock represented private, a yellow key represented protected, and a green unlocked icon represented a public ledge. Smaller changes included a Floating Action Button (FAB) to add a ledge, a custom “The Ledge” icon in the navigation drawer that conformed to material system icon standards, and more consistent spacing based on material guidelines throughout.

Intro

This, in my opinion, is the shining star of this redesign. When I first installed the app and opened it, I was greeted with a tutorial. Not out of the normal for an app to have a short tutorial at the beginning; Google does it in their own apps. This tutorial, however, was 8 pages long, and un-skippable. Text was weirdly spaced, and it just wasn’t a pleasant first time experience with the app. And, at the end, I still wasn’t 100% sure what exactly the app did (because let’s face it: what user actually reads the whole Play Store description?) In my redesign, I fixed all of those problems. The tutorial was reduced to 4 steps, each with a more broad explanation of what things within the app did, each accompanied by a beautiful, fun to look at illustration. The first slide describes exactly what the point of LocalLedge is, the second explains how to create a ledge, the third, what the various types of ledges are, and the last gives a broad, easy to understand description of geofencing. And, if the user still doesn’t want to go through the intro tutorial, they can tap the skip button and be brought directly to the main ledge page. I’m incredibly happy with how this portion of the app turned out.

New LedgeNext I looked at the new ledge page. There wasn’t much wrong with this page, it more or less just needed a makeover. I created the illustration at the top of the page to give it a nice visual flare. It came at the cost of requiring a bit of scrolling, but from a UX standpoint, a little scrolling isn’t going to hurt much in the long run, especially if it’s because the page looks a little less barren. One thing I noticed in my initial use of the app and that was also pointed out to me by the owner was the OK and Cancel buttons. They were switched! It’s something small, and you might not even realize it, but in almost every program and app you’ve ever used in your life, the positive action has been on the right, and the negative has been on the left. Almost every time I went to create a new ledge, I would hit cancel at the end, simply because of muscle memory. I switched them to the correct way in the redesign. Everything else was just a coat of paint, with material style buttons, text boxes, and menus.
chat

From there I went on to fix the chat. This one was a fun one to try to figure out as well, and I went through several iterations before I came to a happy conclusion of what to do. In Android, bottom tabs are, well, looked down upon, unlike iOS. The tabs needed to be switched to swipe-able top tabs. This is where I hit a block: The description was at the top. The decision I eventually came to was to create a custom “d” icon that, when tapped, would bring up a dialog box with the description text in it. From a usability standpoint I’m not absolutely positive this was the best decision, but in the end I think it’s ok since even if the user never finds the “description” icon, he/she could get the gist of it from the main ledge page. login

Login screen was next. Pretty simple here, just another coat of paint with an illustration thrown in.

notifications

Same as above, really. Just a coat of paint. I tried to keep a consistent flow on this screen with the main ledge page, so I moved the notification count numbers to the left side, just as the privacy icons are on the other page.icon
And last came the icon. After working with it for so long, I had a really solid understanding of the concept of the app was and what the owner was looking for. We had originally attempted to start with the icon, but it got moved to the backburner after 4 or 5 iterations he wasn’t happy with. By leaving it until the end, I was able to solidify my knowledge of what LocalLedge aimed to do and could more easily create an icon based on it. The icon is a combination of a ledge, seen in illustrations throughout the app, and a chat bubble, with a map pin on top to represent the location based nature LocalLedge.

Feature GraphicAdditionally, he asked me to create a banner image for the play store.

Skills

Posted on

April 4, 2015