1RM: The Retrospective
Should designers code?
The LoungeBuddy Product Team recently concluded our inaugural Hackathon, where we had two days to work on anything we wanted: a project we had on the back burner, an idea we needed more time to explore, or a new skill we wanted to develop. Originally I was going to build a coded style guide for our different design components, but there was a small project that had always been on the back of my mind: learning iOS development.
I noticed a trend amongst designers who got started developing apps: almost everyone starts with a tip calculator. Two notable examples that I’ve actually used in the past were created by Kevin Clark, Design Lead at Shopify and Patrick Wong, Design Manager at Lyft. In hindsight, I understand why tip calculators are commonly used as starter projects; they are simple enough to be built in a relatively short amount of time, but complex enough that you’ll actually learn something.
Originally I thought I would do the same, but I wanted to create something I would actually use. This is when I thought of the idea for 1RM — a simple weightlifting calculator that calculates the percentage breakdown of the total weight entered in nineteen increments, from 95% down to 5%. The app uses the fundamentals of a tip calculator, but displays the information in a unique way. Here's some screenshots of 1RM running in the simulator:
Having never written a line of Swift or Objective-C before this event, I wanted to take the time to write down how I went about creating an app in just two days, and the resources I used to help get 1RM for iPhone on the App Store.
In the excitement leading up to the Hackathon, I had already put together some mocks of what I wanted 1RM to look like. I wanted to make the most of the event, and so I planned the functionality I wanted to build over the two days.
- Calculate the percentage breakdown of the entered weight, from 95% down to 5%.
- Customize a standard Table View to show both the percentage and weight breakdown.
- Animate/collapse the header when a user scrolls down the list.
- When a user taps on the header, expand the header and launch the keyboard.
- Scale the font size used for the "total weight" as the user scrolls.
Here's what I ended up with in Sketch:
To get started, I knew I had to work through a simple Swift 3 “tip calculator” tutorial. I followed this two-part video tutorial by Junkie Labs, Building a Tip Calculator Using Swift 3.
The tutorials aren’t difficult to follow, and when I was done, I had a working tip calculator (pictured below). It is important to stick with everything they show you in these videos; you can always make interaction and design changes on your own when you have an idea of what you are doing.
Now that I knew how to make a functional tip calculator, the next step was to learn about UITableViewControllers. Not only was this a key part of the design, I chose this visualization for the percentage breakdown because I know how versatile and significant Table Views are in iOS development.
Originally thought I would need to create custom Table View Cells, so I followed this tutorial by Jared Davidson, Custom Table View Cells. As it turns out, that was completely unnecessary; iOS has many default table cells you can use, including the Right Detail option often used in Settings.
If it’s built in, you should use it.
I switched gears and found another short tutorial, How To Create A TableView In Xcode 8 by The Swift Guy, which shows you how to “print” a list of items in a Table View.
At this point I had everything I needed to start building my app. I was going to piece together everything I learned up to this point to build 1RM, but it felt like something was missing. Had I stuck with what I had learned in these tutorials, I would have manually created a list in code. Though functionally the same, it wasn’t what I wanted.
This is code after all, and I knew from experience that you should be able to do things automagically.
I spoke with a few people on the engineering team, and they were incredibly helpful in translating Swift-speak into something I could understand. If you’ve been following along with the tutorials above, I’ve created the following gist which shows you how to generate your Table View rows, and use them to inject content into the labels. Automagically.
I had a day left of the Hackathon, and 1RM was functional. You could type a number, and the app would update the table view controller with a breakdown of what you entered. Today was going to be all about the looks; it was time to get 1RM to look like the mocks.
The final tutorial I used was this fantastic tutorial, Implementing a Collapsing / Expanding UITableView Header by John DeLong that gives you a step-by-step overview on how to animate a UIView and UITableViewController.
1RM was nearly there. I was done with tutorials, and I started searching Google to help me implement the details like font colors, tweaking animations, and customizing specific interactions.
You wouldn’t believe how many little things go into creating such a simple app, but there is so much power in being able to make something people can use. I think every (digital) designer comes to a point where creating images of what you want to be real isn’t enough anymore, and that’s when you take the time to learn how to make your ideas a reality. This is why there is such a huge debate around “should designers code.” It’s usually the designers who can code, and know how powerful of a skill it can be, who push others to do the same.
1RM is a simple weightlifting calculator for iPhone that I designed to teach myself iOS development. 1RM is available for free on the App Store. You can read more about the story behind 1RM in my portfolio.
Note: Be careful which tutorials you follow; make sure they are written in Swift 3 or newer, otherwise you’ll quickly find out how unforgiving Xcode can be.