Professional Networking E-Commerce Platform
UX & UI Design - 2013
Webtalk's mission was simple, to separate personal from professional networking. The problem revolved around not enough separation between a users personal activities and their work life. By creating a platform where user's could have both of their online personas in one place, while granting them the control of their personal data, it empowered users to take back control of their online presence. Webtalk is a unique product trying to solve the common problem of personal data being accessed by unintended people outside of their decided and intentional networks.
Webtalk would need to be able to solve the challenge of having two separate networks combined into one, this was a new concept, but what was clear is that the fear of having personal information leaked into one's professional life, or even in to the public domain would be difficult for some users to bare. The design would have to facilitate a way of switching between contexts of personal network and professional in a way that was intuitive, while keeping all relevant files, images, or videos in their respective buckets. We started our conversation around the types of personal relationships, and the types of assets needed for one's professional needs.
What if users kept all of their personal information private from their work life?
Webtalks' main challenge was to challenge the status quo of social networking. In today's world employers are using potential employees personal information in a way to gauge or assess, and perhaps mitigate potential future problems. So the issue becomes not knowing our digital presence might cost potential employment opportunity. Being ever interested in these important matters to protect the privacy of users personal information, I set out to work with the Founder to layout both the UX, and UI design, and in the process became a founder myself :) The goal was simple, keep both networks separated (meaning a profile would exist for both scenarios personal and professional that would function completely independent of themselves), but not in a way that would make the user feel like they were experience two different platforms, or a major shift in their mental model, or even sense a radical change in context. With that challenge Webtalk was born.
A complete separation of personal and professional worlds within the same platform
Limited Responsive Design
While Webtalk would eventually go mobile, the initial MVP was based on a tablet size and up. A mobile strategy in most cases considers specific use cases, and will sometimes surface the realization that you don't need every feature from your desktop version inside of your mobile version. Mobile work was eventually taken care of (as any platform would require a proper version of their brand on-the-go), but at the time considering our budget, and time to market, we couldn't support all efforts so we settled on a middle ground, and opted for tablet support.
Initially only tablet viewport-size was supported
We started by asking ourselves, and ultimately a wider audience, what is vitally important to a users social experience, and what features would be critical to allow a user to network in both a personal and professional capacity? Once we arrived at the realization that both networks needed the same tools but just needed them completely separate we set out to design the first version.
NCQA had a few rough ideas of what some of their most important core functionality, vital to their business revenue, would look like in a UI; which we used to start the conversation.
Two completely separate social profiles - Personal & Professional
The primary focus of the early discussions about Webtalk were centered around the users need to feel that their personal lives weren't being invaded unbeknownst to them. This is tricky since the consensus seems to be that people understand that what's on the web stays on the web forever, yet in many cases still divulge their personal and sometimes deeply private information only to have it re-surface at an inopportune time in their future. We thought that should be different so the tech behind the UI had to ensure that these two networks could never cross paths, and that the users personal information by default was private to the world. So we started to play with some layouts that would target making the user's workflow simple and effortless.
We started with some home page components that would make up the majority of most feed pages, and began mapping out which ones were needed. We came up with a few states to begin with.
Webtalk sidebar components early version
By creating a mental model that was nearly identical under both contexts of personal and professional we were able to design a layout that was consistent, easy to navigate, and unobtrusive which made the tool feel very familiar to what was out on the web at the time but also something that felt new, and promising.
A closer look at the separation of the personal and professional profiles
The design for the profile consisted of a top profile banner, that provided the major functions of connection between users of the platform, but also had the contextually relevant assets of the profile the user was currently on (Personal or Professional) in a tab menu directly beneath the user profiles avatar. As the user would tab between Personal & Professional profiles they would still have the same mental model of where to retrieve assets like photos, videos, and documents. The same split column layout would also be used, however the only subtle difference was the that Personal profile was blue tinged, while the Professional profile was grey. One of the reasons for the large avatar was also so that users would be clear of which profile they were on, lest they inadvertently add something personal to their professional lives and vice versa.
Webtalk - Personal Profile Tab
Webtalk - Professional Profile Tab
Webtalk went on to get Series A funding and make its mark on the web. The unique angle of supporting both a personal and professional network in one is just starting to make strides in today's world, where privacy is king, and the realization that our content lives on the web forever, will only lead to more solutions similar in nature. Privacy will always be something to defend, and Webtalk rose to that challenge.
"Mars is that rare individual who is exceedingly talented, thoroughly understands design and development processes, and deeply cares about the success of his projects, peers, and client. Mars is simply the guy everyone wants on their project and few people actually find"
Robert McAfee / Webtalk / CTO, Co-Founder