Adding Search to Periscope: A UX Case Study
Disclaimer: I worked on this March 2016 and since then, Periscope has somewhat revamped its search feature (which makes me very happy as a user). Regardless, here are my process and wireframes! Also, I do not work for Periscope, I’m just an evangelical fan.
I fell in love with Periscope a couple of months ago and decided to design a search feature so that users can watch content relevant their interests while still maintaining the exploratory experience so unique to Periscope.
What is Periscope?
If you haven’t downloaded Periscope, I highly recommend it. It’s a live broadcasting app that lets users stream and watch videos from their mobile devices. What I absolutely loved was the map view of all the live broadcasts happening around the world:
Periscope allows you to just drop in anywhere in the world and randomly watch broadcast. I watched a couple of Russian tourists eat pho in Vietnam, a girl celebrating her birthday in a karaoke room in South Korea, a prayer right outside of Mecca, a father and his adorable son vlogging in Iraq, a protest in Argentina,a taxi driver’s trek throughout Manhattan, and a hackathon in India. Not only can you watch these videos in real time, you can actually chat WITH the broadcaster as well! As someone who love learning about other cultures, I absolutely loved exploring Periscope.
The Problem
However, I caught myself thinking “This app is so awesome! Agh, but if only they let you search videos by subject …”
Right now, this is Periscope’s search feature:
A search brings up user profiles but with the videos expiring in 24 hours and more viewers than broadcasters, profile results aren’t very exciting or gratifying. What if I wanted to see all the videos pertaining to Brazilian Jiu-Jitsu at this moment? Or what if I wanted to check out broadcasts from a particular conference or event that I had to miss out on? What if I wanted to see videos of people creating art right now?
Currently, you have to wade through a lot of content before finding something that perks your interest.
Instead of pining for the feature, I decided to take a stab at prototyping it.
The Approach
Instagram was the first place I looked for inspiration. I love browsing tags on this app because it’s a great balance between a deliberate search and exploration.
I started by just sketching wireframes. I like to first sketch out the app as it is; it helps me strip away the visual elements and focus on the layout and interactions on the app.
I then just walked myself through the user journey of searching a tag and drafted some wireframe sketches based on that.
I made two iterations on this so I’ll show the first one:
The 1st Iteration
Full flow:
My notes on this iteration:
1. Because I loved the map view, I included “Search” as a menu item at the top. I figured that this was the page where people go to browse content, so having a quick way to access the Search feature made sense to me.
2. I included tag suggestions because it cuts down the the amount of time a user has to type, plus it may show you to currently active hashtags the user may not be aware of.
3. For each tag suggestion, the user can also see how many live broadcasts are available per hashtag which will allow the user to make his/her choice.
4. Again, I loved the Map view so after the user has entered in the search query, the results will pop up on the map so users can explore.
I presented this to the Atlanta Ladies That UX group.
My audience loved the presentation and I was fortunate enough to get praise and critique from Sophia Voychehovsky. She pointed out these factors:
- “Search” seemed out of place as “Search” is a function whereas “Map” and “List” are ways to view content.
- The tag search is on a separate page away from the original Periscope search page where you can search by users. This iteration looked like I was swapping out a feature.
Further feedback/questions I got outside of LTUX:
- “Are the tag suggestions listed by number of broadcasts?”
- “Is the tag suggestions dropdown scrollable? How do I see past the third suggestion?”
- “Do I have to include the hashtag in the search?”
These comments expanded my perspective so I jumped on resolving these points in the 2nd iteration.
Back to the Drawing Board
I took a step away from the wireframes and organized how I was going to structure the search feature.
After the meetup, I looked up Sophia Voychehovsky’s brilliant write-up on Object-Oriented UX. I decided to try to tackle the problem from this angle since my main issue was that “Search” was so out of place in that menu.
I needed to group the action, “search,” and then group the WAYS to view the results/content.
The 2nd Iteration
How search results appear on Periscope today vs. my revised iteration:
Full flow of 2nd iteration:
What I revised:
- I decided to leave the original Map/List section alone and focus on where the current search function is.
- When you enter text into the search bar, the user starts seeing tag suggestions. I ordered them by number of broadcasts.
- Now when you get the search results, you have the ability to view on the map, by a list, or by users. This keeps the current content viewing format on the Periscope app but the new search feature will allow the user to narrow down the content to their interests.
Hooray! Now the user can search Periscope broadcasts!
But wait … wherever tags are used, there is always one question:
How do you prevent hashtag abuse?
When people start designing a product, we tend to focus too much on the “ideal user” and not about the myriad of ways our product can be abused. Linnea Strid wrote a great article on designing for the “Asshole Contingency” that covers preventing abuse and solutions to combat it.
Hashtag abuse has been shown to drive down engagement, dilute search results, and creates visual clutter. To address this, I decided to limit users to 5 tags when broadcasting:
I kept it simple and I made it clear how many tags you have entered vs how many you are allowed. Why 5? It looks like studies show that 2–3 hashtags are optimal but I still wanted to give users enough freedom to apply tags to cover a variety of subjects. It increases their chances of popping up as a result and help other users find their content.
What did I learn from this exercise?
I learned that I had to remove myself from my own preferences. Even though I love the map view, others may prefer seeing the results in a list and some people may like that the current search brings up user profiles. Better organizing my objects, i.e. actions and content viewing types, helped broaden the possibilities of the feature and provide a less confusing workflow. Finally, I really appreciated getting feedback and critique. It always helps to kick yourself out of your own echo chamber and as a result, I ended learning about a whole new UX approach.
This was also a great way to build something fun for my portfolio. Next time you find yourself thinking “This app is great but I wish it had/did ___,” go ahead and try to figure out a solution. It was an enjoyable exercise that barely felt like work to me and it ended up being a huge learning experience.
And of course, go download Periscope if you haven’t already and check it out!
To see more of my work including my UX portfolio, check out my site.
