Web3Auth's key front feature, Login modal, a customisable pop-up interface for decentralised apps, is usually integrated as part of SDKs for Web2/Web3 developers/ businesses, who look to build their applications/ platforms. This project was initiated to improve the overall customers' experience during integration process.
I was the sole designer who led the end-to-end process, discussed on product strategy, created wireframes and prototypes, conducted QA testings, as well as collaborated with product engineers and business developers.
We conducted 2 designs sprints in 1 month to carry out workshops, finish design and implementations.
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?”
"Our developers want to try out Passkeys."
The team needs to refresh the Login Modal to enhance on UI and functionalities for existing target customers so that they will feel an overall improved SDK integration experience.
Research and Workshop
I conducted a market research by doing an UX audit with different product demos across competitors and non-competitors. Through the research, I understand the opportunities and needs of implementing different components. These are then prioritised in order of which would value-add to the existing onboarding experience.
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 versions of “most preferred” modal. Findings from the market research were first presented for discussion. Each team then worked and shared on their modals. Finally 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. Thus we also decided to grant 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 wireframes and prototypes to illustrate the interactions to the product team and key stakeholders to convince them on the implementations.
✨ Sparking Joy in Users with Small Improvements
This project really refreshes my mind on the initial intent to embark on UX design - to improve the small areas within an experience thereby sparking joy in users. Often we move fast in startups that small features would be overlook over to launching big innovative products. Overtime a positive experience becomes negative. It is therefore hearten to work on small improvements like this to keep up the overall user experience, creating even more values.
⏰ Awareness of Design Trends Saves Times Later On
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. With the need to save more time in evaluative research later on to keep the product competitive.
