Pyvott-hero-shot

Pyvott Mobile App

In the fall of 2020, Pyvott engaged with Grio in a remote, user story workshop with the intention of developing a new social media app. The workshop was broken up in to 2-hour sessions across 3 days. 

The result of the workshop was a series of user stories which were used as the basis for the initial conceptual designs as well as the detailed designs. The app launched in the Apple App Store and Google Play Store in the spring of 2021.

Client: Pyvott
Agency: Grio
Role: Creative Director

The Usual Suspects

My first step on the project was to look at a handful of the most popular social media apps in the market. My list included Pinterest, Instagram, YouTube, TikTok, Twitter, and SnapChat.

I was already familiar all these platforms, but when I lined them up together, patterns emerged:

Social-Media-The-Usual-Suspects

Looking at these apps with fresh eyes I had realized how social media had matured and how much sameness existed. Things had stagnated.

Apparently there was only one design pattern for social media and that was a bottom tab bar with icons for Home, Search, Upload, Notifications, and Profile

Wow. How innovative.

Sure, design patterns are important, and you shouldn't just change things for the sake of change, but you should also make sure you're not getting lazy in your design process.

Steve-Jobs-The-Usual-Suspects

Sidenote: I stole my presentation format from Steve Jobs' original iPhone keynote (If you've never seen this keynote, do youself a favor and watch it). In the keynote, Jobs explains that the inherent problem with the then-current lineup of supposed "smartphones" were the keyboards. "They all have these keyboards that are there whether you need them or not to be there."

So much like the original iPhone getting rid of the hardware keyboard, we got rid of the bottom tab bar.

Pyvott-button-open-and-closed-1

One of the things that the client emphasized during our workshop Zoom calls was how he wanted a mobile experience that utilized the entire screen of his phone.

Our phone screens were no longer rectangles, but extended to all four, rounded corners of the device. The phone was the screen. He wanted the Pyvott app to saturate the whole thing.

So we got rid of the bottom tab bar every single other social media app had and we rolled it up into the "Pyvott Button".

When you tapped on the Pyvott Button, it would expand to reveal all the key actions you could take. From top to bottom they were: Messages, Feeds, Profile, Upload, Customize (Current) Feed.

It's the question that drives us

Why do we only have one feed? This was the question that drove my subsequent design decisions. Let me get this straight. I'm able to have multiple home screens on my iPhone, but Instagram only has one feed for all the accounts I follow?

How does that make any sense? It seems unnecessarily resticting on such a powerful little pocket computer capable of doing so many things.

home-screens-3up

At the time of this phase of the project (fall 2020), the first home screen on my iPhone (running iOS 14) included the apps I use on a daily basis. The second screen was media apps (video, music, books). The third screen had various utilities. I still mostly use this organizational structure on my iPhone today.

I started sketching and mocking up ideas, not only for multiple feeds, but for multiple layouts. Again, we need to question conventions. Do posts always have to be single file, one on top of the other? Could we mix up the grid and intersperse different sized posts as well as different content types?

feed-customizer-concept-sketch

My intial idea was having a slider that would change the density of posts in real-time in a smooth, liquidy transition and finger slid across it.

feed-customizer-concept-axis

You always want to aim high when you're designing. This concept was asking for a lot. The idea was you slide your finger across X- and Y-axis to control both the grid density as well as content types displayed.

feed-customizer-concept-decoupled

When I realized the X/Y controller wasn't practical, I decoupled content type control from content density control. Not as sexy, but way more usable.

This was a fun prototype I put together in Principle to better demonstrate what was bouncing around in my head. 

At one point the client texted me for this video when he was with potential investors.

Changing Channels

Sorry, I still haven't addressed the question, "Why do we only have one feed?" In Pyvott you don't just have one feed, you have as many as you want. Much like turning on ESPN+ when you want to watch sports, and HBO Max when you want to watch The Bear or Raised By Wolves, you can switch feeds depending on what you want to see.

Maybe you like to lump all the boring content your friends and family post into one "Family & Friends" feed. That way you don't have to unfollow them because they're posts suck. And all your yoga content can be in another feed. All those food accounts that show with the great recipe ideas can be in another. You get the idea.

Multiple-Feeds-01

When you're the lead on a project, you can drop your adorable 15-year-old chihuahua into the comps.

Multiple-Feeds-02

If you don't have a classic cars feed, you need to examine what your priorities in life are.

Once you have a bunch of feeds, you need to be able to navigate between them. It's simple. You can swipe left and right, or you can jump right to a specific feed from header.

Custom-Feed-Desserts
Custom-Feed-Menu-01
Custom-Feed-Menu-02