Cofi MVP – UX redesign
Lora Stokratiuk
Collaboration with an early-stage startup on a Web3 platform suitable for both desktop and mobile devices, enabling Depositing and Earning for its users.
Type
App in production with beta users
Timeline
2022, 4 months
Tools
Figma, Trello, Google sheets
My role
UX Research, UX flow and recommendations, System architecture , User journey, Analyzing and Synthesizing Data, Market research
Team
Me as UX designer/PM, Blockchain developer, Tech lead, Developer, CEO
Success goals
Build better customer journey map
Build better User flows
Build MVP with development team and release it
Defining strategy
Context
Cofi Money is on a mission to transform idle assets into fully composable, yield-bearing tokens, that actively work for you and accrue rewards. COFI Money provides a seamless, transparent, secure, compliant and non-custodial solution.
What we had
We got to work on the Cofi app at the stage of redesign and finishing the first product iteration - production ready payments functionality.
Client had only UI design and MVP.
Challenges
- Limited resources - Our challenges were compounded by the absence of a comprehensive branding guideline, small team, deadline.
- Communication and Collaboration: Working along with the Non-technical Founder, Tech lead, Blockchain consultant and developer, we needed to maintain effective communication and collaboration as it was crucial for us to ensure a shared understanding of product strategy, design principles and customer feedback.
Initial system architecture
A single address for unlimited contract functionality. Using a single address makes deployment, testing and integration with other smart contracts, software and user interfaces considerably easier.
No maximum contract size. Therefore no need to deploy and integrate multiple contracts, which adds unnecessary complexity.
Effective organisation of contract code and data. As the Stoa system is complex and contains a lot of functionality, a Diamond pattern provides a systematic way to isolate different functions, connect them together and share data in a gas-efficient way.
Product investigation - UI
The client had UI design with no detailed UX flow
Building User Journey
Before and After for User Journey
My responsibilities during this part were:
to build a User Journey map and add UX recommendations to the whole flow of their current version.
During that work, I divided the journey into main blocks for the user: Registration, Login, Deposit with Wallet, Deposit with Credit card, Earnings page, Redeem functionality.
Product interviews with users
I helped client to be prepared for interview questions with beta users
The most important part in our Competitors Analysis was synthesising data and aggregate the differentiate point.
What we saw as a Key in Software products was Custom content (Lullabies, Stories) and Custom notifications.
Prioritization for UX changes
Mobile version optimisation
- Personal Info
- Login Flow upgrade
- Swap page (with header and footer)
- Points page
- About page
- Earnings page
Validation
check all fields for validation (Added first/last name validations)
Auth popup
fix the flow of Coinbase authorization popup
Earnings summary
Review UI amends here via this link: summary dropdown (cumulative earning by range)
Add "Bridge" section for Navbar
- adding form for exchanging
- customizing font styles
- adding transaction history block
Header dropdown
fix header dropdown (i.e. added coins prices to the header dropdown)
Earnings page flow
- add earnings fields on the earnings page (getYieldEarned function)
- change tokens logos
- Make circle graph more clear
- Hide Tota
Before and After
Reflecting on the project outcome
What we did:
Based on user flows and user journey, we could understand what will be the next major focus for the product.
Our team implemented UX recommendations and finished the 1st iteration of the product.
As a result we had:
The client was happy with our work, as the product was ready for showing it to potential investors.
