I had been planning to do this for a while, but I recently took the time to write MOON for OS X. The goal was to basically port the app over from iOS, but it was not that simple and I thought I’d document some of the things I learned along the way.

App Structure

On mobile, you can dive in and out of apps very easily. On desktop, opening an app feels like a heavy interaction. This is especially true if the app isn’t easily accessible in your dock.

The first real decision was that the Notification Center widget would be the primary surface. I made the Today Extension slightly more robust than the mobile version by including countdowns to upcoming lunar events. The widget also offers a quick way to open the app without keeping the app in your dock.

Unlike the more playful iOS experience, I designed the Mac app from a practical stance. All lunar information is presented up front. I assumed there was no reason you would open the main app other than to find what the moon is like on another date or share a moon on a particular date.

Icon

The icon I’ve been using for the mobile app didn’t feel appropriate on desktop. The photorealism was out of place in the dock. Desktop icons generally tend to have a some dimension to help them stand out in the app switcher and dock.

I played with many options but eventually landed on an illustrated icon. It felt more at home with other OS X icons and I was surprised at how well it worked in conjunction with the app.

The dock and app switcher backgrounds tend to display as a lighter grey. Most of the icons that included a photorealistic moon blended into the light grey in a muddy and unsettling way. I settled on one of the darkest icons because it provided the most contrast from typical surrounding OS elements although it looks very bad on super dark backgrounds, but that is rarely the case.

The original idea behind the icon on mobile was to place nothing between you and the moon. The new icon doesn’t play to that conceptual minimalism, but I’ve grown to like its unique identity and I’m thinking about changing the icon on mobile to this style as well.

Animations

The mobile app has long, slow transitions and layers of endlessly flowing moving stars. That treatment didn’t feel right for desktop. The background animation felt purposeless on desktop. One key differentiator in the decision to not include them was the animations didn’t perform as smoothly in OS X as they do on iOS. I significantly sped up the transition animations and left out the animated starscape which ended up making the app feel more serious and responsive.

Wonky Stuff

There’s not a great way to easily determine if the Notification Center widget is installed from the app. I left a semi-instructional one-liner at the bottom of the app to prompt people to install the widget. Other apps handle this a variety of ways, mostly through popover NUXes. I’m hoping that I can figure out a way to detect when the widget is installed and then have this text go away in those situations. It would also be great if I could allow people to install the extension through the app so they didn’t have to go through the rigmarole of tapping edit at the bottom of Notification Center.

I also attempted to create a transparent title bar with a full content window for the app but ran into some issues. I need to do some reading on the relationship between the window controller and the view controller and then I will be fixing that in v1.1.

Conclusion

That’s pretty much it. It wasn’t as simple of a process as I was expecting it to be. At the same time, it was really fun to rework an app for a different platform because I could purely focus on the user experience differences since I had solved most of the dirty backend work in the iOS app.

I wrote the app in Objective-C to keep it parallel to the iOS codebase. I was surprised at how hard certain things were compared to iOS. It took me a couple days to get the ‘date’ popover working properly. (I eventually landed on using a Storyboard segue with a delegate method, although I tried many alternatives.) Here is a good article about UIKit and AppKit that helps explain the differences are between the two frameworks.

MOON is now available in the Mac App Store.