FoMoMu, Foreign Movies & Music
Background
As technology starts to connect us from east to west, we start to discover that there are so many things that this world offers like music and movies from across the planet. I was able to discover Japanese anime shows and Korean Pop music on my own thanks to technology. However, sometimes it isn't always that easy finding new music to listen to or movies to watch, Netflix won't always give you international suggestions for movies and Spotify can give you new music but what if there is something in a different language that you might like? When discovering new things it might seem a little bit overwhelming at first, maybe its because of the culture difference, or it's in a language you don't understand.
The Problem
Current music and movie applications options are often limited to the user's country of origin, and when exploring new content it may seem intimidating at first due to culture differences and language barriers.
User Journey Map through FoMoMu
The Process
My group and I started off the creation of FoMoMu's with intensive UX research on the possible users of FoMoMu. We started off with a few personas to create a more personal connection with our users. Once that was done we started to design the interface based on these personas.
Here are some of the steps I took to designing the site:
1. Sketched out a rough layout or wireframe
2. Created a medium to high fidelity user interface on SketchApp
3. Prototype with InVision
4. User testing the prototype
5. Analyzing and gathering all the pain points from the user tests
6. Change designs accordingly and produce high fidelity user interface
7. Updating prototype
Another version of FoMoMu in its early stages before user testing
Wireframe of FoMoMu after user testing
The design was created intentionally so users can create an account before accessing our service. If users attempt to go to the other pages the screen will be tinted darker and the sign up or login prompt box will appear. We wanted users to create an account so our recommendation feature can be put to its fullest potential, so we can suggest new content and maintain user retention.
When someone signs up to FoMoMu they will have access to the entire site from music to movies to the map. Some more personal features may be, creating a watch list or a likes list to keep track of our user's interests, this also helps the service learn more about our user overtime.
We designed our website to reflect FoMoMu’s brand and logo, incorporating the cyan blue of the logo throughout the website as the accent colour. We wanted a dark charcoal background, so we selected various shades of grey for the body of the site. We used white text to ensure good text-to-ground contrast.
Colour palette of the site
We wanted the focus of the website to be on recommended movies and music. This is why we listed “Recommended” as the first tab. When users click on “Movies” or “Music” in the header, they are directed to the respective Recommended pages of that header. From there, they can navigate easily through the site such as go to Browse or other tabs, but Recommended is always the first option presented. Other key pages like Accounts and Map are also accessible from the header.
For the web design of FoMoMu we wanted to make a design that is user centered so we realized we had to do a lot of research for example, why our dark tone theme? One of the things we took to consider is that although dark text on white background may look more visually appealing, it is more easy for our minds to process with white text on dark background. The font we have chosen for its readability and we had to make several adjustments to font size to see what looks best in all aspect ratios.
When it came to creating the content display we wanted to standout to our competitors with the as we decided to have the content be flipped through almost like an old juke box or an old iPod shuffling through. This layout was more engaging and our users responded very well to the display.
We included the option for users to “like” songs / movies, which are saved to a list that the user can view anytime. This is a members-only feature, and it encourages users to sign-up for a free account. An interactive map is an additional way to discover content. Users simply click on a country to see movies and music from there. We included the map so users could have a way to browse music and movies at the same time, rather than through the separate tabs.
The Takeaway
I truly believe I became a better designer because of the people I worked with, I learned that just because something may look pretty doesn't mean it works well for everyone. More importantly I learned when designing for a web application that it can be very confusing at times, I got lost and overwhelmed a few times on how many assets that were needed. UX/UI Design can be meticulous and requires a lot of attention to detail. I took the lead role as the UX/UI Designer mainly focusing on the user interface I learned to organize myself to work more quickly and efficiently. Therefore I brought FoMoMu from a simple idea to a product.
This website wasn't created overnight it took several long nights, actually. This project went through a lot of user testing and prototypes to see what works best for everyone. I wouldn't have been able to get to the final stage without my lovely team members Emily Hunt, Daniel Recchia, Gavin Xu, Kaylin Lee, and Yusrah Ifran.
I appreciate you for taking the time to read through and learn about FoMoMu. If you haven't had enough feel free to check out the prototype here!
