Webtalk Find & Invite
role / services
UI
UX
Product Design
description
This project was carried out while working with the Webtalk team. We wanted to improve the way users can organise their contacts as well as make it easy for them to send invitations to new potential referrals.
year
2022
01.
Overview
Being an invite-only platform, one of the key feature is to invite users contacts. This has not been touched for a long while so we thought it would have been a good time to start rethinking about the overall experience. On the old system, we allowed user to import their Gmail, Yahoo and Outlook contacts and then being able to send bulk invitations. This started to feel a but sloppy and outdated with the introduction of the Webtalk native app and the use (for US users at least) of mobile numbers to login.
We wanted to find a new solutions for the users to send more significant invitation, not just to any of their contacts which might end up in users opening an account and then never using it.
The development team also mentioned about the possibility to connect Facebook and LinkedIn account with the Webtalk one in order to see whether any FB friends / LI connections are on Webtalk already.
02.
Problems
- Storing the imported contacts and integrate them with the contact imported from the native app
- Integrate importing new referrals with FB and LI connections once the apps connect
- Reshape the user flow of importing, selecting and sending new invitations
- Integrate new contatc imports with existing Webtalk follower and connections
03.
My role
Research & Survey
User Experience Design
User Interface Design
Visual Design
03.
Deliverables
Competitive analysis
User surveys and one-on-one interviews
User journeys and task flows
Low-fidelity wireframes
High-fidelity mockups
03.
Project goals
- Meaningful and potentially converting invites
- Create completely new section on the Contacts
- Early invitee segmentations
- Store contacts and being able to see status of invitations
04.
Discovery and interviews
Competitors Analisys
My research first centered around the competition space in order to understand how other apps (well Facebook and LinkedIn) are addressing similar issues.
User survey
I sent across a google survey to various users to understand their challenges and learn about their individual goals for optimizing their workflow. Using the insights I gathered, I began to synthesize common themes. I created journey maps to understand relationships between different user types of the platform. These steps guided the development of low fidelity flows to work out screen-to-screen interactions.
Findigs
These are the things that came up
- Users want to manage their new and old contacts in the same place
- Users like to see common traits with other users so they can follow and connect
- Users want to be able to see the status of their invitation promptly
- Facebook and LikedIn are perceived as integral platforms for Webtalk users in their process of affiliation
- Users are happy to see suggestions about other possible connections
04.
the user flows
Here you can see how I approached the early segmentation in the process of inviting somebody new to the platform. It works in the same way as it does the Universal CRM: contacts can be categorised under Colleagues, Acquaintances, Service provides, Donors, Investors.
05.
Sitemap and Lo-fi wireframes
After gathering all the informations, the best solution to lay out the various features that we wanted to include, I design a new information structure makes it easy to navigate and move through tasks.
05.
the design solutions
new top menu for Contact page
Introduction of the new navigation that will allow users to take them to:
- Manage my Contacts / Network
- Invitations
- Find and Invite Contacts
Enable Facebook and LinkedIn API connections
If users have not connected yet to their Facebook or LinkedIn accounts, we provide two prominent boxes to do so. They will open up the related browser prompt window to provide authorisation.
Suggested contacts
On this page we provide a listing of users that we might want to connect with. On mouse hover, we show the user contact card with more details.
The listing itself tells us also from where this contact is coming from, whether is going to be email or mobile.
Phone imported contacts
Importing the phone contatcs will show the users the contact that are already on Webtalk and those who can be invited.
Because this can be done with the native Webtalk app, in case there are no contact imported from phone, then we provide links to download the App from the Google and App Store.
Email imported contacts
With emails import, we offer automatic import from Gmail and Outlook. Also emails can be added manually.
Invite Link
Being an invite-only platform, we provide our users with a referral link. This page is for the user to copy their link and to see a preview of what the person invited will see once on the coming to Webtalk for the first time.
Invite segmentations
Here you can see the visual solutions for the invitation process. At first we select what type of segment we would like to include our invitee into.
There are more options for PRO users as they can select from Vendors, Investors, Donors and Clients.
Then depending on the type of selection, we go through different form to define the user better. For example in the example, if we select the Colleague segment then we can add the invitee job title, company, time the users worked together.
After completion, we can then add an endorsement statement and the send the invitation.
Segmentation example
Depending on the type of selection, we go through different form to define the user better. For example in the example, if we select the Colleague segment then we can add the invitee job title, company, time the users worked together.
After completion, we can then add an endorsement statement and the send the invitation.
Email with invite
After the invitation is sent, the invitee received an email with the invitation link.
