Zell Lurie Institute

Background

Context

Role: Product Designer
Team: Justin Gainsley and Yash Ramchandani - co-founders of Wander, Rashmi Menon - ZLI mentor
Purpose: Design internship with Zell Lurie Institute (ZLI)
Duration: 4 months (September to December 2020)
Tools: Figma, Zoom, material.io, academic literature

Problem

Social media feeds are addictive. It's difficult to share intellectual content and have productive conversations on social media platforms when trying to compete with the attention economy. Not only that, but the language that surrounds social media perpetuates a harmful relationship with this technology. How might we create more intentional interactions with the news "feed" and encourage thoughtful content consumption?

Solution

A social media feed that prioritizes people you care about and the things they're learning, designed to "slow the scroll". I worked with Wander to design a mobile feed experience that challenged the "doomscrolling" paradigm by encouraging more intentional consumption of content.

‍

Wander

As a designer, I was partnered with Wander while they participated in the Zell Lab for Technologies incubation mentorship program. This partnership was an exercise in agile UX design. As such, we set out to address the process in seven steps: competitive analysis, user personas, user journeys, ideation, convergence, testing, and final design.

Wander is a social networking start-up by two University of Michigan students who set out to challenge the attention economy. They believe that curiosity brings us together, so they created a platform that makes it easy to recommend and discuss intellectual content with your network. Wander is built on interests, not self amplification; collaboration, not contention; and curiosity, not clickbait.

Goals

Wander had three goals to improve their social networking platform while working with me and Zell Lab for Technologies.

1. Make Wander a better place to share and discuss high quality content

2. Help users understand their network through the long form content they are consuming

3. Create mechanisms to encourage better sourcing, sharing, and retention

‍

Competitive analysis

Framework

Re-imagining the social media feed is not a straightforward task. I began my design process by conducting research to understand the social and technical features used in popular online communities.

Using learnings from the book Building Successful Online Communities: Evidence-Based Social Design by Robert E. Kraut and Paul Resnick, I developed a framework for my research. Specifically, I defined design aspects that would be important to consider when creating a new user experience for Wander users. This would provide a foundation for designers on their team to build off of in the future.

I also analyzed various online communities based on this framework of feed mechanisms, which included:

User motivation: intrinsic and extrinsic goals and rewards

Identity and signaling: how users present themselves on the platform (e.g., real identity, pseudonyms, anonymous) and how they convey information about themselves

Affordances: the kinds of uses the platform makes possible, or perceived uses

Norms: user expectations and how they are communicated

Socio-technical aspects: type of community; what makes the platform successful

Using this framework allowed me to compare and contrast different kinds of social networks, and the features that make them successful.

Inspiration

From news platforms to Myspace, I explored a wide range of social networking sites and made note of feed affordances and design. Some key findings that we took into consideration for Wander include:

Deeper conversation: Medium lets users highlight text to comment on a specific part of an article

Friends over feed: Spotify for desktop displays recent friend activity rather than a content feed

Lower barriers to saving: on Instagram, user can save content with the tap of a button followed by an option to save in a specific collection

Match between physical and digital: The New Yorker online mimics a the physical front page of a newspaper

Community contributions: Genius encourages participation through user-generated annotations and leadership status

Queuing up content: Myspace, which is now primarily a music discovery platform, allows users to add music to a queue and pin it to their screen

‍

My main takeaway through analyzing several online communities was that the social networking sites that encouraged more thoughtful consumption allowed its users to interact and contribute to the content. Which led me to solidifying a framework for Wander..

‍

Community of practice (CoP)

What kind of community is Wander? What brings people together on this platform? These are questions I kept asking myself throughout the research process. At the time, the mission of Wander was still being formulated and I felt it necessary to better frame our motives.

A community of practice includes five primary motives: reciprocity, relationships, learning, collaboration, and advancement. Ultimately, this ticked all of the boxes for the type of community Wander was aiming to develop.

The primary needs of a community of practice include: trust, a common mission, indicators of engagement, and relationship building. This provided overarching goals for the design moving forward.

‍

User insights

Before launching into beta, Wander had conducted need-finding interviews with a variety of potential users who's needs aligned with the platform. After sifting through these interviews, these are what I considered to be the key findings:

Learning: Want a way to learn more about a topic collectively.

Signaling and reputation: If [user] finds something interesting that others might not, they are more worried about people finding it stupid than if people found it interesting.

Validation: Uses discussions around intellectual content as validation; sees if it strikes a chord or not.

Community: Wishes there was more community on social media – there's no conversation.

Collective knowledge: Users craved a way to get information from the "brilliant twitter people, as if it were a search engine".

‍

"An ideal conversation around intellectual content would be walking away learning a little more than if I had read it myself."

‍

Use cases

Based on research and prior interviews, we identified two primary use cases for Wander.

Use case 1: Connection

This user is interested in connecting with their followers, and wants to keep up with what they are thinking and learning about.

Initial ideation of features:

Seeing followers’ recent activity: links they’re posting, new playlists created, conversations they’re having

Easily interact with their followers: default to see follower comments/annotations first, notifications about responses

Explore playlists: easy save to unread when browsing playlists

Save to unread: show original poster in unread

Quick view of user profile without clicking in: see number of playlists, knowledge points, top contributor in [ ] topic

