profile avatarprofile avatar

INTERACTION & DETAILS

This project was a pitch to the management offering a more fresh and sleek experience in addition to the traditional approach that the company usually presents itself. This feature is more about the users, less about the company. Therefore, this direction gives more attnetion to the interaction and details to bring more "life" to the experience.

profile-landingprofile-landing

TERMS & COMPONENTS

From start to finish, this project had gone through a pretty complete design process. We began with defining our glossary, so we were all on the same page before we jumped into brainstorming with each other. We also listed out a list of components that needed to be included in the design so we wouldn't leave anything out.

Glossary-sitemapGlossary-sitemap

USER FLOW PARTS

According the product narrative, the intention of this feature was to add an intensive social platform like "Facebook" into our current product. With such ambition, we made sure to spend significant amount of time on the user flow to identify all interaction needed. Below showcases an example of different components that are commonly used to explain the user flow.

User Flow Short2User Flow Short2

WIREFRAME

In the "wireframe" stage, a lot of visual puzzles began to be pieced together. This was when the relationship between mobile and desktop design was considered as each component was assigned to its place. Modular design here plays a big role in this responsive design.

WireframeWireframe

CONCEPT

Another difference between this direction and the more traditional approach is the concept of "digital id/business cards". This concept makes a lot of sense here due to the practice of the industry as well as the social aspect of this feature. Also, the basic information of the user is condensed in a card-sized component that can be placed anywhere, with extra space for different interactions with other users.

Biz card conceptBiz card concept

HEADER TRANSITION

The screenshots below illustrate how the header area animates as the user interacts with this feature.  

TransitionTransition

DROPDOWNS

There are also different types of dropdowns incorporated in this feature, some of them more consistent with the current interaction elsewhere on the site, and some of them more aligned with the current converntion of mainstream social media.

DESKTOP TRANSITION

There are screenshots of the header transition for mobile web above, below is the animatin of the transition and the header image treatement for desktop web, along with more details of the look and feel of the desktop design.