Krikey

AR Mobile Game Design





My role: Product Designer


CONTEXT


Krikey is a AR mobile gaming platform that offers a variety of augmented reality games. 

I was brought on as a Product Designer (August 2020–) to:

  • analyze user data
  • ideate and design new features
  • contribute to the design system 



AVATARS FEATURE


🧐


Problem

Users don’t feel connected to the Krikey platform 

🧠


Insights

How can we create more personalized identity within the Krikey platform?

🤩


Solution

Create an Avatars feature, allowing users to create a mini-me in games.



Process






Key Features






01 CUSTOMIZATION


Users can customize their avatar’s face, hair, clothing, and accessories.









02 SUB-SELECTION


Users can select colors for
each article of clothing, and use a slider to choose skin color. 









03 ANIMATE


Users can animate and record their avatars waving, proposing, laughing, and more. 









04 SHARE


Share videos to the Krikey feed or crosspost to other apps! 





GOALS/OBJECTIVES


⭐️


Champion diversity in the Avatar creation process

⭐️⭐️


Create a dynamic Avatar that can be used across Krikey games

⭐️⭐️⭐️


Encourage AR video creation and sharing virality




METRICS OF SUCCESS


Avatars remains the most popular feature inside the Krikey platform since its launch in early 2021. 

  • 500k + Avatars created
  • 500k + Avatar videos generated
  • 300% increase in monthly active users since Avatars launched






VIDEO REACTION FLOW REDESIGN


Krikey, a gaming platform with a large existing user base, is seeking new ways to socially engage users and build community within the app. 


🧐


Problem

The existing AR video creation flow was rarely used by users becuase of its inaccessible user experience. 

🧠


Insights

How do we encourage users to create and share video content?

🤩


Solution

Re-design the existing video creation flow to allow users to intuitively create, edit, and upload videos.




01 ENTERING THE VIDEO CREATION FLOW


1.1 Old Designs


Users would have to tap on the half tile, then tap again the bird honeycomb to enter a video recording flow, which wasn’t clear to users.



1.2 Re-Design




NAVIGATION


In the redesign, I created a video creation CTA that sits on the bottom right corner of the homepage









SELECTION


The CTA leads into a searchable bird selection screen that allows users to easily and clearly select the bird they want to record in AR.




02 RECORDING



I standardized the buttons on this screen so the major actions– redo, next, and record– are all easily accessible from the bottom row. I also included a progress bar at the top that visually denotes how much time the user spent recording the AR bird versus their own reaction.



03 VIDEO EDITING



I created a bottom navigation to house all the editing features and allow users to see what’s available at a glance. Adapted the carousel to dynamic drawers that house tappable elements such as stickers and hashtags for easy addition. I also standardized the colors to a primary pink and secondary blue to increase accessibility and decrease visual clutter.



04 POSTING

Previously, when users tapped ‘done’ on the top right corner, the video would automatically start posting to the video feed, leading to a lot of accidental uploads.

In the re-design, after the user taps done, they are taken to a final screen where they can preview their video, with options to post to the video feed or externally share




GOALS/OBJECTIVES


⭐️


Direct users to create videos with a clear CTA on the homepage

⭐️⭐️


Streamline the process of allowing users to select which bird they want to record in AR

⭐️⭐️⭐️


Simplify and declutter the UI, reinforce Krikey branding




METRICS OF SUCCESS


  • Number of users who interact with the video creation feature
  • Number of videos generated by users
  • Number of videos posted to the video feed
  • Number of users who drop off before completing their video
  • Time spent in the video creation flow