Published on | Prototyping: From UX to Front End — Medium Seong Lee

My first ever iOS app just got approved in the App Store. Woo-hoo!

It’s been about 4 weeks since I started the app project and I’m pleased I made it this far. I want to share my experience with building the very first iOS app including some useful tools that helped me get up to speed. I hope I could shed some light and point you in some direction for your next project.

The motivation

As a UI designer, I always wanted to be in the position where I can handle every aspect of building a software product. And I wanted my product to be something that anyone can download and use. iOS was a perfect platform for that. I use Apple stuff for my design work so I already had everything ready for me to start. The high adoption rate of Apple OS update was another big yes for me.

Xcode, my all time favourite

Expanding on the motivation, I just love Xcode. I can safely say it’s the best development environment I’ve ever worked with. Everything is so well done from the view editor (storyboard), code assistant guide, compiler to packaging the project to the App Store for review. I just admire how Apple manages to deliver the all-in-one platform for creators like us.

I’m not saying I love 100% what they do with their products lately but you just can’t beat a company where the same guys produce a hardware, operating system and even a dedicated development environment for their developers!

Programming can be learned

Let me go over how I managed to work out the coding part as a designer.

I was quite involved in front-end development in many parts of my previous work and I learned some server-side languages before in college. So I had some kind of confidence that I can implement features as long as it’s not too tricky. It was for sure a steep learning curve to learn Swift — the new programming language for me — but luckily I played with the earlier version of Swift when it first came out.

Still, I needed to see how apps are made in Swift. I looked up online courses and came across Udemy and I found the latest Swift course with the best rating. I previewed the course and I was sold instantly. Thankfully, it wasn’t just the preview video that got me hooked, the whole course was well structured with a lot of thoughts. The course walked me through fundamentals of Swift language as well as showing how real world apps are made using those concepts that were just learned.

Search up the course by Angela Yu with the latest Swift version. At the time of writing, the search keyword for the course is iOS 11 & Swift 4 by Angela Yu.

You will see what I meant. It was easy to follow and the course was crafted carefully from a novice app developer’s stand point. I know I told you that I have some programming background but this course is designed for beginners. She really did an amazing job putting it together. At the time it was only for $20 USD on a special deal. This is the kind of investment that I will look back with have no regrets. I mean I spent $9000 on a 1 year programming course that gave me some qualification that probably noone gives a f*** and I have many regrets in spending that sort of money. $20 is nothing compared to that and the course felt to me worth 10 times more (original price tag was $200 anyway).

While you’re taking the course, I highly suggest you don’t just watch the course but open up Xcode and follow along what the lecturer tells you to do that is to actually write some code and try things out yourself. For me, I watched the part where it talks about the fundamentals and then I picked which lecture will help me with building my own app. It would be great while you’re taking the lecture, you know what kind of app you wanna build. That way, you know what you need to learn. To be able to build the app I had in mind, I needed to know how Auto Layout (responsive layout in web design) works, working with data and the whole lot more list.

If your app has nothing to do with data syncing in a cloud storage, then you probably wouldn’t look at Firebase, networking lectures of the course. You’re welcome to go through the whole course in order but when you have other work and you only have a limited time frame to work on a side project, you want to find a way to move fast. I went through about 40% of the whole course material and managed to put my app together.

The course will suggest this but I will mention it here also. You will find huge help on Stackoverflow, Apple developer forum and Swift documentation. With Stackoverflow, learn to skim through the solution that will solve your problem. The accepted answer won’t necessarily mean it’s the answer for your problem. It’s highly likely that someone else already asked a question that you have in your mind so be smart with the search.

Last thing, I hope you don’t just copy someone else’s code but try to understand what the code is doing, what kind of value it’s passing around. There are certain patterns around code snippets that you first call some object from a library, make an instance of the object, call some function with the instance you created and pass the returned value place to place. As a beginner app developer, you will want to learn how to best use resources that are available and follow good practices. Have many questions; How did I get this value? What the heck is this “_” symbol? These are all good signs that you are trying to learn and make it your knowledge, not just hacking it around.

So, what did I build?

I build an app that teaches Hangul. Hangul is the name for the Korean alphabet. With this app, I wanted to teach non-Korean people the fundamental concepts of Hangul. In specific, how Hangul alphabets are formed to make up a letter. The Hangul system has some amazing science that once you understand it, with little effort, you can pretty much learn to read and write.

Back in the old days, Koreans used Chinese characters to read and write. Modern Chinese characters had been revised many times so it’s probably not as difficult to learn thesedays but back then, Koreans used Chinese traditional characters and many people had difficulties reading and writing in those words. It was really only for those highly educated, wealthy people.

Then there was a great king in Sejong dynasty who recognised it as a big problem and actually took some actions. Actions that changed our history forever. Hangul was developed. Many strokes on Hangul characters were based off Chinese characters but it was completely a new language. We had a set of succinct alphabets and these alphabets could be put in the order they are sounded. So people can anticipate how to form a certain letter using those characters. Then these letters become a word. People adopted the language very fast and it solved the communication problem we had across the nation.
This is probably one of the best invention that I know in Korean history.

So basically, I wanted my app to illustrate the amazing science behind the language and send a message across that it’s really not that hard to learn Korean.

Doing what I do best: Design

For this app to be sound — visual and functionality wise — I needed to build a custom set of Hangul characters. I made these characters using only primary shapes like circle, straight lines and rectangle to minimise the friction for deciphering these characters for non-Korean, beginner learners.

I also came to realise that there are 6 fixed patterns in combining the Hangul characters into a block of letter. It’s a shame but if it wasn’t for this project, I would have not been able to realise it.

The basic concept of the app is to provide users with a series of word questions that each question comes with empty boxes. So if it’s two-letter words, two groups of boxes in those 6 different patterns depending on the word.

User then figures out which character goes into which box. Of course, the sound of a word is provided to be played over and over (using my own voice..).

User on-boarding

It’s my understanding that to survive in the App Store, your app needs to be engaging. There is some kind of algorithm to analyse average user engagement time in an app. It’s basically that the longer user engages with an app, the higher chance to have to show up high in the search list.
I originally wanted to prepare a walkthrough screens for a user launching the app for the first time to guide them how to use the app. But knowing that Apple actually watches the engagement time assured me that I need to do this.

On my last note..

Your first ever app might just be a free app but given my experience in product design, I didn’t feel comfortable with making it completely free. I chose to implement the In-App purchase with the base app being free to download. So user can see it themselves and decide if the app will be more useful for them if they unlock more features. I think it’s fair decision given that I have no incentive around collecting users’ email nor that is necessary for this app to work.

My app is only targeted for iPhone as there were some difficulties around making images compatible for a larger screen devices like iPad. But even though you’re only targeting iPhone, you will need to make sure it displays on iPad okay. If not, Apple will reject you app and you will have to address it to get accepted. I just wanted to add this as this app was rejected for that very reason.

I hope this article was somehow useful for those wanting to build an own app.

Search “Hangulo” in the App Store and try it out even though you’re not really into learning the language. I would love to hear your opinions from design, development perspective.

<a href="https://medium.com/media/693749df17cf6c80a91d46d28b6a3373/href">https://medium.com/media/693749df17cf6c80a91d46d28b6a3373/href</a>

Designer Learned Swift. Shipped First App. was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designer Learned Swift. Shipped First App.

Cool stuff, every week

More Articles