hero-01.png
 

 

Get Like Me

Get Like Me allows users to create videos with personalized, augmented reality to superimpose a 3-D animated character that can be easily shared to social media platforms.

Features and Workflow | UX/UI Design | Interactive Prototype | Front-End Development | Product Testing

 
 
 
 
 
 
 

The Opportunity

Inspired by current trends on social media, our client came to us with a goal of developing an app that would utilize the latest augmented reality (AR) technology.

Together, KRUTSCH helped to solidify their vision of a native application allowing users to customize 3-D avatars for their video content that could subsequently be shared to their desired social media platforms.

 
 
Select character, record video, edit video.

Select character, record video, edit video.

 
 

The Goal

Design and develop a proof of concept that would enable users to select and customize 3-D characters. The characters would move alongside the user in a realistic manner mimicking the same body form and pose throughout the video sequence.

 

Designing the App

Proof of concept

We began with a proof of concept prototype to discover the following frameworks and SDKs: ARCore, Sceneform, and Filament. Our initial approach was to see if ARCore could be leveraged to build a 3-D wireframe representation of the user.

Once we were able to detect an object in the video to replace with a 3-D character, we worked with Sceneform as a framework to apply the 3-D model to overlay on the detected object’s wireframe. Finally, we examined the capabilities of Filament to enhance the output with a real-time physically based rendering engine.

These SDKs and frameworks are available for both iOS and Android using dual-camera technology for depth analysis, however, after our team of developers tested device capabilities we encountered a number of challenges with a cross-platform solution.

We recommended a prototype for iOS 13 with iPhone XS and above, fully supporting ARKit. This allowed our development team to focus on the tools and framework provided by Apple that are specific to their newer phones.


Feature Set and Workflow

Then, we started mapping workflows for Get Like Me. We prioritized a workflow that would intuitively allow users to set up their frame, select and customize a 3-D model, and then record, edit, and export the final product.

From here we began wire-framing the established workflow and built a quick prototype to test user flows.

 
 
workflow-03.png
 



Visual Language

Simultaneously, our team worked on developing the visual language. It was imperative that we maximize screen space, so our team carefully selected iconography and it’s placement so it wouldn’t distract the user from the primary function of the app.

 
icons.png
 

A member of the KRUTSCH team has a background in video game design, so we custom built a variety of characters for users to select from. Upon selecting a character, users can customize skin tone and clothing color before scaling and placing the model in frame.

 
 
Characters-02.png
 

The Final Product

What resulted was an iOS application for iPhone and iPad that successfully utilizes ARKit to provide users with an augmented reality experience that can be seamlessly shared on any social platform.

This app represents an example of KRUTSCH’s work with media apps that center around the creation, managing, sharing, and use of digital media. These apps rely on phone functions like video/audio and advanced screen management to execute their main user tasks or workflows.

Get Like Me is a product of KRUTSCH’s Think.Code.Go. initiative, aimed at supplying additional resources and services for clients that are new to the app development process.

 
Select character
Position and scale character
Record video