From paper to Swift Playgrounds
The creative process of a designer that developed a WWDC21 Swift Student Challenge winner PlaygroundBook
This is an English version of the article Do papel ao Swift Playgrounds, written originally in Brazilian Portuguese. Hope you like it!
First of all, I think it’s important to say why me, a person who doesn’t have a programming background, would try to participate in the Swift Student Challenge? An international challenge with so many amazing people participating.
The context
I’ve always been passionate about technology and Apple, and since I’m 12 years old, I’ve watched all the WWDCs, but even though watching the conferences made my eyes sparkle, I’ve always focused my knowledge on Design, and not Programming.
In 2020, studying Industrial Design at UFF and deepening my knowledge in Design, I was fortunate to be selected at the Apple Developer Academy | PUC-Rio, where I met learners, alumni and developers, from around the world, as passionate about technology and the Apple universe as I am!
All this encouragement and passion to be doing something that makes me so fulfilled and being able, in addition to working with great people, to collaborate so that more people get inspired and follow their dreams is one of my main goals in life, and participating in the WWDC is certainly an important milestone on my journey.
My first attempt in 2020
As I said, I don’t have a programming background, so I started to learn the Swift language in March 2020, right after I joined the Academy. My goal was not to be a professional programmer, but a developer who could work with anyone on a team, so my knowledge in the field was always more basic or intermediate.
With the announcement of WWDC20, I was extremely excited, and despite the huge challenge of trying to code a Playground less than three months after I started learning Swift, I dealt with the difficulties and arrived at a viable Playground! I was extremely happy to have nights turned around to achieve a responsive and coded result for the first time, but unfortunately, I didn’t win in 2020.
I was already sad because we were in a pandemic with no perspective of ending, that WWDC20 would be 100% virtual, I had to move during the pandemic and my house had a work that I couldn’t stand anymore, but when the day of the event arrived, I managed to ignore absolutely all of this, and all my WWDC excitement resurfaced! I watched as much stuff as I could and met new developers from different places in Brazil and around the world.
With this encouragement, I continued dedicating myself to learning Swift, Design and tried again in 2021.
Okay, now I’m going to share my creative process, I swear! But regardless of who you are, what you do, and whether or not you’ve been to the WWDC, I hope the beginning of this article inspires you positively in some way.
WWDC21 Swift Student Challenge — The Creative Process
The Methodology
First of all, I already knew that I would need a methodology to be able to organize myself both with the project and mentally. For that, I decided to use CBL (Challenge Based Learning), as it is a methodology that I could easily adapt to the project and that I have a good knowledge of. Also, CBL would be ideal for me to develop something that I had no idea how to complete, which would be to code a functional and creative Playground in about 16 days.
The Challenge announcement
Yes, I know I could have planned everything well before and started development on announcement day, but I didn’t, and started planning my Swift Playground the day the challenge was announced, which made it more fun and stimulating!
Before the announcement, I already knew that I needed to talk about a specific topic: the Environment. All the chaos I saw during the pandemic in relation to the environment in Brazil was something that impacted me in very negative ways, and as the world was in quarantine, I felt helpless in relation to the disasters, so I wanted to take this opportunity to express a little more about this subject with the Challenge.
I spent the first few days making sketches on paper and deciding on what I would feel more engaged in approaching related to the topic, and then everything led me to talk about the Amazon biome and its growing fires that took place in 2020.
The planning
Once I decided on the theme, I opened Notion and started organizing the CBL, as well as creating a To-do list with guiding tasks and a schedule (which I changed a few times in the process, but tried to stick to it as much as possible).
My schedule was initially planned so that I would finish the Playground three days before the deadline, which left me with a safe space so I could dedicate myself to helping my friends who were also developing their Playgrounds, in case they needed to, and also not to despair if something went wrong (and it did, of course!).
In addition to these resources, I was also developing on the same page, all the storytelling of my Playground, already defining the markups, the assets to be planned and the interactions that I would like and could implement in the journey, all based on the Challenge scope.
Right from the start, I noticed that everything I researched about creating a PlaygroundBook was too complex for me to absorb with the time available, so I disregarded working with the format and just sticked to Swift Playground — this decision changed in the process and it was an existential issue of my experience.
The research
The research took a long time because, despite the availability of a lot of information about the Amazon biome, it is necessary to be careful and filter all this content, which makes the research complex when it comes to an environment with millions of km² and a monumental variety of species.
At this stage, Wikipedia was a great friend, because in addition to important information, generally everything I researched contained photos in high resolution and available royalty-free, an important factor when using external resources in the Playground.
The first prototypes
To make the development process easier, I started by sketching all the views on paper, illustrating each asset and imagining their implementation in the interfaces. This part of the development was super smooth, and I wanted to put more effort on the design of the project, as I had in mind that this would probably be my “unfair advantage”, because I was also aware that it wouldn’t be my skills with code and Swift technologies that would make the raters say "WOW!". So it might be a good idea to think about what you can highlight of your abilities, and with that in mind, create something that makes you fall in love with, making it amazing!
Afterwards, I photographed my drawings, opened them in Photoshop and separated asset by asset, to import everything into Sketch and organize my screens before coding.
At first I was planning to develop my Playground entirely with SpriteKit, but that changed as I was building what I called Painground (a general experience of pain and suffering with code), so I moved to a technology that I personally find friendlier, the SwiftUI. I needed to rethink some of the interfaces, considering the implementation of the new technology, but it was quite simple since everything was prototyped in Sketch.
The code
I opened Swift Playgrounds and built all my experience directly on it, using the Xcode Playground just to create the markups, as I found that developing this way was easier for me.
While coding, I continued investigating and readjusting my scope. First I put everything in views, turned my assets into buttons that show a Modal with the species' respective real images, and well, I did what I could of the Playground in SwiftUI. My second page I couldn’t develop in SwiftUI, so I made this one exclusively using UIKit, which worked really well.
I put animations, graphic effects etc. So far, everything seems to be going very well, right? WELL… Swift Playgrounds natively has the display results feature enabled, so whenever I tested the Playground, my experience would get extremely slow and stoped working, something I’ve seen happening with other devs as well. Also, since SwiftUI’s animations didn’t have fine controls of the intensity, as they relied on the size of the LiveView to automatically animate, whenever the code was executed they moved wildly through the interface, which was not a persistently executed LiveView.
The Renaissance
What would I do? Place a request for whoever evaluates, always turn off the results on the pages? Apologize for being a big failure? Well, I’m not going to say that I didn’t consider these options, and the first one is actually fine, but I kept researching and saw that if I turned my Playground into a PlaygrundBook (my worst nightmare), I could solve both the toggle with enabled results and the Playground's persistent LiveView issue.
At this stage I was close to hitting my first deadline, so again I changed my scope, planning the interaction now for the iPad only and asking a friend to test it for me since I don’t have an iPad.
I started researching everything about PlaygroundBooks, watched some videos and DevLogs, endlessly asked my friends who had already dealt with this for help, and finally learned the basics of how to use the PlaygroundBookTemplate. I transferred all my Playground to Xcode and after many, many, MANY (seriously, many) failed builds and no explicit errors, I managed to run my experience in the PlaygroundBook format!
The refinement and completion of the experience
With everything running well on the PlaygroundBook, I decided to refine my experience by applying an extra layer of immersion to the interaction with sound resources, and Zapsplat was fantastic for finding the perfect sound for everything, and again, royalty-free content. For the implementation, I used AVFoundation and AVKit. Putting sound on the experience may seem a small detail, but it made absolutely all the difference!
I also took this time to review all my textual content, reading, rereading, re-adapting to the iPad experience, and passing it all on Grammarly, as I always think it’s good to check it out since English is not my native language.
I finally asked my friend to test it on the iPad and everything was fine! Now I had 3 days to calmly think about my letters, send my PlaygroundBook and wait for the Apple team to say “WOW!” when interacting with Amazonia (the name I gave the experience).
The letters
I wrote the letters with an open heart, as I am doing here right now. I thought of every sentence, every word, everything! When I finished writing, I put it aside to reread it the next day, and then again.
Rereading the letters over a period of time helps a lot in the process, as that way we get closer to having the experience of someone who will read them for the first time, letting mistakes and other cohesive issues more visible.
The result
I submitted! Then I waited, waited and waited. Until the emails finally arrived and I confess that before opening, I got really nervous, but I took a breath and opened the link! It was definitely the best thing that happened this year, so it was totally worth it!
Beyond WWDC
As I said in the beginning of this article, since I was 12, in 2011, I’ve been following the WWDCs and I love Apple. I’ve always admired how Apple handles the entire experience, something that inspires me a lot.
Today, June 5th, 2021, as a learner and ambassador at the Apple Developer Academy | PUC-Rio, I feel like a dream come true, for being so close to people I admire and for working with something I’m devoted and passionate about, and I use that passion as a core for my projects, life, and leadership decisions.
My passion for exploring, sharing knowledge, and helping others discover how to reach their goals, and develop their projects while making this planet a better place to live and evolve, is my main motivation at the moment, so I hope you enjoyed this article and thanks for trusting me and reading this far!
Do you want to test my PlaygroundBook on your iPad or Mac? Are you thinking about exchanging ideas and talking? I’m providing the project link on GitHub and the documentation (not final) on Notion with my email!
Thanks! ✌️
Special thanks
Thanks Diogo Infante, Fernando Lobo, Fred Lacis, Lucas Frazão, Pedro Gomes, Ricardo Venieris and Yuri Strack! You made my experience with the WWDC21 Swift Student Challenge uniquely memorable!
