June was a month that mostly consisted of finishing an app and then releasing it along with a bit of a positive distraction towards the end.
Quiz of Finance & Investing was released on June 22 but a lot of work went into the app before that in June. When I first started working on design for this app I thought about and worked on a few different dimensions to go for but I eventually firmly decided to go with a standard stock trading screen as the main design influence. Stock trading screens involve a lot of green and red to track gains and losses and moving parts so I incorporated some of that throughout the app without making it distracting from its main focus as an educational app. One of the first things I concerned myself with was finding a text font style that had a professional & computer related look. After looking at a lot and testing a few I ended up going with two different fonts. One mainly for the quiz section which was more standardized and then one for other sections of the app that had an LED dot style. I remember seeing a neat stock ticker banner outside in New York City the last time I was there a few years ago and it had the LED dots type of font to show the stock symbol, numbers & etc so I felt great going with that type of font for the non-quiz sections of the app as well as the promotional images to help drive the stock trading design goal.
Getting ready to do a mock-up of the main menu screen
End result of the main menu mock-up
After picking a font and deciding on the main colors to use throughout the app I made buttons and static text sections. After incorporating the buttons and other text areas I gave the main screen subtle animations to make it appear active and alive like stock trading is during the open hours because of the constant trades and reactions. So on the main menu screen I incorporated randomized movements to the bar buttons that the categories are placed on. The main menu was also the first place that I incorporated the moving ticker at the bottom. I did a lot of testing with the ticker to make sure it looped without overlapping but also somewhat recycled itself to prevent any bog down on the performance of the app.
Working on the main menu layout in Pixelmator
This app doesn’t need or require an internet connection so I didn’t want that to change at all for a cosmetic addition, so I just incorporated some historic data for that ticker to pull from for the main menu. Then on the results screen I added a ticker that gives the results. The results are shown as the focus on the center part of the screen so the ticker is just there to add to the overall design of the app. The last place I added a ticker was on the Statistics screen that repeats the results that are shown in the statistics table.
Which brings me to one of the main additions I added in June. The Statistics section that tracks how many questions you’ve answered in each category along with the correct amount answered and percentage correct. I also incorporated an erase option to wipe the slate if the user wants to. I used the same features in my RX Quiz of Pharmacy app so I was able to reuse a lot of code which was very helpful and efficient when working on this feature. I mainly had to pull the data from differently named sections that were loaded into the app and change around a few numbers since the question count options are a little different in this app. I also added a green/red delegation that depends on if the percentage correct is above or below 50%.
After implementing all the data and design within the app I worked on sound effects. This app isn’t audio heavy so it didn’t take long to finish this aspect. I knew I wanted computer related & breaking news style sound effects so I went into GarageBand with those intentions and created some audio to incorporate. The last aspect of finishing the app build for me was making an icon. I usually wait to make the app icon towards the end of the apps development because by that time I definitely know what the app is about and how I want it represented. I’ve written about the importance of a well represented app icon before and there are plenty of other articles about that as well. At this point of the app process I had the design of the app cemented freshly into my mind so thankfully it didn’t take long to create an app icon that I was happy with. After finishing the icon I tested the app on different devices like usual. I only ran into a couple of functionality bugs and they were easily fixed. I also tested the visibility conditions to ensure the text sizes were adequate for the different categories since they each had a variance in the lengths of the questions & answers. I ended up adjusting the text sizes so they are different but more fitting depending on the category chosen on the main menu and throughout the changes in an Assorted category quiz. After completing a release ready build I uploaded it and worked on descriptions, metadata, screenshots & etc.
Working on the app icon in Pixelmator
After my new app was approved and went live I spent a few days relaxing. It’s deserved! Then while I was on the Amazon developer portal a few days later to change some keywords I noticed an Alexa skill promotion that stated that developers who created a new skill that passed certification in June would receive an Echo dot. I remember seeing this briefly in an email before but this time I thought about it as a challenge. Voice recognition software is neat, I like Amazon as a company, the Echo devices are intriguing, I recently successfully completed a new app and I was up for the challenge of learning and trying something new. So I challenged myself to make a skill in one day. I went through a couple of skill ideas and then quickly decided upon making a Game of Thrones related skill because its my favorite TV show and season 7 is coming out in a few weeks!
I worked on the skill off & on through the day and stayed up late to finish it. The first thing I did was scour the internet for quotes as well as implementing some of my favorites on a spreadsheet. Throughout development I used a template provided by Amazon and a couple of different articles which were mostly helpful. After having a somewhat finished product I went back and forth with testing until it worked as intended. I got stuck on one part were Alexa would just keep responding with the phrase I gave her to say when she doesn’t understand a request. Eventually I found the error on my part, fixed it, and then the skill worked fine. The first certification review was rejected because my example phrases had an incorrect format which thankfully was an easy fix. After changing those and re-submitting it my Alexa skill passed certification and went live. Overall I made the skill within one day and it was approved within two. This is my first Alexa skill and it’s called Quotes of Game of Thrones. I recently received the email about receiving my Echo Dot too so I should be getting that sometime soon in July. Learned some new things, got a result I’m satisfied with, and I’m getting a neat item for free. Awesome! I may or may not make another Alexa skill down the road, not exactly sure either way right now.
Towards the end of June I decided that I wanted to make a simple to the point trailer for my new Quiz of Finance & Investing app. I probably should have done this before release but oh well. I used Reflector 2 to record the screen on my iPhone to capture different question scenarios from my app so I could pick and choose during final editing in iMovie. After I finished gathering different screen captures I worked on the music. While in GarageBand experimenting I believe I got influenced by a combination of Daft Punk and school marching bands because that’s what the end result of my trailer song reminded me of. I was really satisfied with how the song turned out. It makes me want to move and it has a nice orchestral feel to it.
Alright this post was longer than I initially intended it to be. In July I’ll mainly be working on and hopefully finishing my new soundboard app. I’ll probably post some peeks into it on my Twitter and/or Instagram before release. Until next time ∞
