PinDrop Network

—-—

Duration – 4 weeks 

Key Skills – Research, Heuristic Analysis, Competitor Analysis, Sketching, Wireframing, Prototyping, Usability Testing, Communication, Visual Design

UX/UI Designers – Ellen, Milo, Rachel 

What is PinDrop Network? PinDrop is a universal platform designed for creators to share feeds, videos, lessons and events while monetizing their content via subscription. 

The Team

—-—

As UX/UI designers, we got to work directly with the CEO and other stakeholders. 

• Director – Nathaniel Davis

• Other stakeholders – Adam B, Miles T, Yvonne K

We as designers, conducted weekly meetings with the PinDrop Network team to discuss issues regarding our tasks and deliverables. Our main channels of communication included: Slack, Email, Google Meet, and Google Chat. 

Problem

—-—

Although PinDop Network already had their own web prototype design, there’re still existing problems that need to be solved. As a team we developed a few How Might We points:

1. HMW Motivate users to join classes with the gaming features? 

2. HMW Allow users to post content and discover new feeds?  

3. HMW Create a familiar yet unique looking social media interface?

4. HMW Provide easy navigation while experiencing on PinDrop Network’s website?

Objectives

—-—

Our team goal was to develop both low and high fidelity wireframes of current and needed pages. PinDrop Network wanted to understand if users could comfortably and easily navigate through their site, as well as showcasing a visually pleasing interface for their launch.

Our aim was to help PinDrop Network with:

• Understanding current trends and platforms within social media applications

• Analyzing competitor strategies and features 

• Creating new UI design 

• Conducting usability testing with prototype 

Scope & Timeline

—-—

For this Industry Design Project (IDP), our timeline was from August 13 to September 10, aiming for a total 40 hours of work. We broke down our needs into a 4 week timeline.

Week 1.1: Initial Heuristic Analysis

—-—

We kick started with presenting our Heuristic Analysis based on Jacob’s 10 Usability Heuristic Principles. We focused on analyzing 6 social platforms; Netflix, Spotify, Calendly, Youtube, Tiktok, and Onlyfans.  

Based on Jacob’s 10 Usability Heuristic, we picked 3 principles to dive into:

1. User Control and Freedom 

2. Flexibility and Efficiency of Use

3. Aesthetic and Minimalist Design   

Through our Heuristic Analysis report and presentation, we aimed to:

• Point out the pros and cons of current social media platforms used for inspiration

• Discuss each platform’s specialties and features within

• Offer suggestions to PinDrop Network referencing each platform’s UI design into their own

Through this presentation, we were able to provide new insights from existing social media platforms, while pointing out PinDrop’s weaknesses and areas in need of improvement. By doing so, the stakeholders were able to obtain a new perspective on the current product design, and start preparing for next steps. 

Week 1.2: Comparison Analysis and Evaluation

—-—

Following up with the Heuristic Analysis, we did a comparison analysis report to compare page features like Home, Feed, Lesson, ET with other companies similar offerings. 

According to PinDrop Network’s features, their existing pages share many similarities with the existing social media platforms, like: 

• Home: Netflix, Youtube, Tiktop

• Feed: Instagram, Twitter, OnlyFans

• Lesson: Masterclass

• ET: GTA, Xbox, World of Warcraft

Throughout the presentation, we suggested new ways to implement designs and features, such as:

• Home screen:

  • Limit current color to 1-2 CTA colors to avoid confusion

  • Change the navigation bar from the side of the screen to the top of page for easy access and better noticeability.

• Feed screen

  • Create a discover and categories tab where users can explore new content beyond the creators they currently follow   

• Lesson page

  • Stick with 1-2 accent colors used on the Profile page 

  • Implement a continuous scroll by moving design spacing closer with less gap in between content

• ET page

  • Create eye-catching and colorful reward icons and layout that fits the brand style guide 

Based on an our observations and analysis of different social media platforms, we discussed new ideas and solutions mentioned above to help improve PinDrop Network’s current design. After presenting, the stakeholders agreed and were happy with our new suggestions. This allowed us to proceed to sketching new LoFi wireframes. 

