.png)
client
This is a project that I worked on for Sequence, an all-in-one development platform for web3 games from July to September 2024.
Problem
The users needed to create two projects and use one for testing builder configurations. This often meant the user needed to upgrade their tier just to be able to test before launching to production.
Solution
I worked together with Engineering, Business Development and Product Management to iterate and create a Draft Mode for testing features and configuring tools before moving them to production.
draft mode
research goals
-
Looking into how competitors are approaching Test/Draft Mode
-
Understanding any web3 learned behaviour related to configuring wallets in Test/Draft Mode
Actionable insights
I gathered insights related to user flows, switching modes and system status notifications that could be applied to initial iterations for the Sequence Draft Mode.
Competitor
research
I looked at Stripe, dynamic.xyz, Amplitude and Privy to identify existing test mode patterns in payment and web3 wallet configuration.
collaboration
I collaborated with the Product Manager and the CTO to define the main user flow for Test Mode.
considerations
We had to take into consideration the team's capacity for estimating the complexity of the MVP. For this first iteration, Sequence projects open directly in Draft mode where they can be tested. After configuring the project, it can move to Production.
user flow
wireframes
Wireframes were put together to show initial concepts and ideas.
feedback
I collected feedback from the product and engineering team to improve the concept for the next iterative stage of the project.
lo-fi iterations
1st round of mockups
The first round of mockups was shown to the product team and to clients for more feedback.
2nd round of mockups
The second round of mockups incorporated feedback related to the wallet configuration page and introducing tabs to separate Integration and Configuration items. This meant easier access to needed functionality and less overwhelming page structure.
mockups
Based on the internal feedback I created a set of mockups for the key pages of the Sequence builder that showed changes in Draft Mode.
process
I used the Eight Shapes Specs Figm plugin to generate a list of specification for engineering.
specs
Each new component was described in terms of anatomy, properties, layout and spacing.
handoff
.png)
behaviour
A high fidelity protototype was created to better illustrate behaviour of certain components for engineering.
feedback
Feedback will be collected and agregated by the Project Manager and prioritiezed for implementation.
hi-fi prototype
collecting feedback
After implementation we will be collecting feedback from users to plan future iterations.
adding functionality
Based on adoption of Draft Mode we will decide on whether more complex functionality is to be codisered. For example the user could re-enter Draft Mode after launching the project to Production.
next steps
