The initial idea for Cycler came from a web developer who was looking to learn iOS development by creating a bicycle workout tracker. His goal for the app was for a no-fuss quickstart to each workout and the ability to see a live map update of his current path. The following screenshots are from the basic working prototype he had built using Swift & UIKit, prior to me joining the project.

New Beginnings

When I was invited to collaborate, we decided to step back and take a more formal approach to the process. In our initial conversation, we laid out our goals for the project (we're both primarily looking to gain product design experience), talked through the basic features of the app we wanted to build, and created a plan of action for moving forward.

Development & Project Management

We divided the project into Data Architecture—the logic and entity models which he is handling—and UX & Visual Design which are my responsibility, along with project management duties.

We're using Github for source control (designers: it's not that scary) and fumbling our way awkwardly through a Projects/Issues workflow for tracking progress & tasks. For longer form documentation, we're linking to Google Docs. This is working well, but I realize I could do better by learning about proper, effective methods for project management — let me know if you have any recommendations!

Eventually, I'd love to open-source the entire project: source code and design files.

Wireframing

I'll let you in on a secret—as if having no prior SwiftUI/XCode experience wasn't enough—I had never wireframed a product before or used proper wireframing tools. I have been reading a few books and blogs on product design so I knew that I needed to move on from my love/hate relationship with Adobe Illustrator if I was going to tackle this properly.

After some digging around, I settled on Figma. Why? It's an industry leader tailored at product development that comes feature-loaded for building design systems & components as well as having basic interactive prototyping capabilities. To be honest, I knew I would be doing all my prototyping in SwiftUI (which is why I avoided Framer) but it's a nice added bonus having the ability to link together views in a basic mockup you can share online or run on your phone.

To get started, I realized I needed two things.

First, practical knowledge of the tool — I ended up following a pair of Figma's basic quick start tutorials and was working comfortably on my own wireframe within the first hour. Eventually, I ran into a couple of really useful plugins that made my life a lot easier: Mapsicle, Material Design Icons and SwiftUI Inspector.

More importantly, I was looking for a guide on the principles and theory for wireframing my app. Though this is undoubtedly a never-ending process of learning through experience, I realized that soaking up two guides from the world's largest digital product companies would help me get started. I can break more rules next time.

Apple's Human Interface Guidelines for iOS and Google's Material Design.

Prototyping

The first major development decision we made was to switch over from UIKit to SwiftUI. Primarily, this was so that I could learn to prototype my Figma wireframes in code and shift the workload of implementing the interface onto myself. It also wasn't a hard decision to make at the barebones stage the project was in.

I'm very, very pleased with this decision. Even with no prior knowledge of XCode or SwiftUI, the language and development process has been very intuitive to pickup. There's a real beauty to the design of the language (stacking! and @State & @Bindings!) and I'm particularly fond of the live, interactive Canvas Previews (even with all its buggy faults). I can see all you hardcore developers rolling your eyes, even through the glare that's reflecting the Matrix-green glow of your custom vim config on your very practical blue light blocking frames 🙂

The WWDC '19 SwiftUI videos from Apple along with their introductory SwiftUI tutorial were an invaluable resource to get going.


What's next? I'll dive into the mindmapping process that I used design the basic user flow for our MVP. For now, you can circle back (and bookmark!) the journey for Cycler or find useful product design resources I'm stumbling across.