Work

About

Contact

Back

Hyperlocal Social Platform

Reorienting an Innovative Social Media Product

The world is fragmented — people are more isolated than ever. Can Common Agency reimagine the way we use social media to bring our communities back together? They were on to something, but trouble was brewing on the horizon.

Client

Common Agency, an early-growth nonprofit

Role

Product Design Lead, Research Specialist

Team

4 Product Designers with varying specialties

Scope

4 months; utilized Figma & Mural whiteboarding

The Problem

Common Agency's site was difficult to use, lacking in brand identity, and misaligned with stakeholder goals.

Organization

Common Agency is a non-profit that creates "hyperlocal" community sites, called networks, tailored to the location-specific users' needs.

Their goal is to empower communities to meet each other offline and incentivize community action, reducing isolation and bridging the gap between community members.

Common Agency is a non-profit that creates "hyperlocal" community sites, called networks, tailored to the location-specific users' needs.

Their goal is to empower communities to meet each other offline and incentivize community action, reducing isolation and bridging the gap between community members.

Known Issues

Low impact on key user groups

Uncertainty about necessary product changes

Diluted brand identity and associated value

Weak product strategy for the future roadmap

A non-standard architecture

What is a bulletin board?

Where is my feed?

Unfamiliar engagement patterns

Why would I suggest a question?

How do I just talk with someone?

An unclear onboarding process

Why are you asking me this?

I have no idea how to use this site.

The Solution

We delivered key experience improvements and strategic product recommendations fueled by research.

The Solution

We delivered an improved final prototype and thorough handoff documents addressing implementation & strategy.

Onboarding and Transparency

Persistent system status indicators

Progress, error, and success indicators were almost nonexistent, leading to user confusion about completion of tasks.

Tooltips and explanations

The site had many non-standard features that were confusing or felt invasive to users. They didn't know how it helped.

Guided tutorial and omnipresent help

Users were previously dumped into the nonstandard home page with no onboarding whatsoever. We added a walkthrough and floating help button.

User Content Management

Universal content tagging

Users previously didn't understand if content was relevant to their needs.

Transforming critical bio info into tags

Users didn't understand how to connect with others; by converting onboarding info into tags, we lowered this barrier.

Content visibility customization

Users were uncertain about how their content was presented to others. Clearer safety and privacy settings helped this.

User-Expected Functionality

Robust event management

An almost universally requested feature, users needed a way to actually manage their offline meet-ups.

Groups and messaging

Users wanted ways to organize like-minded neighbors into groups that shared a common interest.

Neighborhood pride and promotion

To get away from the negativity of other social media apps, users wanted ways to express what they are good at and what they love about where they live.

Handoff File Deliverables

Final Project Report

A synthesized, visually perfected artifact that condensed 150+ pages of insights and process into 40 pages of information.

Why?

Communicate deeper level of user understanding
Provide more in-depth recommendations
Further strengthen the validity of our design decisions

Communicate deeper level of user understanding
Provide more in-depth recommendations
Further strengthen the validity of our design decisions

Annotated Wireframes

Each page of the design was annotated with critical interaction logic and explanations of key features.

Why?

Communicate most important elements to developers
Establish clearer boundaries regarding what can be slightly altered and what must stay as designed to help users

Communicate most important elements to developers
Establish clearer boundaries regarding what can be slightly altered and what must stay as designed to help users

Finalized Site Map

A high-level overview of the structure and user flows for anyone utilizing the new Common Agency site.

Why?

Easily convey the page relationships within our brand new architecture
Show which elements need to be persistent
Establish that we have planned for the entirety of the site, and not just our improvements

Easily convey the page relationships within our brand new architecture
Show which elements need to be persistent
Establish that we have planned for the entirety of the site, and not just our improvements

Interactive Prototype + Design Files

Last - but not least - the interactive prototype and design files in Figma.

Please view on larger breakpoint

This project was designed for desktop-sized applications only. To maintain the quality of the viewing experience, please view this project on a larger screen size.

Thank you for your understanding.

Why?

Interactivity encourages play, which leads to greater understanding of the experience we've designed
Direct access to our style guide, component library, and interactions for developers or future product teams

