Flamingo is a content curator that consolidates all your media subscriptions into one viewing platform. Solving the biggest problem in content services today - The need to move between different apps . This project is the Capstone project for the UX career track boot camp @Springboard 11/2021. I created all research plans conducted all interviews, synthesized all findings, constructed all the tested, executed the early until late designs and prepared all presentational material.
Research Plan
I began with secondary research and found that the market is oversaturated. There are few very lacking solutions to this problem (Select TV, Reel good). I used KWHL tables to plan my research, I ended up choosing three primary methods:
Survey using 30 participants
Interview with 6 participants
A conversation with an industry expert
The Discovery
I found that the majority of people have between 3-4 media subscriptions. 89% of the people surveyed said that they get viewing recommendations from their friends. 60% of them said that they have to switch between different providers at least once per viewing.
Affinity Map
I realized that segregation & oversaturation were indeed big Issues, But I also kept hearing about how people viewing habits were deeply tied up with their friends or members of their household.
​
Personas
Insights
Segregation is the root cause of many problems, people want all their media in one place
People have no idea how much they are paying.
​There is too much to choose from, and it's confusing.
They need more focus.
People are sociable creatures; they want to do things together, Watching media is no different.
Some people don't have a lot of time to watch media, and they want to optimize it.
People don't think the recommendation systems are good, and they don't trust them.
The Vision
One Media App to Rule them All
Early Ideation Sketches
A cross services platform that curates all your media in one place. Alongside features to help you find what you love fast and manage your media spending's. A platform for media lovers everywhere that would enable them to exchange thoughts and recommendations.
I used problem statements and user stories. To better understand what I was building.
User Stories
Examples of User stories
Site Map
Partial Site Map
​User Flows of 4 major red routes ​
Add to Watch list
Watch content through recommendation page
I chose to break down these 4 routes thinking of level of traffic but also what is curtail to the solution. For example, the sign up flow is an important part of the solution- it's the point of which users would potentially add all their accounts to the platform.
Detailed Design
Watch content through Friends Profile Page
Sign up Flow
Now that I had my 4 routes broken into pages and flows, I could start diving into laying out the pages, placing the elements on the page in rough hand sketches.
Guerilla testing using hand sketches.
I tested my rough designs on 5 participants, switching between the cue cards as we progressed with the flows. I was able to learn what the weak spots of the flow were. Which screens needed a complete redesign. This step helped me to iterate on the design fast, and to get real time feedback as I went along.
Before
After
Wireframes
I used Figma to build my wireframes using a 10 column grid.
Bringing it all to life - Mood board
Keeping it all in line - Style Guide
​ I was really taken by the neon sign because it represented something fun unassuming retro... it represented pop culture. This was my vision for the App, bringing back the cool factor of pop culture, for die hard media fans everywhere. I stated collecting images that I felt captured that same spirit. old arcades, and movie theaters, diners and gas stations, vintage items and neon signs. Until finally I had my mood board.
Because I knew the app is going to be image heavy (feature thumbnails) and because of my decision to have the back drop be gradients I decided to go with a very clean and simple font throughout in different weights to serve every purpose. (Open Sans). For the back drop of the gradient : I wanted to create the sense of being in a movie theater, so the most obvious choice would have been black, however black was being used by all the other streaming services. I wanted to stand out, black was too finite and harsh, I decided to go with a midnight blue shade . And between that and the logo's pink color my color pallet was created.
Logo
I set down to design the logo. it was clear to me that there would be nothing better than to make it look like a neon sign.
Different logo iterations
Iconography
​ keeping a simple minimalistic language of iconography. I wanted to differentiate between the different services in a fast intuitive way, So I created white Apple like Icons for each of them.
High Fidelity Mockups
I designed the main portal as a view to all available content melting everything together into one huge cooking pot. First presented by newest release date, with the option to change the sorting by different parameters. To overcome oversaturation, I devised a very detailed Filter that contained many categories like duration, the option to filter by services, subtitles, rating, popularity, match rate and more...
The problem of oversaturation was attacked by 4 fronts: The Filter, Recommendations via machine learning, Watch lists. And last but not least: The Social Tab, a place where your Friends and Family could share latest thoughts reviews, trailers about recent titles, but mainly a place where you could get inspired as to what you should watch next.
For every title, it was important for me to show- which service is providing this content, release date, how many of your friends have already watched this. Your rating, popularity, match rate, IMDB score, languages, associated content or episodes and what others also liked.
.png)
In terms of brand language, it was important to me to keep it more image heavy, rather than illustration. So on the Avatar selection I decided it would be fun to have users select famous objects from movies, with a variety to choose from for each age group.
​Validating
I created a mockup using In-Vision and tested it on 4 different people.
Round 1
Round 2
I quickly iterated on the design and continued to test my designs with 5 more participants
Before
Before
Before
After
.png)
After
.png)
After
Conclusion and Next steps
Next steps for this project would be to continue to develop parts of the site map and building new flows. One important flow to start with would be the My account flow- where a user can see which content providers are linked and how much he or she are paying. Another thing to do is to keep iterating on the designs and keep testing them before going to market. Project take a way's:
It is important to remember to let the potential user's voice lead the way.
It is important to relay on work that others have done before you.
It's always important to take a step back and look at the bigger picture, in terms of time frames, what can be delivered, what is the most effective way to get there.
I also learned a lot about what I like to do, what less so, what I am good at, what should I further explore.
