Case Study: Profile Tabs

The profile section of the app is home to all of the information about the user and their content. It consists of a photo, description, tags and skills the user possesses, and three sectioned tabs: Showcase, Portfolio, and Social. 

As the visual designer my role was to design the interface of this screen and ensure that each tab fulfills its intended purpose. 

 

Tab Requirements:

Showcase -  This features 9 videos of the user's choosing and is meant to highlight their best work. 

Portfolio - The user's feed. Similar to clicking on a profile on Instagram or the Videos tab in YouTube, it's all of their content in the order it is uploaded from most recent to oldest.

Social - The third tab displays a list of supported social media integrations such as facebook, Instagram, Youtube, etc.

3tab.gif
 

 Layout Experiments

The social tab had a predetermined layout, so I focused on the other two tabs. My challenge was to differentiate the showcase and portfolio tabs while effectively highlighting showcased content. 

 
 

Based on the feedback, I learned that I had to be aware that most of the content that gets posted are videos and, although some of these solutions looked nice, they didn't necessarily fit the content we were accommodating. With this feedback in mind, I continued iterating and chose to use a scrollable feed style for the Showcase tab and used the truncated list style for the portfolio tab. 

 

Final

 
Tabs.png