DIAMONDDAO · PRODUCT & DESIGN · 2022
Futureswap - Defi leverage trading exchange
When I joined Futureswap they were a team of nine people. I worked most closely with the CEO, CTO, and two full-stack engineers. I was the only product designer, and partnered with the CEO and product related scoping work.
During my six months contracting with the team, I worked on the variety of projects ranging from setting up frontend tracking and metrics, shipping improvements on the core product for the next launch, creating a mobile optimized version of the application, and concept testing several potential new product offerings.
My first project was a set up analytics and tracking for the application. At that time the team only had on chain tracking around the positions users were taking. However, we had no insight into how the users were using the application, what Roblox they were running into, potential areas of improvement, and any friction points. So I worked closely with our CEO to understand business goals and metrics, and with our front end engineers to understand the applications architecture and styling so that I could begin tracking the correct things in Fullstory.
User journey mapping
As part of my own onboarding to the company and understanding of user flows in order to create the correct metrics and funnels, I mapped out a user’s present journey through the application.
Fullstory dashboards
The dashboards I created varied from page specific analytics, to user journey tracking, to conversion rates.
Roadmap user research & competitive analysis
The team was gearing up for a big lunch in May 2022. As part of this big launch we thought it would be an opportune time to address some of the low hanging fruit in the application as the team was re-writing a large part of it anyways. My responsibility was to figure out what that low hanging fruit would be. In order to do so I interviewed several existing users as well as tapped my network for people who would be potential users. During that time I also began compiling our growing Figma of competitive analysis screenshots and notes. From the research synthesis and discussions with the team, I produced a prioritized list of updates to scope in and began work on the designs to support them.
Improvements
Flushing out flows
Testing various layouts
Final shipped mocks
Flushing out states of the trade widget panel
Design system
As part of this work, I created a revolving design component library to begin standardizing the frontend components, colors, fonts, and icons.
Twitter banners for marketing
I also got the opportunity during this project to take a crack at marketing assets and graphics for our Twitter page!
Understanding the numbers
As a result of the metrics work, I came to realize that a wopping 40% of sessions one week (and an average of ~25%) were conducted on mobile! And our mobile experience was... not totally usable at the time. This metric brought to light the importance of at least a mobile-friendly view, if not yet mobile optimized. So I created the mobile optimized designs, and pared it back for a mobile friendly version.
Final designs
The highlight of the mobile optimized version was availability of critical information needed to make a trade decision, with access to the Buy/Sell functionality from any screen, any time, which would pull up a slide out of the trade widget.
Here's a quick clickthrough of the app prototype.
During my time at Futureswap, the CEO and I evaluated several more "far out" ideas surfaced through user research and community engagement. We took a few of these ideas to the wire framing and connecting stage, and one (the trading competition below) we designed, developed, and ran live as an experiment.
Trading competition
The trade competition was an experiment to see if we could spur community engagement and trade volume through friendly competition. The design consisted of ensuring a user understood rules, prizes, timeframe, and could check on their PnL and position in the leaderboard at any time.
The increased trade volume also allowed us to rapidly collect Fullstory analytics on usage, after the big launch with several UX improvements. I looked through dozens of hours of recordings and synthesized the findings into areas of improvement, opportunities, follow-ups, bugs, and backlog.
Basic leverage UI
An idea we only took to the mid-fi wireframe stage before I left, was the idea of a very basic leverage UI. We realized the main platform was quite intimidating for new traders who were interested in trying this new way of investing, but were scared away by the complex platform. The question here was, how do we make an easy to use, few click UI, that accomplishes user goals and ensures they feel confident when doing so?