Use case 2: Collaboration

Wants to share articles and content with their network to get feedback and learn from collective experiences around the topic.

Initial ideation of features:

Engagement: Having productive conversations on pieces of content

Notifications: see when someone responds so they can continue the conversation

Seeing key takeaways: abbreviated insights, keywords

Ability to easily draw and share insights from content: annotations, comments

Finding interesting content: algorithmic suggestions, easy sort + filter

Design exploration

Wireframing

My first iteration consisted of developing wireframes for the homepage layout and user flow for readings and commenting on articles. In this stage I was looking at how different UI elements could impact the user experience.

The initial wireframes below included the concept of a horizontal scroll, which I considered as a way to prevent "doomscrolling". In initial explorations, the co-founders and I also looked at experiences for creating conversations around content and annotating key takeaways.

‍

Focusing on use cases

Connection: Introduced UI similar to Instagram stories, but the function differs. These "snippets" allows users to see what their followers have read and saved recently. This concept emphasizes keeping up with the people you're most interested in, and providing an easy way to connect by encouraging shared content consumption. This experience looked at introducing annotations, which would be displayed on a user's profile. This prioritizes understanding key takeaways from the people that matter. Inspired by Myspace, we toyed with the idea of a queue for collecting content.

‍

Collaboration: In this concept, the home feed emphasized popular content and categories over network activity. It highlighted groups of content, called "stacks", to allow users to self-select the content they want to engage with, and have productive conversations. Similar to the connection prototype, this experience allows users to easily see and share insights through the use of annotations. "Convos", based on annotated content, can be filtered by people you follow.

Design direction

Based on the two prototypes above, we chose to focus on connection. The home page uses Snippets (similar to Instagram stories UI) to give users easy access to their network's recent activity on an individual level. The horizontal feed was used as a means to "slow the scroll" and present users with a full screen view of the content they were engaging with.

Using Figma, I created an interactive prototype that allowed potential users to experience the key functionality of the app and provide feedback.
‍

User testing

We tested the high-fidelity prototype with seven people from various backgrounds, job functions, and geographies. Those who tested the prototype were identified as potential users, since they matched the target market Wander was pursuing. Key findings and action items from the user tests were as follows:

Lacking clear indication of horizontal scroll -> Increase the preview size of next content card

Swipe up arrow lacked context -> Provide a better, more natural way for the user to view the full article (tapping)

Information overload on home screen -> Work on prioritizing key information, and improve UI design to avoid crowded content

CTAs, like sharing a link, will be forgotten over time -> Draw attention to these with micro-interactions upon opening the home page

Snippets are easy to understand, and delightful -> Keep this execution for final design

Overall, the reaction to horizontal scrolling was neither negative nor positive. As a team, we decided to move forward with the context in hopes that the adjustment period for users would pay off by encouraging interactions that require more thoughtfulness.

‍

Final product

Key features

Snippets: Using familiar UI, this feature sits at the top of the home experience and allows users to quickly catch up with the content their connections are interested in.

Scroll: A new feed that maximizes real estate with one piece of content per scroll. Horizontal swiping creates more intentionality as the user views high-quality content shared by their network.

Content Cards: The most important information, such as the article title and subtitle, website, and content consumption length helps users make informed decisions about what content they engage with, they click. The cards note who shared the content and who took an action (e.g., commented) to give the user context as to why they're seeing the post.

Share a link: Link sharing is the primary call to action, and made simple with an auto-paste function from the users clipboard. Upon opening the home screen, the share a link text field rolls out to keep this action top-of-mind.

Save: Two mechanisms for saving content allow the users to have private and public lists for different purposes. The unread (private) function lets the user save content for later, since long-form content can be time consuming to read. The playlist (public) function helps users save the content that is important to them, or that they want to keep as a future resource, in a an organized fashion. Playlists can help users signal their identity and interests to others.

‍

Goals revisited

1. Make Wander a better place to share and discuss high quality content

The social-first approach promotes connecting and learning with others through intentional interactions. The redesign improved overall navigation, ease-of-use, the process of staying up-to-date with your network, search functionality, and streamlined the saving process.

2. Help users understand their network through the long form content they are consuming

Our Community of Practice framework helped us design for a collective knowledge experience. Snippets empower users to catch up with the people they care most about, and learn about their content they are consuming, right from the homepage.

3. Create mechanisms to encourage better sourcing, sharing, and retention

The homepage encourages users to share a link as the primary call to action. Sharing a piece of content requires minimal interaction, and the recommender system brings the content followers have engaged with to the front of their scroll. Smart search prioritizes content shared by your followers, while also allowing additional filter features.

‍

Future

Based on discussions around minimizing options for the user, we decided testing a different approach to the dual save functions (unread and playlists). Using a single floating action button that further segments to unread to add to playlist options could help to streamline the content saving mechanism while decreasing pressure on the user to make this decision up front. I created a new prototype variation using this approach, which the Wander team planned to explore in future usability tests.

‍

Lessons learned

Developing a design framework based on research not only helps you articulate key design decisions, but also makes the project more sustainable for an internal team.

Even when challenging the design norm, it's important to utilize familiar UI patterns to help the user learn and understand the tool.

When facing time constraints for a project, prioritize features that are essential to the user experience. Other "nice to have" features can be built later!