Work
About
Recomo
From 🎬 to 📚, 🎙 & 📺 shows. Discover what your friends & people who inspire you are recommending. Enjoy something lately? recommend and share it with the 🌎
From 🎬 to 📚, 🎙 & 📺 shows. Discover what your friends & people who inspire you are recommending. Enjoy something lately? recommend and share it with the 🌎
The problem is there were a handful of review websites, social media platforms, and recommendation engines, but none of them seemed to provide a personalized, curated, and community-driven experience.
The problem is there were a handful of review websites, social media platforms, and recommendation engines, but none of them seemed to provide a personalized, curated, and community-driven experience.
The solution is to address this problem by creating a platform where users could share & discover exciting new content and engage in meaningful discussions with like-minded individuals.
The solution is to address this problem by creating a platform where users could share & discover exciting new content and engage in meaningful discussions with like-minded individuals.
I have conducted extensive research 🕵🏾♀️ on the current state of the media recommendation landscape & analyzed popular social media platforms, review websites, and recommendation engines to understand their strengths and weaknesses.
I have conducted extensive research 🕵🏾♀️ on the current state of the media recommendation landscape & analyzed popular social media platforms, review websites, and recommendation engines to understand their strengths and weaknesses.
6
6
User interviews
User interviews
I also interviewed potential users to gather insights into their current media consumption habits and the problems they faced when looking for recommendations.
I was able to identified the need for a personalized, curated, and community-driven platform that allowed users to discover and share their favorite media titles.
I also interviewed potential users to gather insights into their current media consumption habits and the problems they faced when looking for recommendations.
I was able to identified the need for a personalized, curated, and community-driven platform that allowed users to discover and share their favorite media titles.
I started working on low-fidelity wireframes to visualize the key features of our platform. I focused on creating a simple and intuitive design that allowed users to quickly and easily discover and share their favorite media titles.
I was also cautious about keeping the core user journey similar for both web & iOS app
I started working on low-fidelity wireframes to visualize the key features of our platform. I focused on creating a simple and intuitive design that allowed users to quickly and easily discover and share their favorite media titles.
I was also cautious about keeping the core user journey similar for both web & iOS app
Designing the core user flow & interactions for the web app experience in Figma
Feed
Detail page
Collections
Profile
Designing the core user flow & interactions for the web app experience in Figma
Feed
Detail page
Collections
Profile
Let's break down the design process
Let's break down the design process
After playing around with the visual exploration by creating a few key screens, I was happy with the typography, color palette & supporting components. I then started to put together a simple style guide to speed up the design process & ensuring it's scalable in the near future
After playing around with the visual exploration by creating a few key screens, I was happy with the typography, color palette & supporting components. I then started to put together a simple style guide to speed up the design process & ensuring it's scalable in the near future
Aa
Aa
Good ol’ Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz ()&?!@
1234567890.,:;/
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz ()&?!@
1234567890.,:;/
What better font than Inter to kick start an ambitious & sleek looking project? so yes, I chose Inter as the primary font and started building the text styles from there
What better font than Inter to kick start an ambitious & sleek looking project? so yes, I chose Inter as the primary font and started building the text styles from there
Heading 1 - 20
Heading 2 - 16
Heading 3 - 14
Body - 15
Body small - 14
Tags - 12
During the design exploration, I identified that there wasn't a need for using too many type sizes, at least for the MVP
During the design exploration, I identified that there wasn't a need for using too many type sizes, at least for the MVP
Color palette
Show full palette
Electric Violet
#7A35EB
Black
#000000
Jet
#1b1b1b
Battleship Gray
#898989
Color palette
Show full palette
Electric Violet
#7A35EB
Black
#000000
Jet
#1b1b1b
Battleship Gray
#898989
I have maintained black and white as the base colors for fonts and buttons, but incorporated a touch of purple to emphasize specific elements such as tabs and distinct states of the icon actions
I have maintained black and white as the base colors for fonts and buttons, but incorporated a touch of purple to emphasize specific elements such as tabs and distinct states of the icon actions
I went with this beautiful looking icons from Iconic.app and it's a good decision I would say
I went with this beautiful looking icons from Iconic.app and it's a good decision I would say
Some base components I put together that I intend to re-use quickly for rapid prototyping.
Some base components I put together that I intend to re-use quickly for rapid prototyping.
We have different four main categories of entries & I wanted them to look similar for consistency while also making sure the cover images we fetch from the API fits well
We have different four main categories of entries & I wanted them to look similar for consistency while also making sure the cover images we fetch from the API fits well
I focused on keeping only the absolutely necessary elements & data that would concern the user and kept the content of the Feed card to a minimal
I focused on keeping only the absolutely necessary elements & data that would concern the user and kept the content of the Feed card to a minimal
From switching to different types of categories to searching existing titles & adding custom titles, I've focused on keeping the interactions as seamless as possible
From switching to different types of categories to searching existing titles & adding custom titles, I've focused on keeping the interactions as seamless as possible
Different views of the profile card based on roles.
Different views of the profile card based on roles.
After the MVP was completed, I reached out to the gracious individuals who took part in the initial research. I conducted a moderated test with them, providing a set of tasks to be completed using the interactive prototype, in order to gather feedback on the MVP. Overall, the responses were positive.
I observed that some users took longer to perform certain tasks compared to others, indicating areas for improvement. These areas were addressed in the subsequent iteration of the product.
After the MVP was completed, I reached out to the gracious individuals who took part in the initial research. I conducted a moderated test with them, providing a set of tasks to be completed using the interactive prototype, in order to gather feedback on the MVP. Overall, the responses were positive.
I observed that some users took longer to perform certain tasks compared to others, indicating areas for improvement. These areas were addressed in the subsequent iteration of the product.
That's all for now. I sure do hope you enjoyed this case study. As it stands, this project is still a work in progress. I'll be sure to keep this case study updated as we mosey on down the line.
That's all for now. I sure do hope you enjoyed this case study. As it stands, this project is still a work in progress. I'll be sure to keep this case study updated as we mosey on down the line.
Role & Contributions
Role Product Designer, Core Idea
Development Thiyagarajan
Platform Web
User research, Wireframes, Interactive prototype Goutham Rajan
User research, Wireframes, Interactive prototype Goutham Rajan
Tools used Figma, FigJam, ProCreate
Status MVP in development
Special thanks
Erik Vidal, Den Williams, Susan Kare, Dylan Andrew, Pablo Arango, Taylor Solana
Erik Vidal, Den Williams, Susan Kare, Dylan Andrew, Pablo Arango, Taylor Solana
For lending their time for user interviews