The Undesigner Redesign : Chapter 1
How I’m Trying to Redesign Our Most Useful, Ugly App
This series is about me trying to redesign our most useful app, Spend Stack. As a pure code junkie with zero design sense or experience, follow along as I try to give this app the design and UX it deserves while learning the art of design from scratch along the way.
I’ll get right to it. I created Spend Stack way back when. I was just learning iOS, and I wanted an app to solve a specific problem I had.
Turns out, others were looking for something like it, too. I’ve learned so much about iOS in the years that have past since then, but none more so than this — I can’t design my way out of a wet paper bag.
Let’s look at some of Spend Stack’s many design problems.
The Icon
Around three years ago, Clear was as hot as ever. We were still lauding it for its clever gesture based design. I, personally, was a huge fan. So much so that I thought I might pay tribute to it by practically swagger jacking their icon design.
As you can see, Clear’s icon is still phenomenal. It has vibrant colors, and it draws attention to one central shape in the middle. Further, it conveys a sense of what Clear is all about, which is creating a list of things and eventually clearing them out.
In fact, it seems I wasn’t the only one to come away impressed with their design. A quick trip to the App Store in the Productivity section reveals plenty of icons that are similar.
So, I thought I might try the same thing. A central logo with a four gradient rows behind it. Since Spend Stack deals with keeping track of money, green felt like a natural color for the icon. Also, I thought it was super clever to make an “S” that sort of looked like a dollar sign.
In retrospect, a lot went wrong here. One, I feel that it’s trying a bit too hard. While I adore Clear, consumers or the more savvy shopper doesn’t know that. To them, it may seem that I was trying to ride off of their brand recognition.
Further, the “S” dollar icon doesn’t show up anywhere else in the app. It’s not its logo. It makes it a little inconsequential, though if I had gone with that logo in other places it might have made sense.
Perhaps the biggest issue, though, is that Spend Stack can be used outside of the U.S. That means the design being based off of American currency doesn’t localize well with international audiences.
The Colors
The App Store has democratized software for a lot of us. I believe that’s a truly beautiful thing. It also means that many of us are learning other skills that we might not have thought about before. Namely, developers learning design and vice versa (the latter has been written about several times).
More than ever, there are talented developers creating interesting apps, but they’re completely unusable.
Spend Stack is no exception to that hypothesis. Years later, I can instantly recall several apps that do vibrant colors well. The 2013 version of me wanted that too. After several trips to Adobe Kuler, I came up with some real eyesores. But, I wanted Spend Stack to look “fun”.
I didn’t accomplish that — here’s a selectable color scheme that proves it 😁:
Another issue stemming from my love of Clear — the gradient colored table view. Perhaps that’s why Clear is featured in the “Credits” view, which is a screen that absolutely no one goes to.
Back then, I would never ask “Does this help accomplish the app’s mission statement? Is this helpful?” - I just included it. It didn’t make sense for the app, since power users who would be comfortable with the gesture based input were not my actual users.
It’s easy to see, though, that the colors in the app make things hard to do and content hard to see. On the other side, an app that really pulls off the “fun” look with vibrant colors? Slack:
The mistake that I made several times was not recognizing which “busy” and fun colors were easy to look at and consume. For instance, Twitter really plays off of their blues quite often. But, I’ve never felt that it was overbearing or distracting from the content:
The Gestures
Even with all of the rough color schemes a user could select, perhaps the biggest design problem was that I didn’t ever think about the people who use the app. Many years later, this is always one of the first questions I ask after I’ve validated an idea.
It turns out that busy moms and dads ended up buying Spend Stack. They too wanted to shop with primarily cash, and wanted an app that would keep a running total of their grocery trip with their local tax rate included. Spend Stack could solve their problem, but it wasn’t designed for them.
Too bad, then, that I designed it for one user in mind — me.
Essentially the whole UI doesn’t contain obvious buttons. It was all centered around gestures, which is what I thought would make it easy to use with one hand. Back then, the iPhone 5s was the big kid on the block and iOS 7 was still in beta when I started development. I thought gestures would be awesome.
To make matters worse, some of the scrollable areas were very small. In the image below, the top orange bar scrolls horizontally to go the next option. A table view would’ve been much more sensical.
Gestures were used all over. To add items, delete them, choose options, dismiss menus, and more. This may not sound so bad on paper, but it just didn’t work in practice.
The hard thing about gestures is that users don’t know they are available — they have to discover them. And if users have to trial and error their way through your interface, they’ll likely leave frustrated. If the gesture isn’t well established within the context of iOS already, I’d just leave it alone.
Lack of Negative Space
As far as pure design knowledge, I think the biggest thing I’ve picked up is the benefit of making things breathable. I’m referring to having a healthy amount of negative space. One company that I’ve always thought is great at this is Dropbox:
Anytime I use Dropbox on iOS, I feel like it’s just easy to use — but more importantly it’s extremely welcoming to look at. The information is presented with great contrast and a lot of white. I’m also very fond of the direction Twitter has gone with this as well:
The Cost of Doing Business
It wasn’t all bad, though. Besides taking away a ton of learnings, one thing I did right was the video I created for its release. As I’ll mention later in another post, I did quite well by Spend Stack locally. It was featured on the locals news, college commercials, and more.
I think a lot of that had to do with this:
While that’s great, it also means that when I redesign and relaunch Spend Stack — it’s essentially worthless. Was it worth the expense? Time will tell, but soon it’ll be nothing more of a reminder of what the app used to look like.
Regardless, I think the video really gave it credibility and I’m glad I doubled down on it. In the end, Spend Stack still hit #18 on the charts for Finance, and I was really proud of that:
Wrap Up
I feel fortunate to be in a somewhat unique place. I can program anything, really execute on any idea from a technical perspective. However, I know now more than ever that it doesn’t matter if the software doesn’t feel right or look good.
Now, I’m venturing down uncharted territories. I’m redesigning Spend Stack completely to try and implement everything I’ve learned over the years — a process I’ll document entirely here.
What about you? Are you a code junky trying to learn how to design? What’s a common mistake you see in iOS design? Have you successfully redesigned one of your earlier works?
Thanks for reading, and I can’t wait to learn from you — I’d love to keep the conversation going.
