The Undesigner Redesign : Chapter 3
The Sketch Mock
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.
So, Sketch 😃.
This week was all about getting my wireframe down in a more tangible, real form within Sketch. If you are in any way related to the mobile app industry, you’ve no doubt heard of the software. And now, I can certainly see why. I’d be remiss if I didn’t say that I was up and productive with Sketch in no less than 30 minutes.
As a pure code junkie learning his way in the vast world of design, I felt instantly connected with Sketch upon seeing the hero image at the top of its page:
The best way I can describe it is this — I felt that I could use it. You know?
As in, I could poke around in this thing for 15–20 minutes and be productive. This stands in stark contrast to the immensely powerful Photoshop, where I’ve spent years learning the ins and outs and yet I feel acutely aware that I’m likely ignorant to about 14 different workflows that could make things easier every time I open the program.
It’s the industry standard — but it’s also intimidating in a lot of ways. So enter Sketch, which feels like a developer’s dream to me. Easy — no fluff and straight to the point. A conduit to getting your ideas down in a more realistic way.
Translating Wireframes to Sketch
As I’ve mentioned in my previous entries in this series, I’ve started taking design seriously. It’s absolutely a skill I need to understand and grow in, and I realize that right now I don’t have it. Before, building products looked like this:
- Think of something
- Don’t get any feedback, don’t mock it up — just open Xcode
- Hack for a few weeks
- Don’t test it or really show it to anyone
- Release it and move on ✌️
Most people make the mistake of thinking design is what it looks like. People think it’s this veneer — that the designers are handed this box and told, Make it look good! That’s not what we think design is. It’s not just what it looks and feels like. Design is how it works. — Steve Jobs
Obviously, years later and more industry experience in my veins — I realize that isn’t the way to success. You make the things you make on the side because you love them and are passionate about bringing them to the world.
But, you’d like to see them succeed. You’d like to keep working on them. And you just can’t if they don’t bring in any realistic revenue.
That said — I learned a lot more about Spend Stack while creating these designs in Sketch that I think I have in the ~three years it has been in the app store. Here’s a side by side of how things from the wireframe to getting them in Sketch shook out:
Which ended up looking this like this:
This was exciting for me — because I realized how much value there is in the design process that I was previously missing. I really had to think about what was important, cliche as it sounds. Here are some key take aways and feature cuts:
- The notion of a “user” was quickly eliminated. Spend Stack will focus on being a great shopping list type of experience and less about sharing those lists with other people
- The sort button wouldn’t fit at the top, as I realized the navigation bar would need a back button and a “settings” icon for the current list
- Speaking of — the wireframe had no back button at all! Whoops — enjoying looking at the same list forever 🙈
- The toolbar at the bottom stayed close to the wireframe, as did the table cells themselves
Already, the process of using Sketch and the wireframe really saved me, possibly, hundreds of hours. Think about it — creating a user and social based app takes time. And I realized — people might not even need this. Or want it.
Plus — I think my design sense might be slightly improving already. Here is a screen shot of what Spend Stack looks like today, with the most objectively hideous theme that’s available:
Early Feedback
From reading up on design, the product creation process and more — there is always one constant: Getting feedback quickly. Make those mistakes first, and get them fixed before they ship. It won’t be perfect — but it will be better than what it was.
It’s also one thing I’ve been learning at my job over at Buffer, the team over there is excellent at getting in touch with customers and really feeling out what their needs are, what’s going right with the product and more importantly what’s going wrong.
So, right away I posted the Sketch progress I’d made on my Facebook page and got some insanely helpful insight.
Right away, people found some things that I hadn’t even thought of. And lucky for me, some of my friends from Buffer (Andy, our iOS lead that I work directly with and Joel, our C.E.O.) were nice enough to leave some great thoughts
Here are some things people had mentioned:
- The indention of the table cells feels a bit off — perhaps dropping that might help
- Moving the thumbnails and the icon representing a note/comment to the right of the item would make it easier to scan your list
- Is adding a picture or media even necessary at all? Especially in light of the social aspect being dropped?
- The section headers could be more prominent
- The dot and slash next to the section headers might be unnecessary, especially if the user creates their own “labels” — they’ll already know what those colors mean
- Showing “tax $x.xx” on every single table cell is likely redundant
- What is the difference between “Add” and “Quick Add” and are they both needed? Am I hitting option saturation?
- What does the icon on the left of “Add Item” do?
- Is the total at the top with tax included? And, when it’s expanded — is it the base price + tax — or is it already figured in?
All of that useful information — from one picture! It was a great learning experience, and it made me feel a bit crazy that I hadn’t been taking a similar approach for my side projects.
It sounds so incredibly obvious, right? Ask people about your designs! But, straight up — I’d just not done it before. And if I want to give my side projects I put out with Dreaming In Binary the love they deserve, it’s got to be part of my workflow.
Final Thoughts
The next chapter in the series will follow the rest of my Sketch design, I need to flesh out the entirety of the wireframe. My goal is to have the whole M.V.P. in Sketch, which already makes me incredibly relieved to actually build it. I know what I’ll be getting myself into this time!
Aside from that, my wife and I have been using Spend Stack a lot more. This has been a trip down memory lane, as we had forgotten how useful it actually is — even with all of its flaws and mistakes it currently wears like a badge of honor.
It’s incredibly motivating, as I can’t wait to finally make it what I feel it should have always been, an insanely easy to use shopping list app that tracks your total with tax figured in.
Thanks for reading — and feel free to sound off. Is there something I’m doing totally wrong in my design process? Any thoughts on ways to improve the Sketch mock up? I’m all ears!
