Liz Hewell – Product Designer & Design Director
image-asset+%281%29.jpg

TipTalk Video Q&A

TipTalk Q&A

TipTalk Q&A Feature


TipTalk is a messaging platform that gives direct one-on-one access to professionals, experts and influencers in various fields. It's a great platform to privately message TipTalkers and receive genuine tips, recommendations, or advice. 


TipTalk Q&A is a new feature for TipTalk that allows all users to ask, respond, and post requests to a public video thread. Having a browsable content-driven feed allows users to be easily discovered, and increases engagement for all users. The video-format aids in the authentic quality of responses because users get a visual response for their paid requests instead of just text replies. 


Opportunity

The opportunity was to improve the retention rates of users by improving the product's content. Most TipTalk users didn't use the app daily, but rather occasionally for new requests or messages. The existing app was great if you already had a question in mind, but not if you were new to the app and did't know all the users or what kinds of questions to ask. The goal was to create a more browsable app by allowing users to discover one another's content.

My Role

I was the product designer for our small team. I was responsible for all UI, and worked collaboratively with the CTO to make decisions for the UX. I also worked with the iOS developer to make sure every stage and micro interaction I designed was not only possible, but also the best solution for him to build out for the MVP. Feedback and teamwork was essential to growth and success, so it was important for me to prototype designs in Invision or Principle and send to the team for their input to make sure everything was clear and usable, and meet our goals.


Process

The Q&A Feed

Although there were several potential routes to improve our retention of users, there was one idea that stood out – a feed of other answered questions that you could peek on for a small credit amount. If users liked what they saw, they could pay a bit more to unlock the entire answer. I designed and prototyped the preview flow based off our conversations for how this should work. Although the idea of a browsable, preview-based feed sounded like a good idea, we realized we would need to do a lot of functional changes within the app to make it work. Since this would be a much larger and time-consuming project, the team decided to shift focus to low-hanging fruit in the meantime. 

Some screens from the initial ideation of Sneak Peak feature.

The idea was revisited a few months later when we realized our progress still wasn't producing a lot of gain with the retention of our users. Without some sort of content feed, the TipTalk messenger app was a lot like any other messaging app: you only come to it when you receive a question or have one to ask. This, typically, isn't a daily occurrence. TipTalk's mission has been and will always be to provide a safe place for users and their audience to authentically connect. With that in mind, and with video stories and messaging becoming a regular form of communication with each passing day, we knew our focus had to shift to video. Inspired by the leaps of progress Snapchat and Instagram were taking with video feeds in stories, we merged the idea of peeking on a response with public video.

The CTO and I discussed what we thought the MVP would need. The new feature was going to be big, but we didn't want to change too much of the core functionality of the app so that users wouldn't feel lost when updating. This meant some non-ideal ways of handling requests, but ultimately it would be clearer to keep the Q&A section self-contained and the private messaging inbox separate. We knew we needed the feed to contain a few tabs for trending, following, and pending requests. We also knew we would eventually want a tagging system. I started researching our competitors as well as other successful app's treatment of thread UI's, paying close attention to hierarchy and organization. I noted similarities, design elements that seemed successful, and thought about what UI/UX elements could inspire TipTalk's feed. I sketched several iterations of potential solutions for the containers, shared the more promising ones with the team and went to start mocking up more refined versions to test out in Invision.

The feed UI went through several iterations to achieve something that felt playful yet sophisticated, while giving focus to the content. We would quickly build, test internally, critique, and then iterate. We wanted something that fell in line with our brand's tone, focused on clarity, gave emphasis in the content where needed, and met all the stages we would need with each content card.

Each card needed to have the user info, the question being asked and the asker, a thumbnail snapshot of the answer, and some sort of icon to let users know if the answer was unlocked. We also wanted to leave room for some sort of rating system, as well as tags for easier search functionality.

Some iterations of the feed that didn't make the cut.

Some iterations of the feed that didn't make the cut.