Interactivity encourages play, which leads to greater understanding of the experience we've designed
Direct access to our style guide, component library, and interactions for developers or future product teams

Key Learnings

We bit off more than we could chew in scope - and it cost us end quality

While we were able to complete the project, I truly wish we would have had the time to dive deeper into specific sections and improve the visual design.

We compromised on end quality in order to achieve the scope we had chosen. In the future, I will be sure to think about end quality more than ambitious scope.

While we were able to complete the project, I truly wish we would have had the time to dive deeper into specific sections and improve the visual design.

We compromised on end quality in order to achieve the scope we had chosen. In the future, I will be sure to think about end quality more than ambitious scope.

User-friendly innovation starts with a spin on something people love

User-friendly innovation starts with a spin on something people love and use often

We were repeatedly shown that trying something drastically different - even if it's good on paper and supported by data - is often poorly received by users.

When we made tools that either related to real-life things people already enjoy or looked like apps they already use, they were much more willing to change.

We were repeatedly shown that trying something drastically different - even if it's good on paper and supported by data - is often poorly received by users.

When we made tools that either related to real-life things people already enjoy or looked like apps they already use, they were much more willing to change.

Be inclusive, plan around your teammates' strengths, and communicate often

I took on a large portion of the work myself. As someone that wants to be a leader, I would go back in time and make sure that I am making space for everyone at the table.

No one is an expert at everything. It's the role of a leader to know how to bring out the best in everyone and help them grow.

I took on a large portion of the work myself. As someone that wants to be a leader, I would go back in time and make sure that I am making space for everyone at the table.

No one is an expert at everything. It's the role of a leader to know how to bring out the best in everyone and help them grow.

The Process

We "reoriented" the product to align with user needs, organizational goals, and the spirit of the brand's present and future.

The Process

We "reoriented" the product to align with user needs, organizational goals, and the spirit of the brand's present and future.

Key Process Deliverables

User Insights

Personas, flows, and feedback on our work

Specs

Page-by-page UX specifications and flows

Identity

Color, style, and brand spirit reinvigorated

Reports

Critical insights, visually designed and digestible

Rebrand

Color, style, and brand spirit reinvigorated for the future

Prototype

Tested, improved, and refined through iteration

Our Process

1

Understand

… the product, the brand, the users, and goals

Analyzed prior work & existing site

Conducted surveys, interviews, "beta" testing

Synthesized insights & design requirements

2

Execute

… on ideas, designs, and strategic deliverables

Sketched, workshopped & created lo-fi wireframes

Refined design ideation with peer and client

Designed initial high-fidelity prototype

3

Refine

… the quality, the medium, and the experience

Evaluated using visual & usability user testing

Transformed learnings into improvements

Transformed learnings into improvement

Transformed learnings into improvements

Created testing-improved final prototype

4

Deliver

… polished designs, critical insights, and guidance

Handed off detailed documentation and specs

Handed off detailed documents and specs

Handed off detailed documentation and specs

Delivered detailed prototype with user flows

Presented on our work to the client and peers

Process Part 1

We performed research & analysis to understand more about the product, users, and the context of usage.

Process Part 1

We performed research & analysis to understand more about the product, users, and the context of usage.

Stage 1: Examined Existing Site & Prior Work

In order to develop research and design goals, we needed to understand the state of the current site and any issues prior work had uncovered.

Methods

Site usability evaluation

Each team member (total of 4) performed a comprehensive heuristic & general site analysis to identify common issues and areas for improvement.

Beta testing video analysis

Analyzed 15 hours of recorded interview data that observed users walking through key interactions & asking sentiments from 8 users from various pilot areas.

Key Findings

Several, varying severity usability issues were present

Poor text contrast, unclear system status, lack of autopopulation for text, unfamiliar naming conventions, and uncertain or inconsistent visual hierarchy were a few.

Account creation felt invasive and strange

Users were not comfortable with the questions being asked during sign up. When the purpose was clarified, they became more willing to divulge.

Site tools were hard to understand or not matching needs

Questions, the main way of engagement for the site, did not feel like a 1-to-1 substitute for a post or feed. Additionally, users felt the site lacked key functions they would want to use for organizing groups and meeting others.

