The Undesigner Redesign : Chapter 2
The Outline
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.
And I’m off 🏃.
I must say, it was a lot of fun. After doing some reading and research, it seems that all design professionals and influencers have a similar flow — once an app’s been validated and thought through, get on dat’ outline ⚡️!
Or is it a wireframe? Or just a paper drawing? Or is this a mock up?
¯\(°_o)/¯
A Dose of Irony
The vocabulary in the design industry seems just as vexing and confusing as it is in my comfortable world of software development. I always show a warm smile when a new developer asks me “What’s the difference between a function or a method?”
And yet, here I am, the newcomer in the huge world of design. I still don’t know if what I just did was an outline, a wireframe, a prototype, a mock up or anything else in that realm. As my engineering analytical side took over (as it so often does) — I found myself a bit cloudy on how to communicate with others about what exactly I had just accomplished. But, here it is:
The Pregaming
Initially, I found myself quite initimidated with the prospect of creating an outline for an entire app. Even though it’s small in scope, that’s a big pill to swallow. After this week, I do wonder — are experienced UI/UX mavens out there faced with this same emotion when you begin your pixel ninja sessions?
Anyways — instead of just firing at will I recalled that it might be helpful to establish a “design language” of sorts to help guide your path. So, I looked to other apps that had a feel for the direction I’m thinking I’m wanting to take things.
Much like any other human in their late 20s who wanted to create a giant list of things and pictures online, I created a Pinterest board to hold anything that had the “feel” I wanted.
Their Chrome extension ended up being 💯 for this. I typically stray from extensions, but when I caved here I caved hard. The challenge then became to really think before I added another pin.
Since the barrier of entry to adding pins to my board was so low, when it was previously high (i.e. go to Pinterest, go to my board, hit upload, select a file, add a description, click save, wait, go to the pin) I found that I added some filler here and there. Personally, when lists get large I feel a bit scattered.
So — I went back and separated the wheat from the chaff. This felt great, because I was left with fewer pins and only one common theme that held it all together. That simple, clean look I’m so desperately chasing for Spend Stack.
The Ramp Up
Once I had a common set of themes to go off of, I felt like I had a higher sense of clarity. This was super helpful, because even though the task was daunting to me — I at least had some momentum to carry me into the thick of things. Before, it felt like I was jumping into a roaring river naked and blindfolded. Now, I felt like I at least had a life vest and calmer waters.
The thought that I just needed a loose sense of what this app will look like helped me get going. At first, I just pulled up Spend Stack on my phone and thought about redesigning each part. But, that’s what got me where I am today 🙃. While the UI is unpleasing, the UX isn’t awful — though it’s also not great.
So, I backed up. I thought to myself, what are the core parts of Spend Stack and what would that look like starting from scratch today? What are the verbs here?
- Creating a list that in some way is associated with budgeting and money
- Adding any sort of item to that list (i.e. an apple 🍎, or an Xbox for a list of Christmas shopping 🎅🏼)
- Editing any data about an item (name, price, media, notes, is tax included, etc.)
- Editing any data about the list itself (name, tax rate, theme — possibly?)
- View all of the lists you have
- The dreaded “settings” — contact, help/support, rate
This really helped out — because already, I’m feeling that Spend Stack might be doing too much if the redesign follows this path. I hope I’m wrong, because personally I’d love all of those things — but I’m not sure if the average person who uses Spend Stack will.
And that’s what is currently wrecking my brain, and hard. Most of my users pull up Spend Stack for one main thing — grocery shopping. And they use it over other apps because it figures in their local tax rate, the main “hook” that Spend Stack has and initially launched with.
So — do I hyper design around that 🤔? Do I make item input allow them to add in the weight, for instance, if they are buying produce? Or, do I generalize and try to avoid being the jack of all trades and master of none? I envision Spend Stack working for you when you need any list that deals with money.
Birthday list. Black friday shopping. Grocery store.
I still don’t know the answer, and it’s been the biggest challenge for me so far. When I let my thoughts go in either direction, I have the other side of my brain go “BUT WHAT IF YOU’RE WRONG 😲!”
The Output
All of that aside, I wanted to at least get something done. Using Procreateand my Apple Pencil, I mocked out what either route would have anyways. A list of stuff. A list of those lists. And some way to add stuff to that list.
I added an image at the top of some apps that I thought looked great, and then I went at it. The result is the image at the top, and since the future is amazing — Procreate also recorded the whole thing:
Final Thoughts
I feel good. I got something done and I feel that I made some progress. If anything, the outlining process has made me really question what’s important here.
And I personally find that hilarious. Because these are the things you read a million times, right? I should know this! Plan out your app before you code, identify the problem it solves, ask yourself which features you need and the list goes on.
But, when you are husband with a toddler and a four day old, you just hack when you have time. Which, as it turns out, is only when they are napping 😴. That means I had a few hours to get crap done. And I feel I did!
In the next post — I’m going to try and capture what I’m doing now. And that’s my first encounter with the much talked about UI software, Sketch.
