Menu

Colin Devroe

Reverse Engineer. Blogger.

Creating Summit: The current summit view

This post is the first in a series of posts about my experience building and designing Summit. This post focuses on just one view within the application; the current summit view.

The idea for Summit came nearly 4 years ago as far as I can tell. I’ve hunted around for scraps of paper, digital notes, code snippets to see if I can come up with an exact date but I’ve been unable to. And it has been fits and starts for several years.

When Kyle Ruane and I started on the idea we first thought the UI would be a bit more game-like. I envisioned a 3D model of the current mountain you were hiking that would progress the person up the summit in first-person towards each goal. This was altogether too much work, and far too difficult given my unfamiliarity with the platform. Kyle’s suggestion – again, many years ago – was to use a low poly look. He would craft a low poly representation of the summit and we could allow the user to move around in it, perhaps even spin it around, zoom in-and-out, etc.

I pulled that thread for a very short time before giving up. Remember, we started toying with the idea of Summit before Swift was released. So I was trying to draw this UI with Obj-C. Something I’m even more terrible at than Swift.

Here is what one attempt at drawing progress lines using Obj-C looked like back 4 years ago or so. I took this screenshot in June 2014 and was already labeling it “historical junk” in my files.

The red triangles were goals to meet, the blue line was your path, and the white line was your progress so far. My goal was to overlay this on top of the low poly art that Kyle drew. This was inspired by maps like this. (copied here for archival purposes)

This worked but was not that easy to pull of, introduced more complexity than we needed, and so we quickly shelved the idea until we got more familiar with the platform.

In tandem I began constructing a simple web UI to start cataloging steps from a phone. This was purely to get used to writing code that would track user’s steps, show stats, work on our step algorithm (the code that determines how far up Mount Everest a single step walking in a downtown city parking lot gets you), etc.

It went this way for a few years. I would open up a code editor and begin working on the pieces of Summit; the progress UI, the algorithm, the code to read from a user’s step count or HealthKit or Apple Watch.

In June 2017, when I picked up this project on my own to take on since Kyle had moved away, I decided I needed a simpler approach to the UI. In part because Kyle is the design genius but also in part because I wanted to get as quickly to shipping an app as I possibly could. I prefer to iterate on ideas with user feedback than to work on something in a silo for years. I wanted a way to show the summit, or some visual from the summit, but yet also show one’s progress. And I also still needed multiple goals per summit.

Here are a few drawings from this summer.

See, I’m not an artist. Admittedly, though, this wasn’t an attempt to draw anything beautiful but rather to get a general idea for all of the views I needed to pull off the layout. I needed some labels, some buttons, navigation, etc.

The long goal buttons was really “a punt” on my part. I gave up trying to get Xcode’s Storyboard feature to properly align a changing number of goal buttons (since each summit has a different number of goals) in a way that worked with each device size. It was very frustrating. So I began to go down this path of having them just be full-width, flat buttons.

But then I ran into Brian Voong on YouTube. In most of his video tutorials he suggests forgoing the Storyboard feature and using code to create the UI. Though I didn’t want to lose the progress I had made, I’m so glad that I took his advice. Writing UI directly in Swift is far, far easier (for me)  and seemingly more powerful than using Storyboards.

This revelation allowed me to go back to a drawing I did a month earlier. This one:

On the left, the elements needed, on the right, a rough sketch of a much more minimal and airy design of the current summit view. The goal buttons have varying distances between them relative to how far apart they are in real life (I’m still working on getting this right in the app).

Using Swift I was able to make this happen much easier than Storyboards.

The above is one of the very first swings at this view. It had all of the elements I wanted. And I’ve been iterating on this specific design ever since. I wish I had the hundreds of iterations saved but I don’t.

Here is what the most recent iteration looks like with goal buttons that are easier to determine your progress and other tweaks to make the UI more consistent.

This is the design for this view I’ve settled with for now. I have plans to iterate on this current design for some time before, perhaps, taking a whole new swing at it. Perhaps my skills will grow to the point that I feel confident going back to Kyle’s low poly idea. But, I’m pleased with how it has come along so far.

Blank by Cotton Bureau

Cotton Bureau:

Size-inclusive, made-in-the-USA, better-fitting, premium t-shirts for women and men.

