Overview

Problem: To try out AR development, a team of us at Rakuten built an app for a company hackathon that we planned to finish in 3 hours, give or take. None of us had used Apple’s ARKit or Swift before, and only one of us had iOS development experience.

Solution: An AR game based on finding Slender Man, who randomly appears in the space around the player. The app was inspired by a horror game where players must avoid being seen by the scary, mythical Slender Man. 

Users: Anyone with an iPhone 

Tools Used

ARKit (the framework used to develop AR apps for iOS), XCode

Process

Understand, Explore

slendermanreq.png

We attended a few workshops with the company’s Mobile Developer club in the weeks before the hackathon to get an overview of AR development. Since the AR space was 3-dimensional, we had more nuances to consider, such as getting virtual objects to recognize flat planes in the environment around the user.

Define

Right before the hackathon, we brainstormed app ideas as a team. The app had to be a self-contained experience that we could pitch as a complete idea and build within a few hours. I put together a quick list of requirements and drew out what the flow would look like.

Ideate, Prototype

Despite not having much iOS mobile experience, the engineers were able to learn Swift on the fly. Each person took on a different component, such as finding a 3D model of Slender Man and placing him in the project, and getting instructions to show up on the screen.

Iterate, Implement

Halfway through the hackathon, we realized the original requirement wasn’t going to work when the developers struggled to add a timed counter to the app. Since we were constrained by both a deadline and dev resources, the scope had to change. I changed the game from avoiding Slender Man to finding him by tapping him whenever he spawns, which actually made the game more logical and proactive (and less complex for our developers).

SlenderFlow-before.png
SlenderFlow-after.png

My favorite challenge was figuring out where Slender Man was going to appear in the 3D space around the player. Each plane, X, Y, and Z had a range - ex. (-9, 9), that determined how far away (top to bottom, left to right, front to back) the Slender Man model was going to appear for 3 seconds at a time. I collaborated with an engineer to figure out the range, using trial and error to find out which numbers worked to keep Slender Man within a reasonable distance from the user.

Slender Man model in XCode

Slender Man model in XCode

 

Refine

Even the finishing touches posed challenges, since we were working in a 3D space. We had to figure out how to display the opening instruction: "Find Slender Man.” I changed it later to the more explicit instruction “Tap Slender Man.” Also crucial to the game was a counter that incremented whenever the player was able to find and tap on Slender Man. 

One of our engineers added a nice touch to the UX where the app would play a creepy sound every time Slender Man spawned in the space to indicate that he was there and add a scary atmosphere to the game.

Present

I put together a PowerPoint presentation in typical product management fashion and rallied the team to present each part that they worked on. It was rewarding to pitch and demo our app to a crowd of judges consisting of the company’s upper managers, but we did it!

 

Conclusion

Due to limitations in our technical skill, we didn't use Unity or integrate other software to create fancy graphics. But I must say that the most useful skill we learned was how to build and quickly iterate on a product to ship a workable MVP. For me, it was product management distilled down to its purest form: ideating, developing, adapting to changing circumstances, and shipping. The step-by-step problem-solving process I went through with my team was well worth the challenges of being new to the AR space.