UX/UI Portfolio

Résumé

1→2 Psinq DAC “Meeting Rank Order Voting” App (Fractally)

1→2 Psinq DAC “Meeting Rank Order Voting” App (Fractally)

Project Overview

At Fractally, we developed Decentralized Autonomous Communities (DACs) to help communities manage themselves through contribution sharing and recognition. Psinq implements the core concepts from Dan Larimer's book, "More Equal Animals, The Subtle Art of True Democracy".

The predecessor to Psinq, the Eden application, was built on the EOS blockchain. In Eden, randomly selected groups of 5-6 members would vote for one person to advance to a leadership role.

Psinq takes a different approach—instead of advancing just one member, groups rank-order all their members. Through this process, productive members naturally rise to leadership positions over time.

To validate this approach, we tested prototypes weekly with real communities, observing firsthand how the rank-order system affected participation.

This case study examines our transition from single-member voting to the final rank-order design.

The technology team

While the technology team led this project, my role as UX/UI designer was to create an intuitive, transparent experience. Our goal was to ensure members could see their contributions matter, with as little friction as possible. Every team member brought deep technical expertise to the project.

Challenge

This case study explores the complex transition from a traditional voting system to a rank-order and rewards system for determining community leadership. Implementing transparent group rank-ordering presents unique challenges, affecting both the practical mechanics and the community dynamics.

Project Duration

  • 3 months

My Roles & Responsibilities

As the Product Design Lead, I was responsible for:

  • User Research
  • User Flows
  • Wireframes
  • Lo-fi Prototype
  • User Testing
  • Mockup Prototypes
  • Design System
  • Hi-fidelity Designs

Understanding the User

  • User Research
  • Personas
  • Problem Statements
  • Journey Maps

Rank Order Community Test Sessions

Our team conducted weekly experimental meetings with Eden community members to test manual rank ordering of member contributions, replacing the traditional Eden voting system. These sessions took place over several months.

👉
In these test sessions, approximately 45 of our 90 members participated each week. We organized them into groups of 5 for manual rank-ordering. The members showed remarkable trust by contributing their time and offering valuable feedback—a generosity for which we are deeply grateful.
image

Summary of Rank-Order Manual Test Meetings

Members who participated consistently were ranked accurately based on their contributions by randomly assigned peers over 8 to 16 weeks. Higher-contributing members naturally rose in rank while lower-contributing members gradually settled into lower positions.

👉
This left us with confirmation that rank ordering, over voting, was the correct next path.

Creating a Mainstream Application

We searched for a mainstream community to model our new non-blockchain application. After considering towns and school boards, we ultimately chose HOAs (Home Owner Associations).

Target Community: HOAs (for their Collaborative Pain Points)

The HOA Unique Selling Points:

  1. HOAs have poor reputations
  2. They have willing participants who want improvement
  3. Members have significant personal stakes—including home values and neighbor relations
  4. Members often feel trapped and seek solutions

HOAs proved to be an ideal model reference. Success with this type of community could serve as a blueprint for other organizations.

HOAs were particularly suitable as target communities because they are established autonomous organizations where all participants have substantial stakes in the outcomes.

To better understand homeowners' relationships with HOAs, I compiled a set of user Goals, Needs, Motivations, Frustrations, Tasks, and Opportunities.

image

Removing Obstacles: Focus on Meetings

For this case study, we dropped complex onboarding and associated blockchain security to focus on the actual meeting experience of rank ordering.

image
image

User research

To better understand user needs, I conducted interviews with community members who have had problematic experiences with community organizations in the past year. (The results below are anonymized)

User research: pain points

Loss of control
“A group of cronies took control of our local dog park and might sell it to developers.”
Rogue leadership
"Nepotism is ruining our HOA. We need transparency and fairness."
Out of touch with the community
“Our condo association is our of touch and has lots of anti-child oriented rules and regulations that result in unnecessary fines.”
Not time to fight
"I spent a year showing up to get on the board of our condo, but leadership is locked in, so I gave up. It was a time-suck."

Personas