I wore a Cotton Bureau tee on Tuesday of this week (thanks Kyle). It felt great. It looks like these new carefully considered tees will be even better than the high-quality product they already offer.

/via Kyle Ruane on Twitter.

A remote workers review of Cocoon Coffeehouse in Hawley, PA

Yesterday Kyle and I wanted to get out of our home offices and work somewhere new. He suggested Cocoon Coffeehouse next to the Silk Mill in Hawley.

Panoselfie Cocoon Coffeehouse

A panoselfie of yours truly.

It turned out to be a nice little spot to get work done. Comfortable chairs. Easily accessible wifi. Good food (I tried the quiche). And my coffee was pretty good too (Electric City!).

So if you’re within a few miles of Hawley and would like to get some work done in a comfortable atmosphere Kyle and I give Cocoon Coffeehouse a thumbs up.

A custom skin for MyFantasyLeague

Kyle Ruane on why he created a custom skin for MyFantasyLeague:

There are things on that page that defy explanation—nested tables driving layout, 8px text, inline styles on everything, five different ‘main’ navigation elements. One big dumpster fire. And this is actually one of the better views in terms of usability.

The power of the open web. If you don’t like something, you can change it.

At NEPA BlogCon on Saturday

As I said in early August, Kyle and I are going to NEPA BlogCon again this year. Both of our businesses; Coalwork and Plain, are sponsors and we each purchased a personal ticket.

I’ll be the guy with the GoPro camera clicking away. Will we see you there?

Shooting San Francisco with GoPro

This summer I’ve found myself shooting with my GoPro Hero3 a lot. And not just while kayaking. I really dig the perspective and most of what is captured is fairly Instagrammable. I’ll also mention that the GoPro form factor is less obtrusive than the iPhone in that people hardly notice the GoPro at all.

In late-June Kyle and I made an unexpected and unplanned business trip to San Francisco so I took my GoPro along and shot a few photos along the way. These are unedited (save for size) direct from the camera.

There are several small tweaks that I typically make to the photos coming from my GoPro before posting them to Instagram — such as bumping up the saturation, bring some light to the shadows, sharpening, etc. — but overall I think the GoPro has a just different enough perspective from the iPhone that I’m dig using it.

I will say, however, that when I want to capture something with far better quality than the GoPro provides I still take out my iPhone and shoot.

Since I’ve been shooting with a Hero3 this summer I’m definitely eyeing up the GoPro Session. Based on the comparisons I’ve read it seems a capable little device.

Podcasts that I listen to

Nearly a year ago I jotted down some non-tech podcasts that I was enjoying at the time. However, today I was tagged by Joe Casabona (Cassy) to jot down those that I’m listening to currently. Here is that list:

Just like everything else, I shake this list up from time-to-time but you’ll notice a few stay with me. Feel free to send me your suggestions.

These are simply in order as they appear in Overcast. You can read Kyle’s list too.

I tag Matt, Om, Dave, Toni, Geoff, Alex.

You should go to meetups

Last night I joined Kyle Ruane, Michael O’Boyle, and Bruno Galvao and drove two-and-a-half hours to Brooklyn — simply to attend a small tech meetup.

If you’ve been subscribed to my blog for any amount of time you’ve probably seen that I go to a lot of meetups, even some that are 12 hours away, and I’ve had the privilege of presenting at some of them. Why? Why make a long drive for a 1-hour tech meetup just to turn around and drive home?

Because there is a lot of energy at meetups. The presenters are generally at the beginning of their product cycles and they have a lot of positive energy to make something happen. Those in the crowd all have their stories, their ideas, their goals. And, in addition to those building startups you’ll generally find lawyers, venture capitalists, programmers, marketers, etc. who are willing to offer their help for your project. It is a very, very good way to meet people that you’ll likely work with.

I can’t recommend going to meetups enough. Even if they are a little out of your way. It will be worth it in the long run. Also, it will help you with your echo chamber.

Oh, and just for posterity, last night the presentations at the Brooklyn Tech Meetup were done by the following companies:

  • JackPocket – A new way to play the lottery.
  • Chatwala – A 10-second video messaging app.
  • Rukkus – Quick, cheap way to buy event tickets.

The Brooklyn Tech Meetup is simple, fast, and well attended. I recommend.