Magic
Improving the developer onboarding experience through rebranding Magic's product offerings.
CHALLENGE
Magic’s pivot from web2 auth to web3 wallet infrastructure posed a significant challenge - how would Magic repackage its current product offerings to this new audience of customers and become the known solution for wallet auth? Web3 developers excited to try out Magic as a wallet solution quickly became frustrated with the confusing product features and pricing plans. This caused high volumes of customer support calls, payment cancellations, and band-aid solutions to fix each user’s issues.
As a result, Magic led parallel efforts to rebrand the website, repackage the products, and add new pricing solutions. As the designer for the developer experience, I saw opportunities to guide users through the onboarding to pick the right product for their use case.
CONTEXT
Developers wanting to build web3 apps required a wallet authentication solution. The current signup flow dropped users directly into a dashboard, with little guidance of what to do next. The onboarding experience had to be informative yet simple so developers could accomplish their actual goal of building a web3 app.
The ideal journey included a guided walkthrough to help users understand the differences between two product types and guide them towards the right solution. After landing on the dashboard, users would see instructional modules to build their first app. For the first launch, the team decided to focus just on the pre-dashboard screens.
LANGUAGE & VISUALS
The most challenging part of this project was introducing Magic’s current products with new terminology on the app creation page. We prioritized iterative launches over one big rebrand launch, which allowed the engineering teams to refactor the product independent of the user experience.
I ran several brainstorming sessions with stakeholders and users to narrow down the value props we wished to convey on this page. I created illustrations and concepts to describe the two different app types a user could build: 1) one that is interoperable with other brands using Magic or 2) one that is closed and fully customizable.
DESIGN
The final designs below follow a two-page walkthrough to creating an app before landing on the dashboard page. This helps users gain a quick context of the app types and build with the recommended option.
IMPACT
I delivered these final designs to the engineering team and left the company shortly after, while another designer fleshed out final tweaks and helped launch the experience. This project was the first step towards rebranding Magic to be a web3 wallet solution and simplifying the experience for developers to quickly learn and build web3 dapps.