image
PERSONA 1
Adult male wants to have more say over the local dog park.
Age: 37, Eduction: MBA, Home town: Irvine, CA, Family: Married w/ 2 children, Occupation: Business Owner
Problem statement
Jaques, a busy business owner worker, wants to save the dog park in his town. However, a group who runs the dog park seems to be more interested in selling the land to a local developer friend to develop condos. Jaques wants to get on the board to save the park.
Loss of Control
“A group of cronies took control of our local dog park and might sell it to developers.”

Jaques Problem Statement

Jaques, a committed local business owner, cherishes his town's public spaces, especially the local dog park. Recently, he's noticed the park's managing group prioritizing profit over community, considering selling the park for condo development. Troubled by this, Jaques recognizes the park's importance to the community. He's can’t get on the board to help direct the park's future towards community needs over profit, and needs a better governance solution.
image
PERSONA 2
Mother lives in a town where nepotism is rampant in the government.
Age: 33, Eduction: Bachelor, Home town: Austin, TX, Family: Married w/ 4 children, Occupation: Home maker
Problem statement
Susan, a busy mom, is frustrated by nepotism in her town's government. She wants a platform to voice concerns, improve transparency, and ensure fair policy implementation.
Rogue Leaders
"Nepotism is ruining our HOA. We need transparency and fairness."

Susan Problem Statement

Susan, a mother who recently moved into her neighborhood, is troubled by the prevalent nepotism in her HOA. She believes this favoritism impedes fair resource distribution and policy implementation. Susan is seeking more transparency and community input, she wants for a system that ensures official accountability and fosters open dialogue. Susan wants a platform that empowers members like her to actively engage in their HOA process.
image
PERSONA 3
Out of touch with the community
Age: 42, Eduction: Bachelor's in Social Work, Home town: Oakland, CA, Family: Married with 3 kids, Occupation: Elementary School Teacher
Problem statement
Karen, a mother and teacher, is upset with her condo association's neglect of the local park, which is crucial for the community's children. She seeks a prompt solution for its upgrade.
“Our condo association is our of touch and has lots of anti-child oriented rules and regulations that result in unnecessary fines.”

Karen Problem Statement

Karen, a dedicated mother and teacher, is frustrated with her condo association's insensitivity towards the needs of the many children in their community. Rules around kids' toys being left in yards result in silly fines if not picked up. She needs a voice for her children so they can have fun in her community without having to fear being pushed out by heavy fines or liens on her property.
image
PERSONA 4
Not time to fight
Age: 45, Eduction: Bachelor's Degree in Business Administration, Home town: San Diego, CA, Family: Single, Occupation: Disability Rights Advocate.
Problem statement
John, an active community member using a wheelchair, tried joining his condo's board. Despite constant resistance and time waste, he seeks a solution for fair participation and accessibility in community decisions.
"I spent a year showing up to get on the board of our condo, but leadership is locked in, so I gave up. It was a time-suck."

John Problem Statement

John, an active community member using a wheelchair gets along with almost everyone, tried getting on his community board. However, he encountered resistance from those in power. This discouraging and time-consuming made him realize he needed fairer solution where he didn’t have to attend ever meeting in person. John desires equal participation in community decisions and emphasizes accessibility.

The user journey

User journey map

ACTION
Join meeting
Listening
Sharing
Proposing
Voting
Task list
•Schedule. • Showing up. •Listen. •Share. •Repeat.
•Sign up to share. •Wait in line. •Stand at podium. •Deal with distractions. •Answer questions.
•Mind timer. •Speak introduction, core speech. •Request support of board or other members.
•Preset issue to vote on. •Voicing support/opposition to items.
•Propose projects. •Propose budgets for projects. •Follow up on budgeted projects.
Feeling (Adjectives)
•OK. •Wondering. •Scared
•Excited. •Unfamiliar and Familiar. •Bored.
•Combative. •Ignored. •Alone. •Unsupported. •Disliked
•Confused. •Unsure of support. •Alone.
•Ignored. •Hated. •Nuisance. •Angry. •Hopeless.
Improvement Opportunities
•Create welcome committee. •Train up front for what to expect.
•Clarify structure in advance. •Put structure on screen with progress.
•Smaller committees to detailed ideas to engaged members.
•Get feedback early and up front rather than wait until too late.
•Transparent online process of voting and logging rather than roll call.

