Establishing a UI component system for a 0-to-1 wagering app
Client
Bisqy
Role
UI Designer
What Happened
Improved initial user flows and designs, and built a foundational set of components and screens for Bisqy by collaborating and iterating with a small team of founders and developers
What I Did
Information architecture, user flow improvement, created and maintained a UI backlog, created a Figma component system, mobile UI design, prototyping, audited development builds
Background
Bisqy is a friendly wagering app, allowing users to place wagers on whether their friends can perform a specific task, like doing a backflip or winning a game of Fortnite. Bisqy isn’t about winning money—it’s about having fun with your friends.
Problem
Like all 0-to-1 products, Bisqy started as an idea. The founders used simple visuals and user flows to get their ideas across at the beginning. However, they knew that their visuals wouldn't be enough. Initial screens and flows lacked the polish and expertise required to fuel the development and funding of Bisqy.
😕
Early wireframes
Initial screens built for Bisqy lacked a modern look-and-feel. The team needed a designer to translate rough user flows and UIs into a "clean" set of screens that developers could use as guidance to start building.
Challenges
Startup environments are notoriously demanding and ambiguous. They require every team member to be light on their feet and to employ scrappy processes. This project was no different—we had to get creative throughout the process due to tight budgets and pivoting objectives.
🚿
Simplifying user flows
Bisqy contains several edge cases that needed to be optimized from the beginning. The user flow pictured here illustrates an idealized version of how a dispute between two users of Bisqy should go.
📋
Ongoing auditing
I helped the development team iterate and keep track of errors and updates as development progressed.
Solution
I built a series of holistic Figma prototypes that visualize and standardize key user flows and micro-interactions. User flows included the nominal flow from sign up to successful transaction, as well as several edge cases that were critical for the initial build.
🙋
User control and freedom
Wagers need to have stakes to be effective, but we also understood that life happens. We made it easy for either user to “call off” a Bisqy in case something comes up. For example, if the recipient of a Bisqy gets called into work and can’t accept the wager in time, they can call it off without losing money or being penalized.
Bisqy partners with Plaid and Dwolla to ensure secure bank account integration and ACH transfers. When a user is happy with their winnings, they can cash out or use their funds for more Bisqys.
🧱
Flexible component system
This is a small snippet of the component system I built for Bisqy. Each component on each screen was built and documented in a way that will make it easy in the future for designers and developers to quickly change properties across the entire product.
Bisqy can be downloaded from the Apple Store in its beta phase. The team is currently testing Bisqy with gamers, streamers, and sports lovers. I’m looking forward to seeing where they take it from here.
Learnings
- Lean doesn’t mean careless.
- Figma components and variant interactions are my best friend.
- I don’t know what I would do without backlogs.
