Fostering Trustworthy Giving
Re-designing Teetayn’s reward-based donor experience to improve accessibility and build trust
UX Design,
Visual Design
Figma
1 week
Teetayn is a online platform that helps charities leverage community-driven crowdfunding through custom built, flexible solutions. With a campaign launch fast-approaching, the interface appeared dated and lacked responsiveness, evoking a significant lack of trust and rendering the site unusable.
Their goal was to modernize visual design to establish legitimacy and emphasize the importance of tickets to increase donations.
As the solo designer for this project, I worked alongside a front-end developer to improve the reward-based donor experience by conducting research, implementing a design system, and improving the overall usability.
Distorted layouts and and disjointed information contributed to poor usability and conveyed a lack of legitimacy and trust that’s integral for crowdfunding services to succeed.
Timeline was limited to a total of seven working days, including development, with limited collaborative opportunities.
Functional components were already developed, so the solution could not involve major changes to components.
Since no design files existed, the current interface needed to first be translated into editable files before making any changes.
Two perceived methods of donating were confusing.
Defining success
What makes a good crowdfunding donor experience?
I analyzed characteristics of well known competitors including Gofundme, Givebutter and Rallyup and determined 3 key insights that acted as guiding principles throughout the design process.
Community
Users rely on social proof to evaluate security and intent from the community.
Flexibility
Raffle experiences are rigid. Systems should accommodate user’s needs to maximize donations.
Urgency
Deadline driven campaigns need to clearly convey how urgency effects user actions.
Create a flexible and trustworthy reward-based donor experience that emphasized donations, community, a sense of urgency.
Laying the groundwork
Improving efficiency and creating structure with a basic design system
The design system not only served as a tool to expedite development while designs were being finalized, but also added underlying structure to both development and visual design, infusing consistency into the disjointed interface.
Establishing brand colors and color scale made a significant and immediate impact, influencing all other design decisions and ensuring accessibility throughout.
Improving visual design for a more user-friendly experience
Serving as a resource for pertinent information, the progress module needed to be informative, scannable, responsive and highly accessible.
The existing layout prioritized the progress module above the fold, but scrolled out of view as users sought additional details. It lacked responsiveness and confused users with redundant and unnecessary styling using an unfamiliar information flow.
By incorporating scroll animations, the module could remain accessible while application of basic design principles helped to improve scannability and usability.
Streamlining and enriching donations to foster social proof
Recent donations below the progress module were intended to encourage engagement, but lost relevance on mobile with redundant information located within the donation tab. The donation tab was visually disjointed and prioritized showcasing more donations over scannability.
I consolidated the two and made donations the default tab to preserve visibility and serve as a single source of truth. Familiar feed patterns are easily scannable and convey passage of time while emphasized donation values and team avatars foster social proof and community.
Transient live donation notifications were considered, but ultimately rejected since high-traffic campaigns would result in distracting and persistent non-dismissible notifications.
Donations Tab
Visually disjointed and lacking hierarchy
Layout makes content hard to compare and parse
Recent Donations
Redundant
Distracting placement
Cultivating trust through informative campaign overviews
The campaign overview contained a campaign story, but lacked any personalization and failed to address users' lingering questions that might prevent them from participating. Center aligned text made long stories cumbersome while a lack of context obscured organizer updates.
Organizer details and FAQs were added to promote trust and transparency while relevant metadata helps distinguish organizer updates.
Fostering community with Teams
The initial Teams tab featured the same card view as Donations, causing confusion with seemingly redundant information when toggling between the two. Cards included team names and collective totals, but were hard to parse with no visual identifiers. A team could only be started within the checkout flow and lack of rankings hindered engagement.
I added team counts and a new team entry point along with expandable functionality to provide an additional layer of information. Team avatars and top contributor labels help users scan and differentiate participants quickly.
Teams
Adding flexibility to the Ticket module
Initially, emphasis was placed on cost rather than tickets while CTAs overpower all other card details. Wrapping cards resulted in orphans that were hard to parse and a redundant, inaccessible CTAs left users confused.
Final designs are WCAG compliant and reference basic design principles to improve legibility. The secondary action is represented by a text button with more contextual copy to help users distinguish actions and maintain a flexible experience.
Choosing the right layout
I explored various layouts to implement tickets and modernize overall aesthetic, collaborating with the client and developer to weigh the pros and cons of each.
Sidebar
Proximity to progress module
Important actions below the fold
Low emphasis on tickets
Wrapping left column
Proximity to campaign prizes
Awkward wrapping on smaller screens
Hero with scroll effects
Modern, delightful experience
Higher development lift
Too much emphasis on platform brand
Putting it all together
Tickets front and center for optimal discoverability
Taking stakeholder feedback into account, the final solution was a centered, fixed layout with a full width ticket component placed at the top of desktop screens.
Fluid grids are applied to mobile and tablet screens to make the most of screen real estate with fixed CTA’s appearing on scroll to retain discoverability. Ticket modules becomes swipable carousels to keep cards visually consistent and avoid awkward wrapping.
Glass effects and gradients modernize the interface with little development effort and maximum visual impact. The background gradient adds delight on scroll while static gradients draw attention to important components.
Accommodating multiple entry points
The custom amount button allows users to enter specific dollar and ticket amounts if pre-defined ticket increments don't fit their needs.
The same functionality can also be accessed through the entry point within the progress module, with the ability to defer to pre-defined increments if desired.
With visual design complete, I addressed component states to convey campaign progression
A notification appears when the campaign goal has been reached while disabled donation button with contextual messaging notifies users of the campaign’s end.
Notifications and metadata inform users of campaign updates to encourage engagement and help users distinguish organizer updates from campaign stories.
Project status
We successfully met our deadline, but the client ultimately chose to implement designs through another platform.
What I learned during this process
80% design system, 20% design in 0→1
Establishing the design system accounted for roughly 80% of the project timeline, but proved to be extremely beneficial working on a lean team with significant time constraints, eliminating back and forth conversations.
Design systems are an integral part of 0→1 product design in enabling rapid iteration, streamlining development, and infusing a cohesive visual language across the platform that could not have otherwise been achieved under these constraints.