A not-so-long time ago in remote home offices not that far away… 

The idea for a new social media app was born. In this post, I will take you on the journey of our Grio design process while introducing you to the Pyvott social media app. 

User Story Workshops

At Grio, almost every new project begins with our User Story Workshop. During the workshop, the Grio project team and the client team work together to clarify goals, rapidly generate product ideas, and then narrow them down to a minimum viable product. 

After listening to the user story workshops with the Pyvott team, the main takeaways that fueled our original designs for the app included: 

• “You’re in control of the content”
• “Free yourself from the algorithm”
• “All about the content”
• “Make it immersive”
• “Why can’t we use the whole screen?”
• “We want to target influencers” 
• “The Rock, the Rock, Dwayne the Rock Johnson”

Whenever a new app is created, the output is a reflection of the input. As designers, we take the original ideas generated by the client during the user story workshop and then use our professional expertise to get beyond what was originally requested to what the client and their users truly need. 

Competitive Analysis and Conceptual Designs

Once the user story workshops are completed, our design team begins work on conceptual designs: broad, big-picture outlines for the app that we will eventually create. These conceptual designs give both our project team and the client an overarching view of what the final product will become. 

One of the first phases of conceptual design for a new app is competitive analysis: seeing what exists in the competitive landscape that your product will be entering. For the Pyvott app, we analyzed the major social media platforms, including Pinterest, Instagram, YouTube, TikTok, Twitter, and Snapchat. Our review of the major social media platforms revealed several overarching design patterns, including the use of a bottom navigation tab, a single feed, and a standard profile design. 

The universality of these components brought to mind the 2007 iPhone Keynote by Steve Jobs. During his presentation, Steve Jobs brought up images of the “usual suspects,” the smartphones popular at the time, and focused on the hardware keyboard all of them possessed. Rather than accepting that the keyboard was a necessary part of the phone since all other smartphones had them, Steve postulated that you could remove the keyboard and instead have a keyboard that appeared only when you needed it. This was the birth of the touch screen, and represented an enormous evolution in the standard smartphone design. 

With this philosophy in mind, we began to think about how we could break away from the standard patterns of current social media apps and instead create something that was both more efficient and more personalized. 

The Bottom Tab Bar

Regardless of the app, every social media platform utilizes a bar at the bottom of the page for the various app tabs. Most bars include a “create” tab to post to your profile, a “view” tab for scrolling through content, and a “profile” tab for your account. While this bar is convenient, it takes up valuable screen real estate that could instead be utilized by the app. For the Pyvott app, we wanted to instead create a button that freed up screen space while still allowing for efficient navigation. 

The Single Social Feed

With all the computing power that your smartphone possesses, it seems unnecessarily limiting to have only one feed on your social media app. We, therefore, began sketching ideas for a news feed that would allow you to both customize your current feed and create multiple feeds based on your interests. 

The Standardized Profile Page

When you look at profiles across the different social media apps, the profile pages all look the same, regardless of the type of content they post. With the nostalgia of MySpace still fresh, many of us were interested in returning to the days of customizable profile pages. Not only did we want users to be able to customize their profile colors, fonts, and formatting; we also wanted influencers to be able to create profiles that would maximize their potential. 

Details of the Design

Once we had created a conceptual design for our app, we then began working on the details of the design. The detailed model for our app is created using wireframes. These wireframes fill in the gaps between the conceptual design and the final project. 

For Pyvott, we began to fill in the details of our design and plot out the navigation of the app: 

Pyvott Navigation Button

For the Pyvott app, we created a small Pyvott button in the lower right-hand corner of the screen. When the button is pressed, it reveals your navigation options. However, when you leave the button, the navigation is once again hidden, allowing you to make the most of your screen space. 

Multiple News Feeds

The Pyvott app has a customizable social feed that allows you to switch between various feeds, while also customizing the content you consume in real-time. On each feed, you have the potential to choose if you want long-form text, short-form text, videos, images, or some combination of all of the above. 

For example, I have a cooking feed, a cars feed, and an art feed. While my art feed is mostly photos, my cooking feed includes more short and long-form text. 

Personalized Profile Page

The profile page on Pyvott is expressive of the user. You are able to put pictures, quotes, or music videos in the background, and customize your color scheme, layout, and posts. 

For influencers, we created even more opportunities for customization. Influencer and celebrity pages display their current number of followers and the number of current visitors on their pages. Their profile page can also be organized to include sections for the products they are selling or endorsing, new projects they are participating in, upcoming events, and more. These settings allow influencers to more efficiently promote their products and connect with their followers. 

For example, our original conceptual designs featured Dwayne “the Rock” Johnson and included information about his tequila and Under Armor brands, as well as trailers for his upcoming movies. 

We also explored the opportunities for creating profiles that are specifically targeted towards viewers. For example, Pyvott may change the advertisements in profile photos based on your gender or your preferences. 

Final Thoughts

Everyone can and does contribute to the design process. From the client team to the project team, everyone’s insights help us create the best product possible.  Designing the first version of the Pyvott app was an exciting process that we are grateful to have been a part of.  We’re looking forward to designing more features for Pyvott in 2022!