Stage 2: Discovered User Needs & Goals

To supplement our understanding of the current site issues, we delved into research with a goal of understanding how people view community and the tools required to foster it.

Methods

Ethnographic interviews

Interviewed 8 individuals of varying cultural origins, locations, and attitudes towards community to gain a rich understanding of the confluence of identity and community.

Survey design & analysis

Distributed a survey asking key questions about goals, motivations, tool usage, and beliefs regarding community and engaging with others, with 100~ responses.

Affinity diagramming

Pooled the entirety of our findings from all stages of research and looked for key themes, similarities, and differences amongst user groups and our methods.

Key Findings

Neighborhoods mean many things to many people

The relationship between a user and a neighborhood is complex. It is critical to let people self-define inclusion and contribute their individualized expertise and presence.

Digital tools compliment in-person ways of meeting others

A platform is no replacement for meeting people in real life. Users felt that it was the faster, easier, and safer way of discovering like minded neighbors, but it lacked depth.

Users want everything about their neighborhood in one spot

Many users expressed frustration with the nature of their current social tools. They'd rather have a smaller, more intimate network that has the tools they need to socialize while avoiding the mental burden of larger social sites.

Process Part 2

We developed new product requirements through deriving use cases and prioritizing by impact and feasibility.

Process Part 2

We developed new product requirements through deriving use cases and prioritizing by impact and feasibility.

Stage 1: Defined Target Users & Prioritized Improvements

We can't make a solution that works for everyone, but we want to make sure that we are helping as many as possible. This requires constraints to maintain efficacy.

Developed primary and secondary personas to guide ideation

These personas were a hybrid model that I developed that deliberately drew the focus away from demographic information and more towards habits, struggles, and goals.

This method helped reduce stereotyping and inherent bias.

These personas were a hybrid model that I developed that deliberately drew the focus away from demographic information and more towards habits, struggles, and goals.

This method helped reduce stereotyping and inherent bias.

Quantified impact & feasibility with a prioritization matrix

We prioritized 34 potential features (derived from use cases) using a mapping activity with our team and client.

This matrix enabled us to us a data-driven approach to prioritizing which features we needed to focus on.

We prioritized 34 potential features (derived from use cases) using a mapping activity with our team and client.

This matrix enabled us to us a data-driven approach to prioritizing which features we needed to focus on.

Stage 2: Created Focused Design Principles

We created product requirement "principles" - synthesized "meta requirements" that were themes of specific features. We then prioritized these using a MoSCoW framework utilizing the average impact of each principle's parts.

Mo

Must Have

Data transparency & usage traceability

Always-available system status and error guidance

Common design patterns adapted for our users

S

Should Have

Clear user flows and results of actions

Robust content tagging and categorization

Co

Could Have

Templates and suggested content for users

Automated content imported from other sites

W

Won't Have

In-depth customization of community-wide content

Directly hosted resources or tools related to them

Process Part 3

Our team ideated on features, defined the new information architecture, and created a "future site" user flow.

Process Part 3

Our team ideated on features, defined the new information architecture, and created a "future site" user flow.

Used a modified "Crazy Eights" activity to generate principle-centered sketches

Why did we do it?

The more ideas, the better the outcome.
Principle-centricity ensures we are directly solving user problems and not simply copying other solutions.

The more ideas, the better the outcome.
Principle-centricity ensures we are directly solving user problems and not simply copying other solutions.

How did we do it?

For two minutes, we wrote notes about how each principle might be an interface.
For ten minutes, we digitally sketched the notes into UI pieces.
We debriefed each set of ideas, voted on which seemed the most doable and user-aligned, and got client feedback.

For two minutes, we wrote notes about how each principle might be an interface.
For ten minutes, we digitally sketched the notes into UI pieces.
We debriefed each set of ideas, voted on which seemed the most doable and user-aligned, and got client feedback.

Feasibility & functionality challenges

Our client was happy with a lot of her work, but she reminded us that she worked with a specific service (Bubble.io) for her site. Anything we proposed for short-term improvements needed to be able to be implemented via this builder.

We performed additional research to understand the general abilities of Bubble.io, which caused us to discard several of our ideas despite their user alignment.

