Web3 and AI for maximum data transparency and security.
Overview
As a Product Designer at ULedger Inc., I helped design and upgrade ULedger Verify for Email Sender. This plug-in simplifies sender authenticity verification and email provenance confirmation to prevent fake emails, enhance email authenticity, and ensure robust email security validation. It seamlessly integrates into Outlook for effortless communication authentication.
ROLE
Product Designer
Design System, User Flows, Wireframing, Low-fidelity, Prototyping, High-fidelity
CLIENT
ULedger Inc.
DURATION
4 weeks excluding development
TEAM
Sr. Engineer, Project Manager, Marketing Head
TOOLS
Figma
Featured Requests
“It lacks reactivity”
“I want to see my previous verified emails right away”
“Can I see if my contacts on my teams/association are legit”?
“I have been receiving fake emails with my associate names and mistyped emails, is there a way to fix it?”
Objective
-Add new flows that could enhance engagement and reactivity.
-Develop a feature that retrieves information from our server.
-Implement a new security feature to protect against email phishing.
Solution
-Create a dashboard to display recent emails, contacts, and helpful data.
-Utilize the app’s network to verify existing contacts.
-Notify users when there is an attempt to communicate with potentially fake profiles.
Key Results
43%
Increase in user engagement duration
400%
Increase in the number of emails sent using our app
95%
Satisfaction rating for fake email detection
ULedger Verify for Sender
This is version 1 of the add-on. It is very direct and to the point, and all of the board members love it. However, they are looking for more features. Our clients want something interactive, and we aim to address those needs before implementing our own pipeline.
New Version of ULedger Verify for Sender
Started with a peg and what we have
The nearest comparison we have is this add-on on HubSpot. It is direct and to the point, with well-organized information and ease of use.
Our target market is similar to HubSpot’s: mid- to high-level users knowledgeable in SaaS. However, ULedger Verify for Sender has a more specific function: to send secured emails.
Since this is an add-on only, we can’t display extensive information.
Our short moodboard
Here’s my mood board, which I’ve organized with all the necessary information grouped together. I am a fan of variations, and our head engineer also provided the essential information we need to display, making this process easier. My first goal is to lay out the groups in different formats: cards, carousel, or list.
Exploded version of information/data that we can show
Dashboard information
Dashboard information
Numbers
No. of emails sent
No. of emails received
Contacts
Name of the contact
Email Address
Emails Exchange
Association
Email List connected within the association
Data from ULedger Blockchain
Since our app utilizes blockchain technology to securely store and encrypt all emails and information, we can access and display this data as well. We also use this technology to verify contacts and emails.
“it lacks reactivity”
Products are great when we have a clear goal and everything is straightforward. However, being direct may not always be favorable for everyone. Our team recognizes that we can add more than just features; our goal is to create not just feedback but an information reaction. This means showing previous activities, emails, and relevant email information.
Here are the two versions that I created for the idle state. I have already established and updated the branding colors earlier (not shown here). I also love to showcase color variations and different layouts for grouped information.
We chose the colored layout for the summary, as this might present the most interesting data we can display for now. Currently, we don’t have a hierarchy of colors, so I used our main blue and green for two sets of data.
For the Top 3 emails section, I implemented a carousel layout; however, most of the team prefers the simplicity of a list. Despite this, we opted for the carousel since it is more reactive and encourages user engagement. For the button color, we selected a light shade, as it is not as crucial.
What went wrong or not...
We have removed the helper that explains how our add-on works. Essentially, users still need to reply to or write an email in order to use the add-on. Personally, I believe it would be beneficial to retain this feature.
In version 1, users needed to click on an existing email and reply for the send button to appear when sending a verified email using the add-on. In the new version, users can access their dashboard without needing to open a new email, as long as they are signed in. The profiles are also quite useful, giving users a sense of ownership and personalization compared to version 1. This update maximizes the add-on's screen real estate.
So, here’s the final version.
This is where customer reactivity comes in
We have three scenarios here:
1. No general activity for the past three months (at all).
2. Recent activities recorded.No activity with the person you are contacting or emailing.
3. We can distinguish these scenarios by comparing the icons and the microcopy.
I used a paper airplane icon to highlight the “communication” with the contact.
Since we can’t show emails in the add-on, in order to see the previous content of the email, they need to click it. A tab will be opened (Connected with Blockchain Explorer). Another platform also.
Use the button below to send this email using ULedger Verify.
Verify and Send EmailMicrocopy as instruction
We added a small helper here for clarification. However, I still believe we need to incorporate a helper for the previous state as well.
Email list distinction
We decided to use green for inbound and blue for outbound communications.
We decided with carousel for multiple contacts
The next scenario involves sending emails to multiple contacts. We also used a carousel layout for this feature, and I think it looks really great.
When a contact has recent activities within the past three months, it allows for more relevant and timely communication.
When a contact has no recent activities within the past three months but has old messages, it can still provide valuable context for future communications.
When a contact has no recent activities within the past three months and no old messages, it may indicate a need for re-engagement or a different approach in communication.
Here are the other variations I came up with. The difference lies in the placement of the main call-to-action (CTA) or send button. I really want to test these options, but the button placement feels too far from the main profile of the contacts.
“Can I see if my contacts on my teams/association are legit”?
”I have been receiving fake emails with my associate names and mistyped emails, is there a way to fix it?”
The inspiration here comes from utilizing the ULedger Network, specifically for contacts who are also using our products, in addition to Outlook's anti-spam features.
This approach is quite straightforward; we can add a badge for verified contacts. If someone has the same name but a mistyped email address—which is increasingly common, especially when targeting a large firm—we will display a red notice. Users will need to click the checkbox before clicking the send button.
Options before we finalized it
Here are some other variations I came up with. The difference lies in the placement of the main call-to-action (CTA) or send button. I would really like to test these options as well, but the button placement feels too far from the main profile of the contacts.
“I want to see my previous verified emails right away”
On different situations, users can now see their all of their previous activities and email conversation with specific contacts.