Paper and pen

I loved the article about personal design sprint —this is an excellent recipe to design swiftly. Creating a clear end point to our design adds constraints that we will have to keep up. But, first things first, it all began with pen and paper…

Um…

My drawings are ugly, but my ideas get out of my minds faster than typing on a phone or designing in Sketch. 1:0 for paper and pen. I assumed that even the greatest sketeches can’t stand decently prepared mockup in graphic tool like Sketch or Photoshop. Few visualizations on paper were enough, especially if you’re not a professional designer. My aim was to present views on a real phone and explore nice tools for iOS Devs.

Nevertheless, I’ve made some notes about apps that are similar to my idea, but lack this ‘gotcha’ and are reason why I want to create on my own. Here are some notable apps:

Promodoro — the only app that I use regularly. Simple and easy to use, very basic history. Unfortunately, Promodoro was created long time ago and often crashes, designed before iOS7 era, some graphical bugs.

Toggl — very interesting app with website version for PC. UI is friendly, reviewing history is easy, managing timers is convenient. The major disadvantage for me is the fact that I can’t create any countdown and iOS app is not that great as I expected after playing around with website version(looks like webview packed in an app, to be honest).

aTimeLogger — The first impresion was — ‘whoa, that’s an interesting way of grouping timers… And so simple!’ I can set goals, I have access to history of my tasks/timers, even the pie chart is here! So, what went wrong? Timer is presented as a small table view cell with small stop/pause buttons that I have to confirm by closing a modal window. And pausing the timer took off few seconds from timer. Weird.

All in all, these apps are too complex! I want something that is as easy as built-in timer in iPhone with some history. The major feature should be that creating a task takes at last 4 taps, and resuming created task should engage only one tap. As you can see, this review of available apps in AppStore gives into thinking what we really want to create. 3 main goals for my revoltionizing apps will be:

Creating a task should be as easy as possible,

Resuming previous task should be as fast as setting a timer in Clock app,

Task ready-to-start should be presented first, not a table view with history or previous tasks.

Two apps got my attention:

Clocked — modern UI, timer and interval timer in one app, big countdown. History is simple, but intuitive and includes simple stats like when we started and finished the task. But no ability to pause, and you can only add a group for a timer, not countdown timer. Bummer.

Bit Timer — looks promising, after reading article about design sprint mentioned earlier. I can easily set length of work/rest time and repetitions. Everything’s fine, but… I can’t set timer more than 4 minutes. Really?…

Combining two of them(setting a time by sliding up and down, fresh look, stats) is a key to make something useful(at least for me). But day, I bought an app called Rise. It strucked me how intuitive and interesting the timepicker might be. We have whole screen estate to set an hour for alarm, just like in Bit Timer. The coolest feature is: when you’re setting an alarm for morning breakfast, the background will be indicating a sunrise. Remind me about dinner? Background will be a sunset.

That’s the key feature for my epic app — picking a time would work as sliding a timer-slider up and down. Moreover, user will be encouraged to pick more time for work, that would be expressed by warm color.

Okay, main features and assumptions are setted up, let’s go Sketching.

Sketch

Sketch is awesome, period. Many designers are switching from Photoshop to app from Bohemian Coding. Interface is accessible and comprehensible even for beginners that want to create something more than lines and rectangles. Most notably, Sketch has great support for iOS designing. Ready-to-use UI elements, artboards in iOS resolutions, exporting to images with proper names for Xcode, so on and so forth. For quick preview on a device we have Sketch Mirror — app for iOS that transports our creations from Mac to iPhone instantly. In dark ages(before Sketch Mirror) I used to send images via e-mail or just drop in iColud Photo Library. However, what if I’d like to see some minor tweaks like decreasing the font size? Another mail or waiting for synchronizing Mac with iCloud? Come on. Sketch Mirror does in a hassle-free way.

After few hours(and many crappy mockups), my app came into life. Meet the Instantimer. More than a timer. Instantaneous like your great ideas. True work companion.

 WATCH by Fabio Basile — https://dribbble.com/shots/1720013-Apple-WATCH

Okay, so now I have terrific ad that I can spam every single social media website. The main features are:

let the app control by adding some time to work gradually. Taking small steps into big achievements, that’s the key to pass this horrible exam.

no disctrations(because distractions is something that user wants to avoid by using this app, right?)

