{"id":5196,"date":"2020-08-10T19:51:35","date_gmt":"2020-08-10T19:51:35","guid":{"rendered":"https:\/\/digm.drexel.edu\/uxid\/?p=5196"},"modified":"2020-08-10T23:03:27","modified_gmt":"2020-08-10T23:03:27","slug":"pluto-social-app","status":"publish","type":"post","link":"https:\/\/philsinatra.net\/branches\/uxid\/2020\/08\/10\/pluto-social-app\/","title":{"rendered":"Pluto Social App"},"content":{"rendered":"\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/71rLewfRKjI\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<h2>Goal<\/h2>\n\n\n\n<p>Pluto is an experimental social network that focuses on fostering meaningful connections. This raises two fundamental questions: What is a meaningful connection, and how can we foster them? For this reason, Pluto must identify what features will best accomplish this goal and ultimately create an engaging platform for our users.<\/p>\n\n\n\n<h2>Summary<\/h2>\n\n\n\n<p>Pluto redefines social media by putting an emphasis on meaningful relationships. It\u2019s an app for close friends only, with extra layers of privacy that other social media platforms lack. Nobody can find your profile unless you send them an invite, and your posts are only shown to the people you choose. The same goes for viewing posts. Say you want to separate the happenings of your family members and your college friends- Pluto allows you to organize your connections into multiple feeds.<\/p>\n\n\n\n<h2>Roles &amp; Responsibilities<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td>\nSarah Bray\n<\/td><td>\nProject Manager &#8211; Lead project, managed research and design initiatives\n<\/td><\/tr><tr><td>\nMike Carbone\n<\/td><td>\nBackend Developer &#8211; Built the pluto backend API and pluto site\n<\/td><\/tr><tr><td>\nRob Nashed\n<\/td><td>\nUI Designer &#8211; Created the color scheme and final screen designs\n<\/td><\/tr><tr><td>\nWoo Song\n<\/td><td>\nDesign Technologist &#8211; Prototyped and designed the app via react native\n<\/td><\/tr><tr><td>\nClay Tercek\n<\/td><td>\nFrontend Developer &#8211; Led the react native development\n<\/td><\/tr><tr><td>\nVeronica Lin\n<\/td><td>\nUX Researcher &#8211; Administered usability testing&nbsp;and user interviews\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2>Defining the Problem<\/h2>\n\n\n\n<p>When forming a team, a sentiment shared among all members was that people do not feel as though modern social media networks value their privacy. Current leading social media platforms are all about sharing everything with everyone- therefore, our goal is to create an app that is fundamentally focused on creating a private sharing space.<\/p>\n\n\n\n<p>How can we foster meaningful connections in an online space?<\/p>\n\n\n\n<p>The first three months would be dedicated to better defining a need, and seeing how a new social media application could help with the following:<\/p>\n\n\n\n<ol><li>Foster and maintain meaningful connections<\/li><li>Maintain a sense of privacy when using the network<\/li><\/ol>\n\n\n\n<h2>Research<\/h2>\n\n\n\n<p>We followed a data driven approach based on various collections of user centered feedback and individualized research. We had a claim, and we needed to back it with comparative research and data surrounding how user\u2019s feel when using social media.<\/p>\n\n\n\n<p>The first phase in research consisted of independent research- following processes such as comparative analysis, gathering research on pre-existing studies, and conducting various inquiry interviews and surveys to get a better grasp on the user perspective.<\/p>\n\n\n\n<p>From the comparative analysis data we were able to better identify a gap in \u2018meaningful connections online\u2019 and what current social media sites are providing:<\/p>\n\n\n\n<p>We followed a data driven approach based on various collections of user centered feedback and individualized research. We had a claim, and we needed to back it with comparative research and data surrounding how user\u2019s feel when using social media.<\/p>\n\n\n\n<p>The first phase in research consisted of independent research- following processes such as comparative analysis, gathering research on pre-existing studies, and conducting various inquiry interviews and surveys to get a better grasp on the user perspective.<\/p>\n\n\n\n<p>From the comparative analysis data we were able to better identify a gap in \u2018meaningful connections online\u2019 and what current social media sites are providing:<\/p>\n\n\n\n<ul><li>encourage users to create large networks<\/li><li>high barrier for posting \u201cquality content\u201d<\/li><li>content driven by trends and hashtags<\/li><li>space for business, ads, fake accounts, and bots<\/li><li>intimate connections<\/li><li>one-on-one interactions with your network<\/li><li>space that is both private and secure<\/li><li>lower barrier for creating and sharing new content.<\/li><\/ul>\n\n\n\n<h2>Users &amp; Audience<\/h2>\n\n\n\n<p>Our target market is for all genders 16-80, who live in English-speaking countries, and like to easily share personal content to those that are close to them. For this research, however, we\u2019ll be targeting potential users aged 18-25 on the presumption that young users are crucial to a platform\u2019s success.<\/p>\n\n\n\n<h2>Screener Survey<\/h2>\n\n\n\n<p>The screener survey consisted of 15 questions surrounding the participant\u2019s social media usage habits. We also used this opportunity to validate early assumptions, asking high-level questions about users\u2019 perceptions regarding privacy and their social media connections\u2019 meaningfulness.<\/p>\n\n\n\n<p>Lasting four days, the survey garnered 250 responses with some notable results:<\/p>\n\n\n\n<ul><li>80% use social media to connect with close friends and family<\/li><li>57% of people feel their connections on social media aren\u2019t meaningful<\/li><li>70% feel having a social media account makes you \u2018public\u2019<\/li><li>65% feel current networks don\u2019t value their privacy<\/li><\/ul>\n\n\n\n<h3>I Like, I Want, What If<\/h3>\n\n\n\n<p>Next step in the research was to have a discussion with our users. \u2018I like, I want, What if\u2019 exercise allowed us to open a discussion with our users about what they value and what they wish from social media platforms. Here are our main takeaways:<\/p>\n\n\n\n<ul><li>Content is KING: Most participants\u2019 favorite aspects of social media derives from the content they see and how they see it<\/li><li>Communities Count: Many participants are drawn to platforms by being apart of communities<\/li><li>Smart Moderation: Participants value free speech, but want content to be more heavily moderated<\/li><li>Connections Matter: Participants wish many certain platforms made it easier for them to connect with others<\/li><\/ul>\n\n\n\n<h3>User Interviews<\/h3>\n\n\n\n<p>User interviews also helped us tremendously in understanding our users more. With over 200 minutes recorded and over 33,000 words transcribed, we used the method of inductive coding to find common concepts throughout all of the interviews. These commonalities guided us in defining our features. The most important concept that we found was that most meaningful online connections are formed around repeated engagement through anything that most closely resembles face-to-face interaction.<\/p>\n\n\n\n<h2>Our Solution<\/h2>\n\n\n\n<p>Through our research, we found that the main obstacle getting in the way of meaningful interactions was a lack of privacy on current popular social media platforms. Our solution was to make privacythe foundation of our app\u2019s design, rather than make it an option in the settings like most other social media. Here\u2019s how we went about doing this.<\/p>\n\n\n\n<h2>Visualizing Connections<\/h2>\n\n\n\n<p>One of our first challenges was designing a home screen that allowed the user to easily organize and view their connections. We decided to use \u2018groups\u2019 as a way to filter content. Here are some of the various iterations we went through before landing on our home screen:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"768\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2020\/08\/image3-1024x768.jpg\" alt=\"\" class=\"wp-image-5203\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image3-1024x768.jpg 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image3-300x225.jpg 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image3-768x576.jpg 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image3-1536x1153.jpg 1536w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image3-1440x1081.jpg 1440w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image3.jpg 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"600\" height=\"650\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2020\/08\/image5.gif\" alt=\"\" class=\"wp-image-5215\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"600\" height=\"604\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2020\/08\/image4.gif\" alt=\"\" class=\"wp-image-5204\"\/><\/figure>\n\n\n\n<p>Prototypes exploring different ways to create and organize groups<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"375\" height=\"812\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2020\/08\/image8.png\" alt=\"\" class=\"wp-image-5206\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image8.png 375w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image8-139x300.png 139w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<p>High-fidelity prototype on home with grouping<\/p>\n\n\n\n<h2>A Focus on Privacy<\/h2>\n\n\n\n<p>Since we wanted to create a place where people could post privately, audience control became our design\u2019s central focus. We decided that a way to simply control who can see your posts would be to organize your connections into groups. Every time the user makes a post, they can choose precisely who can see it. They can select one or multiple groups, and even individual friends. This ensures that the user knows exactly who can see their content, ensuring that they can post with a sense of security.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"446\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2020\/08\/image9-1024x446.png\" alt=\"\" class=\"wp-image-5207\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image9-1024x446.png 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image9-300x131.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image9-768x335.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image9-1536x669.png 1536w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image9-1440x627.png 1440w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image9.png 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Early prototype showing ways to control post access<\/p>\n\n\n\n<p>Parts of pluto\u2019s design system<\/p>\n\n\n\n<iframe loading=\"lazy\" style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https:\/\/www.figma.com\/embed?embed_host=share&amp;url=https%3A%2F%2Fwww.figma.com%2Fproto%2FgBqrDLqT8PDMMKUleO2wjc%2Fpluto_prototype%3Fnode-id%3D3635%253A3122%26scaling%3Dscale-down&amp;chrome=DOCUMENTATION\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<p>High-fidelity prototype on post access screen<\/p>\n\n\n\n<h2>Design<\/h2>\n\n\n\n<p>Designing for Pluto was a highly iterative process, factoring in things such as color theory and associative psychology when developing the brand.<\/p>\n\n\n\n<p>When dealing with a social media interface, it\u2019s important to try and maintain a clean, blank slate- instead of trying to create a kind of perception with the interface, allow for the user driven content to speak for itself.<\/p>\n\n\n\n<p>Our design incorporates all these ideas into one, by creating an interface that is both stylish and interplanetary as well as a blank slate to best feature user\u2019s content.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"672\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2020\/08\/image11-1024x672.png\" alt=\"\" class=\"wp-image-5209\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image11-1024x672.png 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image11-300x197.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image11-768x504.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image11.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>First few iterations on colors and typography<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"806\" height=\"758\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2020\/08\/image1-1.png\" alt=\"\" class=\"wp-image-5210\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image1-1.png 806w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image1-1-300x282.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image1-1-768x722.png 768w\" sizes=\"(max-width: 806px) 100vw, 806px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"808\" height=\"682\" src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2020\/08\/image6.png\" alt=\"\" class=\"wp-image-5211\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image6.png 808w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image6-300x253.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2020\/08\/image6-768x648.png 768w\" sizes=\"(max-width: 808px) 100vw, 808px\" \/><\/figure>\n\n\n\n<h2>Microinteractions<\/h2>\n\n\n\n<p>Our home screen features a fun way to play with your connections and navigate from group to group. We wanted to incorporate that same feeling of delight throughout our app. So, we accompanied an animation with the ability to \u2018heart\u2019 a post unlimited times.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2020\/08\/media2-85.mp4\"><\/video><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2020\/08\/media3-90.mp4\"><\/video><\/figure>\n\n\n\n<h3>Backend<\/h3>\n\n\n\n<p>Written in Node.js with a Mongo database, Pluto is working off of 39 separate endpoints, each controlling a different action in a very specific way. We developed a few unique concepts to help us in making sure we can push features quickly while also making sure the code is high-quality. With a privacy focus, the server also ensures each piece of data sent with every request is secure and private.<\/p>\n\n\n\n<p>One example of our privacy-first design is our commenting system. If you\u2019re not friends with someone, we don\u2019t want their name visible at all on the platform. So what happens when a stranger comments on your friends\u2019 post? The backend now must prepare each comment section, ensuring that if a comment was posted by someone you\u2019re not friends with, that poster\u2019s name is changed to a pseudonym. We want that pseudonym to be the same if they comment multiple times, but also want it to change on different posts. So, we introduce dynamic name changing each time comments are loaded and sent from the server, to ensure each user\u2019s privacy.<\/p>\n\n\n\n<h3>Frontend<\/h3>\n\n\n\n<p>Our frontend is built in react native, which allows us to share code between iOS and android instead of writing, updating, and maintaining two totally separate codebases. It also gives us the performance and hardware access of a native app, like the camera and push notifications, but with the convenience of writing in a language we\u2019re all familiar with.<\/p>\n\n\n\n<h3>Conclusion<\/h3>\n\n\n\n<p>Our original intent when embarking on this project was to not only design and develop a professional quality mobile app packed with fun interactions and deploy it publicly, but also to assess whether creating a virtual environment where users have more control over their privacy would make it easier to strengthen and maintain virtual relationships.<\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/3maprcSc_-0\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<p>Pluto has since accumulated over 150 active users during our beta testing, many of which have remarked that they feel more comfortable sharing personal content in pluto than any currently existing platform. We feel this proves the potential for more intimate relationships online, which are only becoming more relevant and desired in our current state of physical isolation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Goal Pluto is an experimental social network that focuses on fostering meaningful connections. This raises two fundamental questions: What is a meaningful connection, and how can we foster them? For this reason, Pluto must identify what features will best accomplish this goal and ultimately create an engaging platform for our &hellip;<\/p>\n","protected":false},"author":2,"featured_media":5216,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,9,2],"tags":[24],"_links":{"self":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/5196"}],"collection":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/comments?post=5196"}],"version-history":[{"count":9,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/5196\/revisions"}],"predecessor-version":[{"id":5239,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/5196\/revisions\/5239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media\/5216"}],"wp:attachment":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media?parent=5196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/categories?post=5196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/tags?post=5196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}