How We Develop Mobile Applications - Pt 3 - iOS

Building a cheap prototype to validate design

Welcome back for the third post of our blog series on how we build mobile applications at Collective Idea. In the last installment we covered basic project setup. This time, we’ll discuss our first steps in fleshing out the application.

Note: If you haven’t read Part 1 and 2 yet, you might want to check those out first.

Fail Fast. Fail Cheap

Before we type a single line of code in our editor, we’re going to check to see if the designs from part 1 feel right, and if they’ll help us achieve our goal (to communicate who’s bringing donuts into the office).

We’ll do that by building the storyboard and hand testing the application flow.

The purpose of this exercise is to see how our design feels. By hand testing the application flow before any code exists, we can tweak the application’s design without the encumbrance of refactoring code. That’s failing cheap.

If this were client work, we’d put this semi-functional prototype in their hand ASAP. From there we could elicit feedback from them sooner rather than later. That way, if we’re building a product that’s straying away from the client’s vision, we can change course and keep the project within its budget.

Building From a Plan

To begin, check out the wireframes in part 1 of our blog post series. These wireframes tell us what we’ll need to build.

The wireframes describe three distinct views. First, a Welcome view. This view shows a user who’s bringing donuts today, and allows the user to show that they’re bringing donuts. The Success view shows the user that they communicated that they’re bringing donuts. And finally, a Warn view notifies the user that there are already enough people bringing donuts.

Fleshing Out the Storyboard

Open up the project in Xcode. Find the Main.Storyboard in the project navigator and open that.

Collective Idea - Main Storyboard 2.png

We’ll use a Navigation controller to handle the application workflow for this prototype. Click on the View Controller scene in the storyboard, then choose Editor > Embed in > Navigation Controller from the Interface Builder menu.

Now Interface Builder should look like this:

Collective Idea - nav-controller 2.png

Now, find the file Donuts-iOS/Controllers/ViewController.swift and rename it to WelcomeViewController.swift. Open its contents and change the class name to WelcomeViewController. Then finally, open Main.Storyboard, click on View Controller and change the class to WelcomeViewController.

Collective Idea - custom-class-inspector 3.png

Then, add the WelcomeViewController’s elements: a UIButton, UIImageView, and UILabel.

Collective Idea - welcome-view-controller 2.png

Click the WelcomeViewController scene in the storyboard, then copy/paste it. The Success scene uses a UILabel and UIImageView. Delete the UIButton, and the “add a new UILabel” at the bottom.

Add a new Swift file in the Controllers group named SuccessViewController.swift. Then change the class used by the Success scene in the storyboard to SuccessViewController.

Collective Idea - success-view-controller 2.png

The last view we have to create is the Warn view. Copy/paste the WelcomeViewController onto the Storyboard. Remove the UIImageView, center the UILabelView, change its content, and then change the UIButton’s content. Add a WarnViewController.swift file, and change the scene’s class like we did with the other two views. It should now look something like this.

Collective Idea - warn-view 2.png

Connecting the Scenes

Our prototype is nearly done, but it’s still disjointed. We’ll add a segue to give it some behavior.

Press Ctrl click the “I’ll Get Donuts” button and drag your cursor to the Success View Controller. Choose Show from the Action Segue popover.

Trying it Out

Now, we can finally try the app out. Plug in your device, and press Command-R. This is where you’ll note what you like and change what you don’t like. Put it in other people’s hands and see what they think. Then, iterate until the app feels right.

Photo of Chris Rittersdorf

It was gaming on the NES as a child that first interested Chris in computers and programming. He cut his programming teeth writing Visual Basic in school and then graduated from Kettering University. Now he plays around with writing retro games and chip tunes on mobile devices. At Collective Idea his expertise is in web and mobile development and teaching us all new things through pair programming.

Chris and his wife Sarah live in Grand Rapids with their two cats. When not coding, Chris is probably either remodeling his house or wrenching on a Volvo 240. In his words, “they’re fun to fix, and fancy to drive.”

Comments:


Post a Comment

(optional)
(optional — will be included as a link.)