Takeaway

  • New members come into communities with a large range of emotions including excitement, fear, dread, confusion, and disappointment.
  • Making the process easy would increase participation and improve the community overall.
  • Existing members can set the tone for those who come on board.

The User Journey

All the persona pain points we discovered were problems we were committed to solving through participation in Psinq. By removing the blockchain security, eliminating onboarding hurdles, and focusing on the actual meeting experience itself with the added benefit of rank ordering, We hoped to address the pain points, if users felt comfortable using it.

Simplified user flow WITHOUT a blockchain:

User Task: Open the application.

User Task: Log in.

User Task: Navigate to the meeting schedule.

User Task: Join a meeting.

User Task: Share contributions.

User Task: Rank participants in the meeting.

User Task: Complete the meeting.

User Task: Return to the home screen.

User Task: View ranking from the meeting.

Meeting user flow diagram

The user flow diagram is relatively simple, which is beneficial. The rank ordering feature might be a significant issue for users due to the human components involved.

image

Starting the design

  • Paper wireframes
  • Digital wireframes
  • Low-fidelity mockup & prototype
  • Usability studies

Paper Wireframes

  • Given our team's previous experience with the EdenOnEOS service, paper wireframes were considered unnecessary for this project.

Digital Wireframes

  • Similarly, our prior team experience with Eden moved us beyond digital wireframes.

Early Low-Fi mockups and prototypes

In collaboration with the engineering team, I built the structure for rapid iteration in Low-Fidelity responsive mockups.

image

Lo-Fi meeting & ranking views mockups

We began with a Mobile first approach because it focused our attention on the key feature-Ranking.

  • Icons and ranking details were mocked up and at times blank green squares (on the right).
  • Early designs incorporated Fractally's branding elements, such as the hexagonal profile images (To the left of each user name).
  • Early designs incorporated layouts with ranking numbering levels systems (on the left)

Ranking component

This component was the most challenging to make user friendly. Each member displayed lots of key data in the member card, including:

  • Rank
  • Name
  • Group
  • Consensus
  • Grab-icon
image

1) Mobile frames

image

2) Desktop frames

image

3) Responsive frame sequence we could play with in Figma

image
image

Challenge: Improving Consensus Display

Early tests showed that requiring two-thirds plus one member agreement for rank-order consensus caused significant discord.

image

From Human to Mathematical Consensus

After experiencing meeting conflicts firsthand, James Mart, our blockchain developer, wrote a white paper proposing a solution. His approach replaced human consensus requirements with a mathematical model that captured member preferences while automatically generating consensus results. This eliminated meeting conflicts.

Designing the rank-order sequence

This breakthrough enabled a streamlined approach to rank ordering.

  1. All users start unranked.
  2. Each user ranks all other participants.
  3. Users submit their rankings anonymously during the meeting.
  4. Results are calculated as rolling averages.

Conclusion

Lo-Fi testing revealed issues with two-thirds majority consensus.

  1. Public, real-time voting led to skewed results.
  2. Mandatory consensus created tension.

Final Design

Hi-Fi Rank-Order Mockup

The final process is elegantly simple:

  1. Join the video meeting.
  2. Rank your group members and submit.
  3. Connect with others before concluding.
image
image

Final Mobile and Desktop Meeting Views

Initially, all members began unranked. Users had to drag each member into the ranking area and arrange them according to preference.

A chat tab allowed members to communicate without disrupting speakers or to continue participating if they experienced audio issues or background noise.

image
image

Responsive Mobile and Desktop Views

After testing the designs, I developed responsive layouts for various screen sizes. While mobile views limited users to seeing either rank ordering or chat, desktop and tablet views enabled simultaneous viewing of both features. This sparked discussions about expanding video windows and integrating chat with rank ordering functionality.

image
image

Interaction Design Details

Every user begins in an "unranked" state. To help newcomers understand the rank-ordering process, I implemented interactive highlights. This feature guides users through the ranking action. When users select a member, both the selected item and its potential placement area light up and pulse with matching colors.