Week 2: Sketching low-fidelity prototype on paper

—-—

Our sketches were mostly reinterpretations of current screens, aiming to optimize the home and feed pages, while the last two sketches were the first designs of an ET gaming page. We concentrated on having the nav bar on top versus the previously designed side nav bar, along with a search button. The home and feed pages were broken down into further sections, with small CTA buttons throughout. Our main concentration was to optimize navigation, as well as develop the ET layout. The main ET page would display the user's icon, stats, and challenges- with the next page further explaining current goals, challenges all in list format. 

Week 3: Creating & finalizing a working prototype

—-—

After our sketches were approved we began designing low fidelity versions of each screen. Each of us took on our own pages, later collaborating with one another to make sure our UI was similar to one another, allowing seamless transitions from page to page.

After presenting and discussing ideas with Nate and Miles, we updated with changes wanted and then started developing high fidelity version of our screens. We discussed the changes that we made, and explained why implementing them would be a good idea.

Changes:

• Side bar → navigation bar on top

  • Takes up less space and allow for users to more freely navigate through the site without having the constant sidebar distract them from the content

• Pop out nav bar → hover nav bar 

  • Creates less distractions for users and clicking acts as a commitment whereas hovering allows for user to use minimal effort into exploring through the site

• Selecting the main colors

  • Before, the site had too many accent colors which doesn’t allow for consistency within the app. By utilizing one of two accent colors, users are able to easily identify the call to action buttons better as well as it not distract from the content by having too many elements

• Making the feed page consistent with the home page and adding breaking points 

  • Allows users to easily differentiate between different functions

• Cleaned up the ET page 

  • It looked a lot different from the home page and did not look like it belonged with the rest of the other pages

So here’s what we came up with:

Week 4: Usability Testing 

—-—

After finishing our prototype on Figma, we tested five users for a usability test. The purpose of this testing was to see if users understood the displayed content, and are able to navigate through each screen smoothly without any issue.

Our testing prototype: https://www.figma.com/file/aKnF7WRmiyzsltwwmsIlpe/IDP---PinDrop?node-id=214%3A793

Below are notes on what we found:

Common Themes:

-Reminds of similar apps but nothing concrete which is good- has it’s own identity

-Standards/CTA Colors need to be finalized, current yellow and black is nice. 

-Layout is nice, not cluttered and easy to view. 

-Wants to make sure there is a desktop version as well for watching videos at home

-Hard to distinguish what is a video, article, or static post- maybe have signifiers

-People like the ET concept and how it helps to keep customers but do not really understand the integration, or if anything some would like it as a separate application. 

-Feed page: confusion as to what the content displayed is (yours, others following, featured, etc.) 

-Find it very user friendly and straightforward

-Many mentioned they are already using multiple platforms and unsure about joining another

-A bunch of testers were hesitant about pricing, feeling like a lot of content could be found elsewhere- or that they had no want to pay for something like yoga when it could be online. 

-Enjoys not having too much text, more image based, along with icons on top nav bar

Afterward, we gave some suggestions for PinDrop as they continue their journey.

Recommendations:

Some of the mentioned comments were due to the fact that we presented a mix of low, mid, and high fidelity screens throughout the prototype. Issues with font size, and variations in design are important but not the main concentration of this testing. 

Keep pages as simple as possible, users really enjoyed the simplistic easy to read imagery. If anything is to be added make sure it is within the color standards and not too distracting to the user– they really appreciated how easy to view everything was.

Subtle defining factors (think icons, or color coding) to establish what each content is. Is it your content, is it a video, song, written documents, and more. This goes hand in hand with defining the Profile, Home and Feed page content-even the Events area. Just a little more definition will help resolve any confusion with users. 

The ET page was not a focus for any of the users, they all appreciated it but struggled to fully appreciate it even after a full explanation. The gamification aspect is appreciated but may need to be subtly integrated for it to be fully used.