Speed Up Your iOS UI Iterations 10x with Playgrounds

As a team that practices human-centered design, we place tremendous value on intuitive, simple user experiences at Capital One Labs. Believe it or not, simple UI is still something the finance industry lacks in spades. But simplicity is a funny thing. In the tech world, it’s often a double-edged sword. The more magical and effortless the experience is for our front-end users, the more complex and challenging the build is for our developers. Developers may be familiar with this Dr. Jekyll & Mr. Hyde thought: “People are going to love this…but this is going to take forever to implement.”

Not anymore! With the introduction of Xcode Playgrounds, and more recently, Interactive Playgounds in Xcode 7.3, I’ve sped up my UI iterations by at least 10x.

My old workflow for building out iOS custom UIViews looked something like this:

  1. Make a UI change.
  2. (~10 seconds) Run the app and navigate through multiple screens to reach the screen for the UIView that I’m building.
  3. “Oh crap, that doesn’t look quite right.”
  4. Repeat 1–3 a bunch.
  5. “Bravo! It finally looks good! Now, let’s show the designer.”
  6. Designer: “Looks good, do you think we can make it (animate faster / bounce higher / a deeper shade of red)?
  7. Back to step 1 😐

My new workflow with Interactive Playgrounds might look something like this:

  1. Make a UI change.
  2. (1 second) See the change instantly reflected.
  3. “Oh crap, that doesn’t look quite right.”
  4. Repeat 1–3 a bunch.
  5. “Bravo! It finally looks good! Now, let’s show the designer.”
  6. Designer: “Looks good, do you think we can make it (animate faster / bounce higher / a deeper shade of red)?
  7. “Sure, let’s edit this playground together to get what you’re looking for.” Done.

While the number of steps in an iteration hasn’t changed, the number of iteration cycles has been reduced dramatically. The time waiting to see the updated UI is about a 10x improvement per iteration. More importantly, Interactive Playgrounds have created a tighter feedback loop between designers and developers by creating a space where we can speak the same language. This is invaluable.

With Interactive Playgrounds, not only can you visually inspect the result of your code changes in real time, you can now test out user driven interactions with your UIViews, such as scrolling through UITableViews, tapping UIButtons, and performing gestures. It’s magical!

You know what else is magical? Magic 8 Balls. Let’s use the power of Interactive Playgrounds (and a random number generator) to rapidly prototype the UI for our favorite childhood fortune teller! Which, now that I think about it, is like talking to a really poor implementation of Siri. Here’s what our final result will look like:

Are you excited about Playgrounds yet? My 8 ball says, “Most Likely”. Let’s walk through the code:

Xcode 7.3 Playground
File Navigator (lefthand side of Playground)

On the lefthand side, you’ll notice our Playground File Navigator. It contains a few source files with Swift code that contains some UIView creation functions as well as some utility functions to help with things like shaking a UIView and speaking text aloud. This code has been abstracted from our main Playground code to make it easier to understand the Playground.

Timeline (righthand side of Playground)

On the righthand side is the live preview or “Timeline”. This will update in near real-time as we update our Playground code. This is a huge timesaver vs. running the app each time you’d like to view a change.

Code (center pane of Playground)

Finally, the center pane (above) is where we’ll focus the majority of our time.

We start out importing UIKit, which contains libraries for building our our UI, and XCPlayground, which allows for a live preview of our UIView.

Next, we define an Array of Strings, each representing a phrase that the 8 Ball may display.

A function is defined to return a random String out of the array.

Next, we create a UIView “container” of size 400x400 that will contain all of our subviews. We create the child UIViews — an 8 Ball UIImageView, a UILabel to display the phrase, and a UIButton that the user can press. These child views are then added to the container. At this point, our UI is complete, but it is not interactive.

In order to add some “magic”, we’ll need to define a Responder class that will determine what happens when the button is pressed. We instantiate the Responder, and then configure the button’s target to trigger the “buttonPressed” function upon the user touching it.

Lastly, we must assign the Playground’s “liveView” to our container. Without this line of code, we won’t be able to see the live preview of the 8 Ball on the right hand side and interact with it.

If you want to try it out, make sure you have Xcode 7.3+, and check out my source code here.

Big thanks to Brian Nguyen for helping refactor some code.


Follow me on Twitter @JaredAlexander
Follow us at
@CapitalOneLabs

Opinions expressed here are of those individual associates quoted, and not necessarily Capital One. Any third party companies mentioned or marks used are solely marks of those third parties.