Alex Panichi

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

Find and Invite intro
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.

userflow find and invite
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.

Site map find invite
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.

next project

alexpanichi.com - All rights reserved © 2022