Nov 2023 - May 2024
Swap Positions: Stay users within Summer.fi ecosystem
Interaction Design
Visual Design
Deployed version
Why create Swap Positions (Refinance)
As Summer.fi supports more lending protocols other than Maker, like Aave, Spark, and Morpho, there are more positions for users to choose from. "Swap positions" allows users to switch to a new position on another protocol with a lower borrow rate or higher Loan to value (LTV) within Summer.fi. It saves costs and time for people to manage their positions and keeps them staying within Summer.fi.
We want to let people switch to a better position without leaving Summer.fi
People can switch to a better position in Summer.fi
People can swap positions in a few clicks without effort
My role
Product Designer
Team
Product Manager, Front-end developers
Target users
Existing Summer.fi users
Design v1
Three-panel layout with linear timeline
People need to see the current position and the future position at the same time to see the differences when swapping positions. The parallel panels allows people to easily compare the current position and the future position. Three-panel layout is a good way to display these three components. From left to right, it follows the linear timeline to present 'Before', 'Now', and 'After'.
The first step of the flow: Select the purpose and help people understand what is Swap positions
Pre-filtered available positions by the choice made in the first step
Preview changes between the current and the future positions
Feedback from the internal users
When presenting the v1 design to the internal users, we received the feedback as follwoing:
The current position panel (before state) and the future position panel (after state) had different visual weights, which might have caused confusion in this UI, and people weren’t able to connect to the timeline metaphor.
Redundant operation. In step 1, the button could be removed, and the same in step 2. The flow could be smoother and quicker.
Design v2
Applying the same visual style to the before and after states
In this iteration, we applied the same visual style to the before and after states, making it easy to compare and be aware that those two components are connected.
The same style connected the current position and the future position panels visually
Removed the button in each step to be straightforward
The button in each step is removed to make the operation more intuitive and to make the UI simple.
Removed the confirm button to simplify the action and the UI
The same style and layout make it easier to compare two states
Responsive design
Considering the small screen on mobile, we simplified the UI and only allowed users to do the basic interaction of Swap Positions.
Using full screen to let users focus on the flow of Swap Positions.
Changed table lists into cards. It's easy to scan on mobile.