Redefined the information architecture using card sorting

Why did we do it?

The old architecture would not fit our new features and layout.
Users found the old architecture confusing and non-standard.

The old architecture would not fit our new features and layout.
Users found the old architecture confusing and non-standard.

How did we do it?

We broke out every page and subpage from the old IA.
We removed unnecessary and added necessary elements.
We grouped like-elements.
We named each group with a proper first-level IA name.
These became our main navigation items and their children.

We broke out every page and subpage from the old IA.
We removed unnecessary and added necessary elements.
We grouped like-elements.
We named each group with a proper first-level IA name.
These became our main navigation items and their children.

Mapped the improved user flow

Why did we do it?

Through explicitly detail work, we uncovered any places where our ideas wouldn't make sense in terms of the whole system.
Identified areas for redesign versus creating from scratch to plan out our coming work.

Through explicitly detail work, we uncovered any places where our ideas wouldn't make sense in terms of the whole system.
Identified areas for redesign versus creating from scratch to plan out our coming work.

How did we do it?

Created each main page as a blue square.
Walked through each proposed page navigation relationship.
Added in existing subpage interactions as green diamonds.
Further added in red diamonds as proposed additions to subpage elements.

Created each main page as a blue square.
Walked through each proposed page navigation relationship.
Added in existing subpage interactions as green diamonds.
Further added in red diamonds as proposed additions to subpage elements.

Discovering architecture issues and making changes

Our original architecture plan started didn't seem as logical after we began mapping out specific modules in detail.

We improved the flow by adding more top-level navigation items and "flattening" the structure, eliminating a number of problematic sub-pages.

Our original architecture plan started didn't seem as logical after we began mapping out specific modules in detail.

We improved the flow by adding more top-level navigation items and "flattening" the structure, eliminating a number of problematic sub-pages.

Process Part 4

We designed wireframes, iterated, and delivered an initial set of high-fidelity screens and a testable prototype.

Process Part 4

We designed wireframes, iterated, and delivered an initial set of high-fidelity screens and a testable prototype.

Stage 1: Mid-fidelity Wireframes

These blueprints were designed to elicit feedback from our client, peers, and provide the structural bones for all high-fidelity design and identity work. They are purposefully bare and minimum to focus more on structure and meaning.

We created the entire site; below are some examples of this stage of work.

The new Home

Explicit, transparent settings

A person's "stuff" (their page)

Stage 2: Redefining the Brand & Style

Previously, there was not much thought put into the brand style and presentation. Users found the site unremarkable and that it didn't align with their expectations. For our designs to be effective, we decided to redefine some key styles and brand characteristics.

Understood the target look, feel, and impact of the site

Examining client-created moodboards

We pooled together client-made mood boards and derived several "key words" for driving our visual design choices. These condensed many concepts into a feasible set of options.

"Key Words"

Empowered

Witty

Warm

Grounded

Welcoming

Humane

Changing key words into action items

We associated each word with either warm or cool tones, designed to complement one another while having the versatility required to cover a myriad of use cases. These colors would become the basis of a new style guide.

Developed a limited style guide

Developed a baseline for unity and alignment

By selecting a color palette, typography, and radii use cases, we attempted to unify our work with the new product direction and create a more polished product.

In hindsight, massive area for improvement

A massive area for improvement

My traditional graphic design knowledge was limited during this project, and only in the following year did I get formal education.

These include but are not limited to:

Setting a real type scale for better hierarchy.
Creating a more specific range of palette options for each color, and adding in appropriate neutrals.
Adding in a photography guide and properly treating all photography to harmonize with color choices.
Drastically overhauling element spacing consistency.

My traditional graphic design knowledge was limited during this project, and only in the following year did I get formal education.

These include but are not limited to:

Setting a real type scale for better hierarchy.
Creating a more specific range of palette options for each color, and adding in appropriate neutrals.
Adding in a photography guide and properly treating all photography to harmonize with color choices.
Drastically overhauling element spacing consistency.

Delivered an initial high-fidelity prototype

Our team put together an initial, mostly-functional prototype with high fidelity screens. We would go on to use this prototype to elicit feedback from our client and our users.

