UI/UX          everything else        about





Project Overview
Upgrade profile card (personal and public view),part of dashboard project.
Design Theme

Color Palette



Gotham Font



Buttons




Problem


It’s been difficult for user to connect with others;
Information architecture wasn’t clear, and user didn’t see certain features like Bio & Interests before first time editing profile, because they were hidden if nothing was entered.

Approach

Add Followers/Following. Integrate stats, settings, one's own content alongside with access to key features like Inventory and content publishing in profile card.
• Display hint in profile card
• 3d avatar displayed in profile card instead of 2d
• Profile shows counts for Following and Followers - preliminary indicator of user's engagement
• Access to revamped Friends/Add friends/Invite Friend (personal view only)
• Incorporate Friends & Find Friends access into Follower/Following list


Tested design:


User Testing (by User Research Team)

Objective: Gauge understanding of the profile page and usability of the editing flow from the profile page.

Participants: 5 new to IMVU users were recruited via our standard usability screener via usertesting.com. Limitations included age (18-35), gender ratio (3:2 Female to Male), household income(<100k), and openness to chatting with new people online.

Materials: InVision prototype of the FTUX, Dashboard, and the profile screens.

Tasks: 1. edit their profile image and 2. make their age private.

Findings: Most participants understood the concept of the profile page, and successfully completed both tasks. However, for both tasks, the participants’ initial expectations differed from the design. Most participants struggled with the second task, as they were unable to locate relevant profile information. Additionally, there were minor discoverability issues and expectation-mismatch regarding the contents of “about” tab in the profile page.

Refined design based on user testing: 


Personal Profile Card

Other’s Profile Card


Profile Card - About Section

Personal Profile Card Set to Shown
Set to Not Shown
Age show age and text ‘years old’;
show birthday icon
show birthday icon and text ‘hidden’
Gender show gender icon and text ‘female’ or ‘male’ show question mark icon and text ‘hidden’
Location show flag and country name; if it is US, show state and country show location icon and text ‘hidden’
Current Room if in a chat room show the room image and room name, show room image as 3d avatar background display the placeholder sentence ‘Your current room location shown here, if you choose to make it visible.’
if not in a chat room display the placeholder sentence ”When you're in a chat room, info about the room will be shown here.” text color in pumice
Bio if empty display the placeholder sentence ‘Briefly describe who you are.’ N/A
if not empty display bio
Interests if empty display the placeholder sentence ‘Enter a comma-separated list ….’ N/A
if not empty display interests
Affinity if all are ‘prefer not to say’ display all text in color pumice N/A
if any is not ‘prefer not to say’ display this one in regular color; display those ‘prefer not to say’ in color pumice
Member Since always shown N/A



Other’s Profile Card Set to Shown
Set to Not Shown
Age show age and text ‘years old’;
show birthday icon
show birthday icon and text ‘hidden’
Gender show gender icon and text ‘female’ or ‘male’ show question mark icon and text ‘hidden’
Location show flag and country name; if it is US, show state and country show location icon and text ‘hidden’
Current Room if in a chat room show the room image and room name, show room image as 3d avatar background hide this section
if not in a chat room hide this section
Bio if empty hide this section N/A
if not empty display bio
Interests if empty hide this section N/A
if not empty display interests
Affinity if all are ‘prefer not to say’ hide this section N/A
if any is not ‘prefer not to say’ display this one only
Member Since always shown N/A

Personal View



Public View



Final Look