Diary of a Diary

Andrew Varvel
7 min readMay 11, 2015

--

Building my first iPhone App

Since 2011, I’ve been on a stop-start journey to make a calendar app for iPhone. I’ve experienced the difficulties of outsourcing development to inexpensive coders-for-hire in Eastern Europe, I’ve mocked up hundreds of designs and I’ve tried to learn how to code at least five times. In July 2014, I signed up to learn Swift with Thinkful and I’m now excited to release my first iOS app diary U to the App Store.

The Problem

I’ve never been able to keep a diary. My memory is reasonably good and I never found that the time & effort required to enter events into a digital calendar was worth it.

UIDatePicker is fiddly, frustrating and painful

I found calendars required information that was sometimes completely unnecessary or unknown. For example, an event such as after-work drinks doesn’t always require an end-time. It also doesn’t require a start-time as you know the drinks start after work. Another example could be a certain shift at work where there is no need to enter any times at all because you know exactly what times Day Shift is.

Kalenday

In 2011, I set about designing and creating an iPhone app that would be the perfect calendar for me. I didn’t know anything about Objective-C and I decided to outsource the development of the app via oDesk & Guru.

I selected a Ukrainian developer via oDesk after much research and began the process of developing the app with him. I received a quote from the developer after sending him an initial description which detailed the app’s design and user experience.

About a week into the proposed two week development period, I began to experience some issues in communicating with the developer and it was clear that the development would take much longer than expected and cost more than budgeted.

I was told that the design I had sent as part of the initial brief was too complex within the development time period and budget and would require significant changes and adhere to standard iOS UI design elements.

Original design in the brief documents
Final design

I made changes to the design and user experience of the app to stay within the original budget — mainly by modifying the event information to fit inside a single table cell and removing the custom keyboard (for faster calendar input). It was always difficult communicating the design of the app to the developer as each beta version I received looked quite different from my design despite providing detailed screenshots, descriptions and Photoshop files. Text was often misaligned, the name of the app was wrong for the first few versions and poor spacing of UI elements.

Early Design from the Developer

I released Kalenday in December 2011 and it did an amazing $114 in lifetime sales — less than 10% of the development cost. I didn’t do the marketing very well and a few months after release I discovered a major bug whereby events placed more than one month in the future would randomly delete after about a week. I had already put too much money into the project so I abandoned the app.

After Kalenday

Since Kalenday, I tried many different apps and methods of keeping a calendar — hoping I would find a great application that would have the flexibility I liked in a mobile calendar app. The closest app I found was Cotton Notes where I used a hierarchical note as my calendar but it was a bit too much effort to organise it all (yes I’m a bit lazy …)

In 2012, I came up with another design for a re-booted Kalenday and on several occasions I tried to learn to code in Objective-C — but failed miserably everytime.

In 2013, I learn the basics of Front-End Web Development with Thinkful, which at the time was a new online company that used one-to-one mentoring to learn the basics of a certain skill in three months. I learnt so much with my mentors and found it far better than any online tutorial or book I had read in the years prior.

Reboot

In June 2014, Apple announced the Swift programming language. To a guy with next-to-no programming experience, it looked a lot friendler to learn than Objective-C and I was ready to finally code my own iPhone app.

Soon after the announcement, Thinkful announced their own Learn Swift course and I signed up in one of the first batches of students.

The first design for the icon-based design tentatively called Flat White.

From the moment Swift was announced, I started mocking what was the first of many designs of the rebooted Kalenday. I decided early on that icons would be an integral part of any design. I also did a lot of research into physical diaries and I realised that for many people, the physical calendar diary is a very personal object. I decided any calendar app I would make would allow the user to make it their own in some way.

Just a few of the many designs.

When I got around to thinking about how this design would actually work in reality, there were quite a few fiddly issues with it. I had worked out a neat method to integrate both events with times and events without times into it — but there were still many unanswered questions. What timescale for a day do I show? How do I (cleanly) show 2 events at the same time … or even 15 minutes apart? … How on earth does a beginner developer even code this thing!

‘Diary Pop’ design

My next set of designs were based on a list calendar and in many ways was just a re-designed version of Kalenday. I spent a lot of time designing this concept and I developed it in XCode to be a mostly functional app, but after using it actively for two weeks I found I got ‘lost’ in the list and it didn’t have any magic. I decided to start again from scratch.

diary U

It was in November that I was thinking about a new design for the app. I studied wall calendars, week-per-page diaries, day-per-page diaries and other calendar apps. I found most inspiration in the wall calendar and the beauty of a blank white square and the personalisation of the images for each month.

I focussed on creating a design that would have a beautiful image of the user’s choice to personalise their diary and an interface where there would be a single square for each day. Swipe right and left to a different day, swipe down for a month view.

I then looked at the previous icons and decided to change to a curated selection of emoji, specifically Twitter’s fantastic Twemoji artwork.

I began to code for this design, learning about auto-layout, collection views and working out how to code my own month view from scratch. I tweaked the design as I went changing the aspect of the photos, adding colours, removing colours, shadows, rounded corners for many months.

Final Design

For the back-end, I toiled for weeks learning about different storage options such as Core Data, Realm, Parse, Firebase and many others. First and foremost I wanted the app to work anywhere (offline) and I didn’t want to manage any offline/online sync state issues (remember I’m a beginner). I ended up selecting Realm due to their fantastic documentation and ease of use. Realm have just announced they now have a Swift-native library, so I’m keen also to switch to that from the Objective-C library I am using. I’ll enable cloud syncing at some point in the future, but I’ve got a bit more learning before that. So until then, the lack of sync is a feature ☺

Release

I released diary U after ten months of development on May 8 2015. It’s a fun, fast and simple calendar that’s nothing like other calendar apps. Choose your own background photo & colour and add any event in any way you like.

I’d love your feedback on the app and I’m well aware it isn’t for everyone. I like to think of it as the ‘SMS’ of calendars … if that makes any sense! You can reach me @andrewv / @diaryuapp or email andy[at]diaryu.com

I’m continuing to develop diary U and I’ll be adding notification alerts shortly as well as improving the on-boarding experience. There’s a big list of what I want to do with diary U — but as I have learned over the past four years trying to make this thing, I’ve got to go one step at a time.

iTunes Link — https://itunes.apple.com/us/app/diary-u-calendar-photo-emoji/id967925984?mt=8

Website — http://www.diaryu.com

--

--

Andrew Varvel

Studio Technical Director at Network TEN, Developer of Jungle Calendar