The new Home

Explicit, transparent settings

A person's "stuff" (their page)

Process Part 5

We ran user testing to understand the efficacy of our designs and further improve the final product.

Process Part 5

We ran user testing to understand the efficacy of our designs and further improve the final product.

Ran task-centric usability testing utilizing a modified NASA-TLX scale

We recruited 8 participants to run through a task-centered protocol with clear but high-level instructions, such as: "I want you to find the tutorial for the home page and open it." We had two groups: a tutorial group, and a non-tutorial group.

We monitored visible and audible frustration, hesitation, task completion times, and had participants debrief with a modified NASA-TLX scale which assessed digital task metrics only.

Key Findings

Our guided tutorial lowered user mental demand, level of effort, and level of frustration by an average of 30%

This indicated that our onboarding process, complete with the guided tutorial, was successful at solving several key user pain points: frustrating usability, uncertainty around novel architecture, and ease of use.

Our CTA's were not always clear due to similarities between other elements that were not interactive

We attempted to create more cohesion in the colors of the UI, but we ended up creating confusion regarding interactive elements. We had monochromatic and analogous harmonious elements with the primary CTA color that were not interactive, which caused confusion and misclicks.

Even in our non-tutorial group, all TLX measurements were below 50%, which is considered a good score

Our current site architecture and other supporting elements managed to make the site relatively easy to use, even if the user were to skip the guided tutorial. This validated that our redesign succeeded in becoming more usable overall.

Conducted focused visual design interviews

We ran another 6 individuals through our designs, page by page, asking questions that assessed initial impressions of our visual design choices.

The goal was to understand user color, imagery, and info associations. Did our work quickly and effectively communicate both the functions and the spirit of Common Agency? Did our visual language communicate the meaning we intended?

We ran another 6 individuals through our designs, page by page, asking questions that assessed initial impressions of our visual design choices.

Key Findings

The overall visual language was perceived as positive, minimal, and playful - but often overloaded with text

This aligned to a satisfactory level with the client's goals on a visual level, but we understood that we needed to break up large blocks of text even more and use more visual elements.

Users intuitively understood that the website was a place for meeting others and "doing" things based on visual design

Participants stated that the visual layout felt like a "dashboard" for performing some type of action, and the warm color choices felt like a call to action.

There were some areas that were unclear in their function due to unconventional iconography or layout

Elements that we thought were intuitive were actually confusing to several users. Without a proper label or direct guidance, they weren't sure how to utilize several tools. Examples of this were a lightbulb icon for "great idea", our client's less toxic alternative to likes, or the layout of the profile page.

Derived 6 key takeaways used to improve our designs

We synthesized our findings after analyzing our results and came up with the following areas of improvement for our design:

1

Rely more on solely visual elements to transmit info and lower the density of information where possible on the interface

Reduced

.. the amount of text, leveraging clearer hierarchy through color, text, and spacing to make it easier to understand status and goal flows.

2

Clearly label iconography, especially for non-standard use cases, and revise helper text to be more clear

Labeled

… iconography and any areas that weren't something users might be familiar with. We also cut down on jargon and confusing explanations.

3

More clearly differentiate actionable versus informational elements by utilizing similar hues across elements

Clarified

… the difference between action elements and informational elements by further implementing cool tones for info and warm tones for action.

4

Prioritize a guided onboarding experience as it reduced user frustration and mental effort by ~25%

Prioritized

… the guided onboarding experience despite it's intrusive and forced nature. Users ended up needing this guidance and regretted skipping it.

5

Maintain the revised site architecture, as it maintained a <50% TLX in all scores for all users ("intuitive to use")

Cemented

… our revised information architecture with a clear site map, as it showed very low task index load across nearly all user groups. This is good!

6

Better utilize a combination of layout, position, and visual cues to guide user actions in order to lower cognitive load

Reorganized

Reordered

… various page layouts to help users find the elements that were most important to them, and clearly use text and color to guide actions.

Review project results

Review the results of my work now that you've understood the process!

Return to top

Contact

rebarber@umich.edu

Socials

Location

Ann Arbor, MI & Greater Detroit Area

Remote & hybrid work available worldwide