The Social Thread

The Art of Authentic Connection

Tools

Sketch 3.0, Adobe Illustrator, Adobe Photoshop

Task

The goal is to create a tool that helps people connect to others in person. If a function detracts from that goal it will be cut. How can we make this possible?

  • easily accessible and simple processes
  • customizable for different situations
  • understand the leve of connection that is present and possible

Problems that may encounter

  • this is a resource to be shared, not a financial maker
  • people still need to be able to take action without the dependency of the app

Process

User Experience (UX)

Everyone seeks connection. There are so many people searching for it through dating apps and social media. It’s apparent now more than ever how far we’ve strayed from our ability to connect with others in our daily lives. What I seek to create is a tool that bridges that gap that has been lost. A tool that will deconstruct the fear and social taboo to be social.

This tool will begin with a mobile version. The web product will ultimately become a community to share stories from users.

The target user is aimed towards introverts who need help deconstructing the process of interacting with people on a daily basis.

Here are a list of the screens that will need to be created:

  • Load Screen
  • Sign-in Screen (may or may not need accounts)
  • Main Screen (quick opener, custom opener, interactive buttons)
  • Quick Opener
  • Custom Opener
  • Interactive Tool

Thought Process

I began jotting some sketches of load screens and decided to go with the initial “walkthrough” screens.

QuickThread – generic openings, recent news you’re generally interested in, geolocation based facts

CustomThread – select as many filters as possible and custom openers will appear

InteractiveThread – daily challenge, interactive game changes each day. You must play with a stranger. High scores displayed weekly and all-time (name1, name2, location)

DailyThread – user submitted case study about someone they met through The Social Thread and what surprised them. Start with mock case studies or mini lessons.

2 different screen designs. One in rows where they are dragged out to be selected. The other are formed as boxes.

 

Personas

Social Anxiety

Roger has severe social anxiety and can’t bear to face reality. His life is made up of pixels and takeout. He wants to begin to engage with people in real life, but feels like it’s too daunting or too much energy to make happen.

Goals/Needs

  • tie virtual conversations to real conversations
  • find opportunities irl to talk to people

20 Yr Old Virgin

Aaron has low self-esteem and stumbles like a oblong apple rolling down the isle. He is tired of not being able to engage with women and wants to dip his toe into the socialization. He has a group of friends, but no support or mentorship in terms of relating to people.

Goals/Needs

  • build comfort while talking with women and not come off as creepy
  • assistance in what to say

Introvert

Amy prefers the comfort of animals or a good book to the company of people. However, as she grows older, she realizes that it’s important to build community to live a healthy lifestyle. She’s comfortable when she’s out with friends, but would never think of chatting up someone new on her own.

Goals/Needs

  • what makes things awkward
  • understand how social interactions work

Thought Process

The Opening Screen now includes the core value of the program. A loading bar was included to illustrate the buffering time of the program.

(Left) The home screen provides ease of access to any of the 6 options available. Icons were created to train the user to recognize the correlation of the certain branch of the program with their interactions with each other. Ex. If you’re on the Daily Thread and want to “like/star” a thread, then a star will be activable and will then be pushed to your popular thread list. Likewise in the midst of a conversation, you may want to purchase services to a quick 1 on 1 briefing of the situation which can be quickly directed to through the use of the shopping bag icon.

The colors were chosen to be soft, as well as being apparent enough to be legible.

Menu tab on the top-left.

Settings tab on top-right.

Thought Process

 

 

These are 2 new menu concepts.

The left one is a drag/rotational concept. I got the idea from one of the menu themes on my phone where it looked like each screen was on a side of a cylinder and it was a cool visual to scroll through. I just changed the opacity and scaled down the size to convey the 3d effect. I also inscreased the size of the menu/settings icon to make them more accessible.

The right is a typical swipe or click to open concept. I playing around with the text/background contrast.

Thought Process

The Quick Thread is intended to provide customized openers based upon your interests and location.

I’m not a fan of the icon at the moment, but I’ll look into it further soon. Each thread will have labels underneath. The navigation icon representating it’s a location-based thread, and will also include the interests that that thread is associated with. The Quick Thread will be limited to 3-4 threads to ease the decision making process. More decisions = no decision.

In the Interests menu, users will be able to select their top 10 interests. This will allow us to help our customer narrow down his or her strengths. When a person is stuck with too many many options, they will freeze or have a harder time making up their mind.

There is a text count-down that shows the user the number of interests selected and left to select. Upon clicking a liked interest, the option appears to remove that interest. Upon clicking a suggested interest, the option to like will appear. This need to double click to confirm a selection will prevent users making unwanted edits. If the TEXT is double clicked vs the icon, a menu of possible threads appears.

Thought Process

I’ve been swallowing as much information as I can on medium. I read several articles on conversational ui and thought it would be an interesting thought experiment to implement on The Social Thread.

My pendulum of focus has started coming down from the UI side and now is more focused on the UX portion. I’ve been thinking about the features and specs that a conversational ui may need to work with The Social Thread. 

Perhaps TST could be a chatbot that you could talk to to log interests and syntax patterns. Through those conversations, TST can better customize threads for you to open conversations with. 

The design has been pretty generic and very minimalist. Typical profile icons next to each chat. Text is indented left/right depending on the user. Box spacing is 20px between users. Spacing between user messages is 10px. 

Thought Process

Following the conversational ui thought process. I began exploring more UX principles, especially focused on menu styles. I looked through the apps I commonly use on my phone and noticed that most of them had transitioned into a bottom bar main menu, and secondary menu options appeared on the top or top/right of the screen. I used my observations to create this mock-up.

The name of the icon appears when clicked and blends seamlessly with the main screen.

On the liked screen, threads are all in lower font and articles are accompanied. There are options to remove the article/thread from the list. 

Upon pressing the menu button on the top right, different filters are available to narrow down your liked list.

Thought Process

I usually spend 2 hours each morning reading, learning, and practicing UX/UI principles. I came across an article talking about Hurff’s Touch Zones and was incredibly intrigued by the ramifications of the ergonomics of screens. With this in mind, it helped me realize the changes that many apps have gone through to address this issue and made me think of my own personal preference. That’s how I came up with this design.

There will be 1 button on the bottom left side of the screen that remains static. Upon pressing the button, the background goes opaque and the menu bar comes up. This arc makes it easy for your thumb to graze across it and I invision a small vibration would take place with each icon selected. When your thumb has dragged over an icon, a preview of that screen appears. Upon release, the menu bar closes and the opacity is removed.