Joyride Video Chat + Games

Project Description

Joyride is a video chat app with additional features like face masks and games.

Summary


Joyride is an app that adds fun activities to video chat. It combines aspects of popular mobile party games with video chat to create a unique user experience. Imagine a combination of multi-user video chat with real-time video manipulation and voice recognition. My role was to research and design UI and UX for the project as well as some front-end engineering. I collaborated with product designers and engineers to help launch this app.

Design & Discovery


Wireframes

After solidifying the key features of the app with the product team, I created low-fidelity wireframes with Photoshop and Sketch so we could iterate on several design options quickly. Working with the product team, we used my wireframes to further focus on final designs.

Related Artifacts:

Face Off minigame wireframes
 Face Off minigame wireframes
Houseparty and Snapchat
Houseparty and Snapchat

Competitive Analysis

Because there are numerous video chat and social video related apps available, I tested out several competing apps with the team to determine how our concept compared.

User Testing

Because our app is essentially a new concept, it was important for us to get feedback from user tests. I observed our user tests from UserTesting.com and determined that users needed to discover the unique aspects of our app as fast as possible. Failure to surface these new features would make our app no different from the many video chat apps already available on the app store.

Joyride color and style exploration
 Joyride color and style exploration
 Origami prototypes showing navigation drawer and "say hi" animations

Rapid Prototypes

It is often helpful to see designs as interactive prototypes. Throughout development I created prototypes to demonstrate user flows, animations, and complex interactions. These provided visual demonstrations for the team as well as helpful reference for the engineers. In the case of animations, many were done within Xcode itself so engineers could repurpose the Objective-C code that I had written.

Related Artifacts:

Takeaways


What did you learn?

I learned a lot about developing an iOS app as this was the first time that I had worked within Xcode directly. I also learned more about modern prototyping tools such as Origami and InVision. This project required faster and more frequent iteration cycles than I had been used to, so there were also some learnings there, too. It was important to quickly demonstrate an interaction or experience and then get feedback from the team.

Related Artifacts:

 Prototype Development in Xcode
Swipe controls in early version of Face Off minigame
 Swipe controls in early version of Face Off minigame

Were there any insights from user research that surprised you?

We initialliy experiemented with alternate control schemes like swiping and double-taps because they were becoming more and more common in popular apps. In user testing, even with instruction, users were confused or lost without concrete calls-to-action. I felt it would be best to have more obvious forms of interaction with alternate controls added as shortcuts.

What was the most challenging thing about this project and how did you overcome it?

One of the most challenging aspects of designing this app was figuring out how to easily add and remove users from an ongoing video chat. I tried several methods of masking and push/pop animations but eventually we settled on shifting the users up or down immediately rather than relying on attention-grabbing animations. It was one of those solutions that did not sound ideal on paper, but in operation provided the least disruptive experience.

Sketches showing user entrance/exit transitions
 Sketches showing user entrance/exit transitions
Origami prototype of the Joyride home screen
 Origami prototype of the Joyride home screen

What part of the design process did you particularly enjoy?

My favorite part of this project was being able to work with new software like Xcode and Origami. It gave me a greater understanding of our engineering tasks and the capabilities of our target platform.

Related Artifacts: