Socialflavor came out of a genuine interest in the psychology behind people’s personal tastes; how our interests, and the things we like, tend to define us as individuals. We recognized a real need for an engaging, interest-based communication platform that would enable users to focus on their interests and connect with others based on shared interests.
I created the name "Socialflavor" and collaborated with my partner in articulating the concept and vision, defining product strategy and building out the team. I established branding and visual direction, UX for the entire site and managed the frontend development team. I utilized a responsive approach to design that optimized UX across platforms.
Mobile views
Challenge:
How to extend the Socialflavor UX successfully to other mobile platforms.
How to extend the Socialflavor UX successfully to other mobile platforms.
Solution:
Approach the product design process with mobile in mind, establishing a responsive design from the outset.
Approach the product design process with mobile in mind, establishing a responsive design from the outset.
Feed Page
Challenge:
How to create an engaging, interest-based communication platform that enables users to zero in topics they are interested in and connect with others based on those common interests.
Solution:
Take an image-based approach, placing the primary focus on the interest itself and enabling users to visually scan the page and zero in on those comments and contributions that pertain to specific topics of interest. Limit the feed activity to show only those contributions that relate to topics associated with the member's taste profile.
The result is a simple, yet engaging UX built on a responsive design that looks great and works effectively across an ever-increasing array of devices and browsers.
How to create an engaging, interest-based communication platform that enables users to zero in topics they are interested in and connect with others based on those common interests.
Solution:
Take an image-based approach, placing the primary focus on the interest itself and enabling users to visually scan the page and zero in on those comments and contributions that pertain to specific topics of interest. Limit the feed activity to show only those contributions that relate to topics associated with the member's taste profile.
The result is a simple, yet engaging UX built on a responsive design that looks great and works effectively across an ever-increasing array of devices and browsers.
Friends (or similar people) page
Challenge:
How to make it easy for people to discover their friends’ interests and where their interests might overlap. Moreover, how to encourage the discovery of new people outside your network who share your interests and tastes.
How to make it easy for people to discover their friends’ interests and where their interests might overlap. Moreover, how to encourage the discovery of new people outside your network who share your interests and tastes.
Solution:
Display all the people on Socialflavor who share flavors in common with you, ordered by the number of flavors in common. The page toggles between two views, showing only those similar people within your network of friends, or site-wide, showing all similar people to you.
Display all the people on Socialflavor who share flavors in common with you, ordered by the number of flavors in common. The page toggles between two views, showing only those similar people within your network of friends, or site-wide, showing all similar people to you.
The top module showcases the top 10 people who share the most flavors in common with you.
Private messages page
Challenge:
How to integrate a private messsaging feature that was fun and compelling enough for people to actually use.
How to integrate a private messsaging feature that was fun and compelling enough for people to actually use.
Solution:
Carry over the clean, efficient UX of the Feed page, putting emphasis on the image of the person sending the message.
Carry over the clean, efficient UX of the Feed page, putting emphasis on the image of the person sending the message.
Like the Feed page, the most recent messages appear at the top. Replies occur inline, and should you receive a message from someone you don’t know, clicking on their member photo takes you to their profile page where you can learn more about them.
The wireframe for the feed page is intended to provide both business stakeholders and front end developers with a high-level overview of page elements, interactions and functionality.