image

Detailed Hi-Fi Prototypes

  1. Responsive web application design
  2. Development-friendly simplification
  3. Enhanced text legibility
  4. Accessibility features:
    1. Screen reader compatibility
    2. Future speech-to-text video integration
  5. Icon-based design to facilitate localization

Whole application design

Using the design system I designed responsive community views and more.

image
image
image

Linking the whole app for testing

Having a broader view of the application helped us better understand the flow asynchronously, improve user empathy, and identify anything that could distract from meetings.

image

Whole app prototype Usability Notes - abbreviated summary discovery

A summary of general findings from user testing.

Task
Click Path
Observations
Quotes
Task Completion
Task Directions
Record what path the participant took to complete the task.
Note down behaviors, opinions, and attitudes along with any errors, issues, or areas of confusion.
Note any significant quotes (positive and negative).
Choose if the task was: 1. easy to complete, 2. completed but with difficulty. 3. not completed
Prompt 1: If I said "Lets Psinq up our community organization," what do you think you might use to get this done?
Participant opened the Psinq app and navigated to the Psinq up weekly meeting.
Participant found the feature quickly and without guidance.
"I found it."
2 - User didn’t understand what “Psinq up” meant, but then found the menu and wen there. But was unsure of the action to be taken.
Prompt 2: Lets say you wanted to rank the other members in the meeting. What would you do?
Participant moved participants from the un-ranked area to the ranked area.
Participant hesitated and then moved the members successfully
"So how do I rank?” “I see, there is a ranked area.” “That’s easy.”
1 - A bit hesitant because was unsure how ranking worked, then tried dragging and it worked easily.
Prompt 3: Lets say you ranked the members, how do you complete it?
Participant clicked the Submit button and remained on the page. Changed the order and submitted again.
User was surprised that he/she could submit the rank again. User submitted more than once.
"Why can I submit multiple times?."
1 - user completed with ease and submitted multiple times before the end of the meeting.
Prompt 5: How do you think you'd improve psinq rank order feature?
N/A
Participant wanted to know why they could submit multiple times.
"I did not want anyone voting more than once. Then I realized it meant I could change my vote, which is good."
N/A

Discovery: Add a dialog explaining that a rank has been submitted. Clarify that rankings can be updated any time until the meeting ends, and that each member submits only one final rank per meeting.

Whole app design system

During the design process, I created a comprehensive design system in Figma

The design system comprised eight core elements and thirty-five complex components to ensure consistency and efficiency. User testing confirmed the project's success, demonstrating that users could easily navigate the voting system and participate in meetings. This outcome highlighted how UX design can simplify complex processes and enhance user participation.

Color and Typography

The Psinq color system incorporates branding, alerts, grays, and neutral colors, along with a complementary palette for marketing design and illustrations.

The application, website, and related components use carefully selected font sizes and weights to balance readability and visual impact—from display text to headings, paragraph text, and monospace font for stacked data.

image
image
image

Icons and “Avacons”

My "Avacon" designs served as avatar-icon hybrids adaptable across all platforms and contexts, including social media profiles, gaming characters, or user interfaces.

image
image

Buttons, badges, and dropdown styles

These parts of the design system came in many colors and sizes for different design needs. They could switch between dark and light modes, making them easier to use and see.

image
image
image

Creating Unity On All Devices

♾️
After dozens of meetings with hundreds of community members, we discovered that 1) rank-ordering was what brought communities together, and 2) sharing contributions and meeting together on video united the community.

The final Responsive UI

image

Final Desktop Views

The interface adapts to different screen sizes, offering optimized layouts for wide desktop monitors, tablets, and phones.

image
image

Final Mobile views

image
image

Conclusion

Listening to user concerns about discontent led to a better rank-ordering system.

Involving design, management, and development teams in user testing sessions fostered empathy across all stakeholders, leading to major usability improvements. The final solution aligned with Dan Larimer's book, "More Equal Animals," transforming complex processes into an intuitive experience—demonstrating the power of true cross-functional collaboration.

©2025 Thomas Hallgren