PiñataFarms — iOS App & Web Dashboard

I designed PiñataFarms’ very first iOS app and web tool dashboard.

OVERVIEW

In 2020, social apps were stagnant and failed to reflect the cultural relevance in music, movies, games, and sports, to the late teens to 20s demographic.

As a design lead, I’ve designed the core iOS mobile app & web tool dashboard for 6 months. The iOS app is currently live on the iOS App Store.

As a design lead, I worked closely with 1 CEO, 2 product managers, 1 director of engineering, 2 front-end, 1 iOS, 1 backend, and 6 computer vision engineers to build the beta iOS app & web tool.

ROLE

Lead Product Designer

TIMELINE

Oct 2019 - Mar 2020

OUTCOMES

Launched iOS & Web

1200% reduction in video editing time

300% reduction in clicks required to process a 10-sec clip

LINKS

Context

Problems

  • Video editing: a high barrier to entry, create & share friction.

  • Computer Vision: PF’s computer vision was already ahead of Adobe Premiere. And yet, still, there was a long way to go. Quibi vs TikTok (polish vs spontaneous creativity).

  • Executives: wanted to max out all the features right now.

  • Engineers: wanted to showcase all the tech we can implement (turnstile, robust video editing features, and more).

Business Goals

PinataFarms’ mission was to make generating video memes easy. PinataFarms can create an ecosystem for both creators & consumers of video memes.

With a compelling seasonal subscription-based monetization, PinataFarms can further drive incremental sales for the users.

Product Solution

Allow users to create video memes while leveraging:

  • Social/ Gamification

  • Recontextualize already existing online video contents & user-generated contents

UX Research

The team’s project cadence was very high due to the scrappy nature of the early startup stage, so I had to move fast to understand the lay of the land.

I took the most up-to-date engineer’s prototype for the web dashboard that was designed and built before I joined the team and took it for a quick spin— I moderated in-person usability testing with 3 participants plus myself in the very first week of joining the team and found the following insight:

  • No coherent design principle was applied to the prototype

  • Users found the UI confusing and cluttered

  • The biggest perpetrator was inconsistency in navigational logic

Then I conducted the following research:

  • Competitive analysis- social, video editing software, AR.

  • Expert Interviews: executive team, engineering, product, computer vision team, content creation team.

  • Persona: Late teens to early 20s millennials & gen-z.

Followed by conducting qualitative user testing on 3 different versions of prototypes:

I’ve observed user behaviors around first-time video creation user journey, profile creation, search flow, and blockers/ drop-offs.

Creative Solution

Then I decided to quickly sketch out the new prototype with my findings and high-level goals in mind. I validated my ideas with diagrams and low-fidelity pen and paper design.

The initial effort was focused on delivering a simple and logical hierarchy for the features and then I pushed the design further to successfully achieve the goal of making video editing feel easy and even fun as if you’re playing a video game.

One notable mechanism I’ve applied is the contextual tool system where everything the user needs can be found just by hovering over the desired area instead of traveling your mouse cursor all the way to the static buttons found around the screen. So, I essentially made the web tool feel more like a mobile experience.

All the actions you need to take will appear in your hover-over modals:

Meme Video Editor- General Rule Sets

When users upload their videos, the computer vision AI automatically completes video mapping where all the technical work is already completed. Then, users can easily edit and confirm their video which will be uploaded to the PinataFarms’ server, making itself available to all the app users. Now anyone can use the processed video to remix it any way they want and create entirely customized video content.

1. Hover over- rotation.png
2. Hover over- resize.png
3. Hover over- pose & emotion.png
4. Click on canvas without a head.png
5. Click on tracked head.png
6. Collapsed controller.png
7. Expanded controller.png

Meme Video Editor- Interpolation

Interpolation is a process of filling in the unknown data between two known values. So, in this case, if a user attaches any new item to the video, PinataFarms’ computer vision AI will automatically generate motions in between frames so the final video will appear smooth instead of jumpy.