In the end the design was mostly achromatic with only small accents of our brand colors to give emphasis to likes and selected tags. Rounded corners were given to the cards to match the rounded aesthetic of our buttons, and to give a friendlier tone to the feed. Each thumbnail had a dog ear tag showing the state of that answer (unlocked, locked, or free). The Trending and Following feeds were the same setup of completed answer cards, the only difference being who was shown. The My Q&A feed had a different setup since was acting as the inbox for all Q&A requests. The pending tab showed all requests that had been sent to or received by the user, and shows the state of those requests. My Q&A is also where users can ask and create their own post to share with their followers. They can also opt to do it for free to promote themselves or spark conversation. 

Example of searching by tags

Example of searching by tags

Example of a pending feed with several states

Example of a pending feed with several states

Unlocking a post and viewing flow

Unlocking a post and viewing flow

Video Flow: Record & Post

I spent a lot of time breaking down how other product's video recording flows worked. I wanted to see the similarities and differences, and figure out what would be most important for our V1. I was unfamiliar with a lot of video editing products, so I also researched those and noted what seemed essential to use (trim & cut were repeated functions, although we didn't get to this part in our development). We definitely needed the ability to flip cameras, as well as a progress indicator. The team discussed the ability to have a 6 second preview play before a user had to pay, so we also needed to have a minimum post time in case we went down that route.

In the end we decided it was important for users to see the question while recording. That way they didn't have to go back and forth to remember the question, and they could be sure to answer it fully. We also included a minimum recording time marker, and disabled the next button until you hit the minimum time. A user could record in segments and flip the camera, and could review their post before uploading.

Profile Updates

All other parts of the app would of course be touched by the new feature, especially the profile and contacts screens. The profile needed to have a tab for all posts related to that user, so other users could easily learn more about that user in one place. We also had to update the CTA for private messaging to also have a CTA for asking a public Q&A. We initially tucked away an icon at the top to private message, but once we opened up testing to the rest of the group, they all had a difficult time finding the icon and were concerned about existing users' confusion when trying to PM. So we gave equal weight to the buttons and clear copy so user's would know where each button led. 

The About Me section was replaced with an introduction video. This video served multiple purposes: it taught users about the new feature by putting a request card in their inbox to answer and thus create their first post, and it gave the platform some initial content of introduction videos that are free to view.

Earlier stage design option for My Profile + Feed

Earlier stage design option for My Profile + Feed

New Feed UI + About Me on My Profile

New Feed UI + About Me on My Profile

New slider design for pricing input

New slider design for pricing input

Current Solution

The new Q&A feature gives our app a whole new content feed for users to discover TipTalkers to follow, and gives users a way to promote themselves by posting their own video Q&As. And the biggest win-win: all users can make a profit. 

This works by giving every user the ability to opt into receiving video requests. Users can edit their profile & prices, and set separate prices for public and private messaging. They can set any price for the initial question, but once it's public every user on TipTalk can unlock that question for a set price (about $0.09). This unlock profit is split between the asker and answerer of the question, which does two big things: it gives the answerer of the question continuous revenue off of one answered question (instead of a one-time payment), and it gives the asker potential to earn back the credits they spent on asking the original question, as well as opportunity to make a profit off of a really good question. Of course, each party only earns if the platforms user's decide the post is good enough to unlock. 


Takeaway

One of the biggest takeaways for me personally during this project was the idea of sacrifice. It's a lesson I think is continuously learned for designers, as each time you take on a project you must remember limits will affect the design (whether it's time, money, pre-existing UI/UX, etc). We had to sacrifice some cleaner UI to improve the UX for existing users (i.e. for the Q&A inbox). I do think it would have been different if this was a brand new product, but because we have a user-base that was used to the old functionality of TipTalk, too much change at once would be overwhelming and difficult to navigate. This is not a finished product, we will continue to iterate and improve the experience for our users as we see it used in action.