SwiftUI Experiments: Metric Converter

Building simple apps I find helpful

Since I’m from America I don’t have the metric measurements memorized. I recently had the need to convert various measurements to the metric system. It got a bit tedious to constantly pull up Google search to get these conversions.

This project was one of the few times I relied a bit less on Figma for design explorations. I already had a good idea in my mind on what this simple app would look like. I briefly used Figma to explore a simple color palette but most of the design explorations happened in Xcode using SwiftUI which was a lot of fun. I imagine with tools such as ChatGPT, we’ll see more designers going into tools like Xcode first, especially for apps with a simple interface.

Here is a demo on the app I put together:

If you’re curious about the process, I relied on my previous SwiftUI experience but I also utilized OpenAI’s ChatGPT to get help on some of the code. Since I have the most experience as a product designer, tools like ChatGPT help me build out my ideas which to me is still so fascinating. If you’re a designer that still hasn’t explored ChatGPT, I highly recommend that you do. I’ll be publishing more articles on how designers can utilize ChatGPT. Here is one of the articles I published on how I leverage ChatGPT to help with me with research synthesis.

Here’s a demo of what the app looks like when I build the app on my iPhone. Interacting with the app within the simulator is always fun but it makes me happier when I get to interact with the app on an actual device. You get a better understanding of the overall experience of the app when you actually use it on the intended device and I feel like it makes you proud that you got something working on an actual device. I think this is one of the things that can inspire designers to learn to code. Figma prototypes are always fun to build but it’s even more special when you build something that can be uploaded to the app store and then be used by real people.

Although this app is simple and it helps me accomplish my goals there is still more work to be done. Next, I’d like to explore some subtle animations and interactions to add more delight to the app.

I also need to address some edge cases before I can publish the app to the app store. As some of you know I also teach product design classes part time and a common topic I lecture about are edge cases. I think this app is a great example of edge cases that come up where it needs to be addressed during design and development. For example, initially the formula I used provided a lot of decimal points which made the converted numbers very long. I had to adjust the code so it only showed me two numbers after the decimal point. As mentioned the way I built the app accomplishes my current goals but for users that need to convert larger numbers this current design doesn’t scale for that. I would need to change the way the numbers are displayed. Either I reduce the font size so more numbers can be displayed, or I truncate the number and have it be displayed in its entirety through a horizontal scroll is another solution that comes to mind. But more to come.

I’ll publish an article on how I approach these edge cases.

Thank you for reading!