Interpolation control was implemented directly over the canvas instead of having a separate control area.

Interpolation Empty.png
Interpolation Empty-1.png
Progressive.png
Interpolation Empty-2.png

Meme Video Editor- Trim & Delete Segment

When you join two video clips together, you splice them. PinataFarms allows users to easily edit with intuitive controls. I consolidated On-canvas-controls(pose, rotation, emotion) with Additional controls(relative size update, making same size, interpolation).

1 Trim empty.png
2 Trim active.png
3 trim confirm.png
4 Persistent visual indicator on the bar.png
5 No Visual indicator on the bar.png

Meme Video Editor- Smart Auto Resize

PintaFarms’ AI automatically resizes any items users upload. You can also easily resize any time just by dragging the corner arrow. AI also handles any additional interpolation automatically.

1 Hover over- resize.png
2 Click on- resize- click off_ initiate preview animation loop.png
3 Click on- resize- click off_ initiate preview animation loop.png

Meme Video Editor- Bulk Action

Bulk actions save time and frustration. Below you will find scalable design solution for additional bulk actions you can take and when they may come in handy.

System control- Click anywhere on the screen-1.png
System control- Click anywhere on the screen.png

PiñataFarms iOS App- General Flow

Every video in Piñata Farms transforms into a piñata, brimming with numerous small items for you to discover, use, and reimagine in your unique creations, showcasing your skills as a Meme Creator and Meme Generator.

PiñataFarms App- Onboarding

I designed the onboarding via invite to be fun and engaging right from the start— You are asked to create your own Piñata video using your invitee’s head. The intention was to create this fun and engaging loop to maximize the organic invitation.

PiñataFarms App- Video Meme Creation Flow

PiñataFarms cutting-edge technology effortlessly isolates heads from photos. This feature not only recognizes poses and emotions but also compiles headpacks. Furthermore, the app can flawlessly extract objects from the video.

  • All available heads appear on top. All available/editable Pinata content options are shown below.

  • Pinata head content selected & applied to the video.

  • Slide gesture up will activate more content drawer.

  • Search option empty state

  • Search option complete

  • Edit Piñata content

  • Temperature

  • Contrast

  • Resize

  • Confirmation empty state

  • Confirmation complete & ready to post

  • Successfully published confirmation state

  • Successfully saved confirmation state

  • Abandon confirmation modal

PiñataFarms App- Piñata Creation Flow

Piñata is any item such as the head, pose, or text block you can juxtapose on top of the video. The patent-pending computer vision AI allows any user to create their own Piñata items right from their phone.

  • First time tutorial education video- empty

  • First time tutorial education video- take different pose

  • First time tutorial education video- taken 3 minimum shots

  • Create Piñata head- empty

  • Create Piñata head- first shot created

  • Create Piñata head- auto reflect

  • Create Piñata head- minimum 3 image created

  • Piñata head creation review

  • Piñata head creation complete

  • Successfully saved confirmation state

  • Future state- capture more categories empty

  • Future state- captured happy emotion

  • Piñata creation- robust drawer design

  • Piñata creation- detail edit state

  • Piñata creation- variation

  • Piñata creation- option to see item in action

Outcomes and Conclusion

The first 100 users were onboarded with the white-gloved approach and I tracked their overall qualitative user satisfaction score based on:

  • User engagement metrics: unique visitors, new & returning visitors, page views, time spent on a page, and sessions on core user journeys such as content creation flow, profile completion, and content sharing.

  • Usability metrics: time-on-task, user error rate, task-level satisfaction.

  • User adoption metrics: active users, average time spent on the product/feature, adoption rate, and retention.

We received wildly positive responses from the first 100 users on the fun & useful aspect but we also uncovered many shortcomings such as lackluster product polish delivered by inexperienced front-end developers, system instability, and lack of content aside from the ability to add text and human heads. Our pre-beta user base organically grew to 10k users before the official beta launch on the iOS app store.