Web3Auth is a pluggable embedded wallet infrastructure that simplifies Web3 wallet integration and user onboarding.
Its login modal is usually integrated as part of SDK for Web2/Web3 developers/businesses who look to build their applications/ platforms. This project was initiated to improve the overall user experience of the modal.
I was the designer who collaborates with designers, product engineers and business developers, conduct QA testings as well as agrees on the product strategy.
We conducted 2 designs sprints in 1 month to carry out workshops, finish design and implementations
Refined the login modal’s aesthetics and interactions, then successfully delivered it alongside the latest SDK upgrade for developers.
Understand Problem
To get clarity on defining the actual project requirements, a scoping call was firstly done with cross-functional teams to define what we intend to achieve at end. What we heard:
“We need to up our game in how the modal looks! Our competitors are...”
“No micro-interactions = uncool!”
“We designed something but looks ugly. Can you improve the overall UI?”
Research
I conducted a market research by doing an UX audit with different product demos. Through the research, I aimed to understand the opportunities and risks of implementing components. They are then prioritised in which I feel it would value-add to the existing onboarding experience for users.
A design decision workshop was conducted with my cross-functional teammates where we come together to use the components that were proposed to form their “most preferred” login modal. Results from the research was also presented for discussion. Each team presented their options and we dot-voted to get the MVPs being decided.
Takeaways from workshop:
Participants like the idea of forming their version of login modal and made comments on the usability of proposed components based on the use-cases. Therefore we decided to also developers more freedom to customise the UI of login modal to meet their needs.
Working with Different Teams
Developing the subsequent designs based on the workshop’s MVP components was a lot smoother since majority of decisions were agreed on. However this is not without repeated iterations by working with product team directly to improve on actual implementations. We also had to use the impact-effect matrix with key stakeholders to re-prioritise components to meet project timeline.
Interaction designs was explored during this phase in collaboration with fellow designer and developer. I also created prototypes to illustrate the interactions to the product team and key stakeholders to convince them on the implementations.
This project serves as a practical reminder that even redesign of a small feature requires deep research to keep product competitive. Awareness of design trends in the market is also essential, and it helps to pay attention to what these are as they could become slowly part of users' conceptual modal when exposed.
