Research
User Research Methods
Questionnaire
My user researcher and I collaborated to determine what questions would most effectively elicit the information we needed from potential users. We determined that we needed to learn about users’ overall familiarity with social media, what they like, what they don’t like, what they find valuable, and what about social media makes them uncomfortable. Once she and I had agreed on a list, she distributed the questionnaire to participants spanning a broad age range and technical background.
Questionnaire
• Which platforms do they use?
• What do they use each platform for?
• What do they find valuable or useful about the platform?
• What do they wish was different about it?
• What do they like least about it?
• How has social media influenced their relationships?
• What do they want out of a social media platform?
• How would they describe their feelings on social media in general?
Diary Study
I wrote a diary study to use in addition to the questionnaire. Since the diary study was complementary to the open-ended questionnaire, it was more valuable to use this tool to learn when and where users use social media - and to allow the questionnaire responses to paint a picture of the how and why. The diary study helped contextualize the findings from the questionnaire into the users’ lives more broadly.
I chose mostly closed response questions to facilitate easier completion of the form and encourage higher response rates.
User Research Findings
User Stories
I wrote user stories reflecting the experiences described through comparative analysis, user responses to the questionnaire, and diary study submissions.
Personas
My team's user researcher crafted personas from the questionnaire findings.
Design
OOUX
Object Map
I lead my team in an object brainstorming exercise. We met remotely and discussed which things need to be represented in the system. The primary entities in a social network are people, of course, so our list of objects (pictured) reflected people and their interactions with each other on social media.
Since users both create and consume content on social media, I decided to represent both the “active user” and the “viewer user”. The “active user” is the one actively using the app, generating content, and interacting with published content. The “viewer user” is the recipient of that action: the audience to a post, the recipient of a comment, or the person getting a connection request from the active user.
To make this social media platform truly consent-focused and give users agency over all of their interactions, it was important to recognize all user types in every part of the app.
Relationship Grid
Users have relationships to each other both in real life and through this platform. I met again with my team remotely to examine the relationships that users would have to each other as content creators and consumers, and the relationships that users would have with the app’s content. This is the relationship map, where the left-most column “has” things in the columns to its right.
Action Flows
Defining Tasks
User research and comparative analysis conducted by team members revealed the most essential tasks for generating unique value for users. The most important task is being able to request and accept connections, or “friends”, since all other interaction relies on this being successful.
Additional tasks include sharing content, responding to content, and updating the parameters of any given connection. A unique feature offered by this app is the ability to “dismiss” posts. Users experienced friction owing to information overload and content saturation in existing media, and I solved for this by giving them the option to “dismiss” content that has become irrelevant.
As the tasks were outlined, the team and I began to examine how the overarching themes of agency and consent related to the tasks the app needed to support. Some of the questions raised are listed here.
• Ask the participant to search for a particular individual by name and add them as a connection
• See what that friend has posted
- Can they see everything this connection has posted? How far back through the connection’s post can they scroll?
• Accept a friend request, but change the relationship settings
• Send a message to this new connection
- Via DM or creating a post?
• Dismiss a post after responding to it
- Does the poster know that the post has been dismissed?
• Dismiss a post after receiving desired responses
Drawing Flows
I used sharpie and a legal pad to begin sketching the action flows for starting a conversation. In these early flows, I started identifying where users would interact with each other. These intersections were the greatest opportunity to encourage meaningful connections, so it was important to identify them accurately.
I digitized the flows. This flow describes each step a user goes through, whether consciously or not, when deciding to share something about themselves digitally.
But the user actively sharing content isn’t the only user involved in this process: they have an audience. I created a complementary flow that details the recipient’s actions and decisions as they respond to the post (or choose not to respond).
If the viewing user decides to respond to the post, the users may begin an ongoing conversation. This depends on the nature of the content; some posts don’t warrant continued conversation. This flow reflects both paths that a response to a post might open towards.
Before a user can interact with other users’ content, though, they first have to get connected! I created these flows to outline the processes of both requesting a digital connection with someone and responding to that request - while respecting both parties’ desires and boundaries.
Wireframing
I used wireframes to determine the flow of actions and the necessary CTAs.
These wireframes are from the “Start a Conversation” flow, and reflect the flow diagrams created as part of the information architecture.
The first CTA invites the user to begin creating a post. Following the convention of TikTok, Instagram, and Snapchat, I placed the CTA in the center of the bottom navigation and highlighted it with size and color.
The next CTA is more subtle. Since the user is generating content to be shared, I removed all potentially distracting elements - like the bottom navigation - from this screen. The user can enter text, attach media, and continue post creation; nothing else. These constraints increase usability by eliminating the possibility of error. However, if the user decides they no longer want to post, they can use the back button in the top left to exit the flow.
Once the user has entered text, the arrow to proceed is illuminated. This change in the UI signals to the user that a new action is possible, and the use of an arrow symbol represents that the possible action is continuing to advance the post creation process. Since this is a mobile app, the same continuation can be achieved by pressing the “enter” or “return” key on the keyboard.
As the user progresses through the flow, the actions that they take change. In this screen, the user is selecting the audience.
The user is choosing which audience will be able to see what they share in this step of the process. A decision had to be made regarding what to include on this screen: audience, audience categories, flow advancement, and post content. I determined which content needed to be present to best support the user in fostering meaningful relationships digitally.
Since self-disclosure is an important part of interpersonal relationships, and contextual awareness helps us determine when it’s safe to share information about ourselves, I chose to include the post preview along with the audience selector. This allows the user to know what they are choosing to share, and with whom, minimizing any back-and-forth. The trade-off is making the UI slightly more complex, but this is mitigated by displaying only a preview of the post instead of its entirety.
I then applied the same CTA illumination pattern to show the user that they can now proceed in the flow.
Here, the user is deciding what kinds of responses they would like to receive from this post. This is included in the flow because it helps recipients of the post know how much involvement the original poster desires, and equips the recipient to know whether or not they’d like to engage with the post.
If a user wants to share a scandalous meme just for laughs, then they can use this feature to restrict response types and prevent comments-section grievances. Similarly, if another user wants to post something controversial for the sake of discussion, they can use this feature to invite their audience into that discussion without inviting distressed reactions from lurking viewers.
The CTA for this step of the flow follows the same illumination upon activation pattern as the CTAs in prior steps. It is activated when a user chooses at least 1 response type that they’d like to receive.
Finally, the user is given a confirmation that they have shared their post. They are reminded what they shared, to whom it was shared, and what kinds of responses they requested from that audience.
The CTA at the bottom becomes app navigation again. The post has been shared, so the user could want to return to any part of the app - and I present the navigation here to give them those options.
Prototyping
I leveraged our visual designer’s color palette and UI styling to build out high-fidelity flows for viewing conversations and responding to content created by your connections.
In these screens, a user is leaving a comment for Natalie.
I chose what information to include on these screens, and assigned the visual hierarchy, according to what the user needs to leave a meaningful comment on the post. This included communicating what the user is looking at, presenting that content, contextualizing who else can see it and how recent it is, and giving the user a CTA for leaving their comment.
I placed the banner at the top, under the navigation, so that the user can see where they are within the app’s infrastructure. In this case, they’re looking at Natalie’s conversation, which is one of many conversations in which they’re a participant. Thus, the “Conversations” navigation item is highlighted, and “Natalie’s Conversation” is labelled in the sub-header.
I’ve also chosen to include the audience along with the content. This allows users to decide whether or not they want to share a comment with the audience presented, which minimizes the risk of sharing a comment with an unintended audience. With this social context made more explicit, the app aims to reduce possible conflict in the comments.
Finally, the user can choose to “Dismiss Conversation”, which archives this conversation and removes it from their feed - like an email. This helps the user focus on their most important relationships and interactions.
Most interactions users have within this app are through conversations. I prototyped a user’s conversation feed. The conversations are organized into New, Active, and Archived.
New Conversations are those that the user has not yet seen. These are given highest priority on the page because the user hasn’t yet decided if they’d like to participate in that conversation; presenting the new conversations at the top of the page encourages the user to make that decision.
Active Conversations have been viewed, but not yet dismissed. A user may choose to leave a conversation in the Active category to follow an ongoing discussion or to save it for a later response. I designed this layout and organization to fulfill the users’ desire to know and control what shows up in their feed: if they want to see something, they can open it and keep it active. If they’re not interested, they can dismiss the post.
Dismissing a post removes it from a user’s feed. This keeps the user’s attention and focus on the most meaningful and important content, which is what connects them to the people in their lives.
Testing
I wrote a usability test script, linked here, to verify that the design is intuitive. I wanted to learn if users felt comfortable and confident in their digital connections on this platform. To do this, I had participants complete tasks centered on establishing social connections digitally and then asked debriefing questions about their feelings of confidence, control, and agency as they completed the tasks.
I adapted the scale format used in the SUS and applied it to this specific project to measure the results.
In usability testing, I found that participants liked being able to choose their audience for any given post. They were similarly excited about knowing who the audience for any given post was, as this relieved the stress of not knowing who might see their post.
Two participants found it confusing to be asked how much of a new friend’s content they would like to see. However, after they completed the task in which they requested a connection and selected what they would like to share with their new friend, they understood the choice better.
I iterated on the question verbiage for how much of a new friend’s content the user would like to request to see, which addressed the user’s confusion. This usability test finding also informs the onboarding flow, and suggests introducing post creation and sending a request before accepting a request.
The designs for requesting connections performed better than the designs for accepting connections, so further iteration is being done on the accept request flows to bring them into greater alignment with the intuitiveness of the initiate request flows. Even so, this usability test revealed that the ideas on agency in digital connection presented in the app are readily learnable with one-time exposure.
Reflection
Reflection
In this project, I learned how to how to plan a UX process start-to-finish, how to adapt that process to evolving constraints, and how to support junior UX designers effectively.
I chose to apply UX methodology to the problem of fostering meaningful relationships under the constraints of physical quarantine. This required me to determine what research questions needed answers and how to get those answers, and then to apply problem-defining structures to the data collected. With the problem defined, it was my job to foster a creative environment in which all team members could comfortably and freely share ideas and WIP as we created sketches. I learned how to give balanced feedback and encourage creativity during this phase of the UX process - which resulted in one team member taking the initiative to build out her own feature! I found it incredibly rewarding to see her confidence grow over the course of the project. I continued advising as we moved into usability testing, and then iterated with my team as we made updates to the project based on user feedback.
Next Steps
The next steps planned for this project are to iterate on the navigation, build out additional flows, and conduct another round of usability testing. But, as with all UX, it will never be “done” because there is always more to improve upon.