What is Staker?
A crowdfunding platform to help small and medium-sized Makers of all kinds monetize their crafts while building communities around their creations and engaging with their audiences and supporters.
Context
As the market for online content becomes more saturated, it becomes more difficult for creators to make stable income from and plan around changes to the platforms they use. Specific types of creators, like game modders, may not have a preferred platform for monetizing their works, but have a dedicated and consistent audience of supporters who re-download their mods post-patches and gain significant value from their efforts.
The goal of this project was to create a user experience that is specific to this community, and improves upon some common frustrations of similar platforms like Patreon or BuyMeACoffee.
My Role
UI/UX Designer
Associated Course
CSCI E-34: User Experience Engineering
Technology Used
Figma
Timeframe
Fall 2021
Audience
The two main (not necessarily mutually exclusive) groups of users are Makers and Stakers. Makers create and share things of value to an online community; they seek people interested in consuming their creations, and financial support for their endeavors. Stakers are members of the communities Makers build who consume and benefit from content, and are willing to contribute financially to support specific small businesses, creators, or projects.
Personas
I thought deeply about what would bring different users to Staker. To keep the scope of the project within the boundaries of the course, I focused on Makers, and grouped them according to their main motivation: to grow their audience (e.g. Greg) or monetize an existing one (e.g. Harrie).
Both of them game-modders, since that’s the main sub-group of Makers I wanted to focus on. Each game community has a different take on monetization, and has different platforms for doing so; they reflect that. The accompanying personal essays further demonstrate how the diversity within this community results in different user needs.
“I’m looking for a platform where I can start small and simple and then scale the complexity as my audience and back-catalog of content grows.”
Coder
Married
Fallout 4
24
“I want the best possible UX for my followers; they spend money to unlock my content early, and then can’t find it because of the way the site is organized?"
Animator
Single
The Sims 4
28
Wireframes
With these personas in mind, I generated a series of four user stories and journeys for core interactions. From there, I developed two packages of low-fidelity wire-frames to explore possible approaches for each story. Here is a selection of the wireframes that I developed ahead of my user-testing phase:
User Testing
Once the packages were completed, I drafted a script for a user-test including verbal consent release, an agenda for the day, some introductory questions, and a task script for each package. Then, I met with a potential user via Zoom, and conducted tests on both packages. As a result of the test, I discovered a number of pain points, and brainstormed plans for improving them in the next iteration. Here's a sampling of the sorts of discoveries I made:
Pain Point #1
Poor Main Menu
Discoverability
Potential Solution
Retain the down carat icon to the user image/username button at all times (not just on hover/focus) to make it clear there is a dropdown.
Pain Point #2
Inconsistent Use of
Pencil for Editing
Led to Confusion
Potential Solution
Explicitly use the pencil icon or clear text stating that content is editable at all times to indicate when something is editable.
Note: This also has accessibility benefits.
Pain Point #3
Settings Labels
Unclear
Potential Solution
Conduct a card sort activity to uncover a clearer way to name the settings and group settings into categories.
Final Prototype
Once that was complete, I developed an aesthetic plan for the high fidelity mockups: complete with considerations and insights on color, typography, and imagery. Then I updated the mockups according to the insights from my user-testing and peer feedback and put together a final, interactive prototype.