Picking a timer is the major activity in app, it should take the whole screen estate

If we are making progress in doing something, how about visualizing our current progress? From purple to light blue as we are closer to complete the task.

Single screen was designed in separate Artboard. In Sketch you don’t have to create separate files for singular screen, you can just add a new Artboard in a tab-like menu. The great thing about this solution is when you connect your phone via Sketch Mirror, you are able to navigate through these artboards by swiping.

I don’t want to bore you, dear reader, by showing my crappy mocks and how you can make cool effects, because I’m not a designer(as you can see). There are many fantastic tutorials about Sketch:

http://www.sketchappsources.com/, Discovering Sketch, http://www.sketchcasts.net/, https://designcode.io/

Instead of this, let’s move on to tools that allow you to mimic real app.

Keynote

Keynote is a perfect first-line for us to demonstrate our crazy ideas. Trust me, making sketches and explaining for many minutes why our app would be totally cool isn’t enough. I’ve experienced that on my own. After fruitless efforts explaining what I’m really doing I recieved at last ‘um, okay, sounds nice… I think…’. Showing mocks is easier to digest for typical consumer, he doesn’t have to imagine what our app would be doing — it’s our job. For him we should have ready-to-eat plate of cookies.

For every app mentioned in this post I’ve prepared videos to demonstrate how it could look like — from basic interactions in Keynote to fully functional prototype.

There’s a problem though — our mockup is interactive in some way. Sure, we’re not really swiping — tapping anywhere will fire up the slide animation. We could investigate for better solutions for animations, but I think creating state-of-the-art in Keynote is overkill when we have more powerful tools.

However, the big advantage of keynote is that is free, easy to use and we can deploy mock on a phone. But what if we want something more customizable, that can almost imitate real app. Keynote is okay for animations like in video above, but still I want to reproduce the main feature of the app — moving timer with dynamic background. We’ll have to switch to…

Origami

Have you ever heard about Quartz Composer? Me neither. But the design team from Facebook prepared great plugin for this app. By dropping different components that are called ‘patch’, you can add some great interation to your mockup that were only available in Apple UIKit for iPhone. Here, you can quickly test our your crazy ideas without typing any code. At the beginning, interface looks kinda complex, but this video will explain everything to you.

The biggest disadvantage of this tool is the fact that we can’t deploy mockup on a phone. I’ve been thinking how we can get around this issue, and some of ideas was to record our mockup as a video, but it would be very difficult to reproduce our gestures correctly on a demo in the front of our sceptic colleagues. The second would be make a virtual desktop on our phone, in other hands — some kind of vlc, but it would be a problem to handle. I read that Origami team already have a working app for Origami mocks, but we have to wait patiently until will be done for broader public.

Xcode

Keynote and Origami are nice apps where we can see our vision in action. Nonetheless, it’s still far away from deploying anything to AppStore. It’s time to create our base project that maybe will be submitted!

Unfortunately, no one will accept silly mockup filled with static images. Xcode stands for coding and it’s our job to code our mocks into living app. I’ve recorded additional video about Playground. In June Apple introduced new programming language called Swift, and one of the features is creating .playground files. Here we can type anything in Swift and see results without pressing ‘compile’. It’s a great way to prototype some solutions in code, but also for desigining and UI placement in UIView.

At last, Xcode. Example that I’m showing is kinda unfortunate, because there are many ways to show the power of Storyboard, but in my example controller that handles pages swiping has to coded. On the other hand, you’ll see that it’s not as difficult as you’ve thought, and the final effect looks promising. In video I don’t care about following object-oriented paradigm any many other rules. The key is to create mock quickly; you’ll have a basis to show your friends, later on you can create Instantimer class, variable in Controller that holds Instantimer object which defines labels on view, etc.

That’s it! I hope that will be helpful for anybody, because I haven’t found any tutorial or article that covers Keynote, Origami and Xcode.

Maybe Instantimer wouldn’t have become a tremendous success, but you have a notion how to go with mocks from the beginning to coding. And who knows, maybe one day will appear in AppStore… If you’re interested — let me know and I’ll publish the source code on Github when the app will be done.

Interesting links:

Fake it till you make it — WWDC2014

Swift Playgrounds — WWDC2014

Design with Sketch

Swift Programming Language Book

Prototyping with Facebook Origami

Happy prototyping!