Twitter VIT

Role                                           Client
Design Lead (UI & UX)                Twitter

Twitter VIT (Very Important Tweep) is a creative tool allowing Twitter's top celebrities and
publishers, 
reach their audience. It consists of three elements.

Q&A
Connecting fans to VIT's through question and answer sessions. A VIT announces they will be answering fan questions via #hashtag such as #AskEllen. Fans tweet their questions using the official hashtag, and the VIT can curate and video or text tweet reply to their answer to fans directly.

Hype
Hype allows VIT's and Publishers to create hype around a topic they believe in, a product they want to sell or promote their new show, movie or album. 

Camera
A simple and fun way for a VIT to create media and post to Twitter.

The Problem

For some years, Twitter's top celebrities and publisher’s, have been tweeting and recording Q&A sessions via Twitter's Q&A app. The current Q&A app is outdated both aesthetically and functionally. Both media and UX represent a Twitter from the past.

Goals

  • Create simplistic UI Design, a busy VIT can understand with ease
  • Improve UX for Celebrities and Twitter employees that operate this app under time pressure
  • Add new features to create one combine two apps into one
     

Personas

The main demographic is split into three user types; VIP's, Publishers and Twitter Partnership Managers.

Celebrity's & VIP's
VIP’s are using at home, on the go, in the studio or Twitter office. VIT is used on their own or assisted by a Twitter, partner manager. Sometimes VIT's might be with other influential people, think The Rock and Kevin Hart. Celebrities do not have much time for failure. It needs to be quick and easy to use to fit into their busy schedules. It has to be explanatory, intuitive and resembles Twitter for a learning curve.

Twitter Partner Manager
Partner managers are in high-pressure situations assisting VIP's onsite or inside a Twitter office.
Pre-setup and ability to run live, with easy access menus to curate inbound tweet questions.
They require features that help minimize error
— guiding prompts that help Partner Managers
under pressure.

 

User Experience

Constructed of three main components Q&A, Hype & Create, Twitter VIT has an equally split demographic; VIP's, Twitter Employees and Publishers. During early UX testing, VIT's and Partnership Manager struggled under time pressure to create Q&A sessions in a time sensitive environment, what was alarming was the original UX wireframe was a variation of the original Twitter Tweet Compose. With this in mind, the Tweet compose was broken down into sections, in which the VIT would be able to complete and hit done to seamlessly progress through the setup. 

During UX testing, the other two sections could stay true to the original Tweet compose, and add features that the users could understand.

 

TwitterVerified_Userflow

Design Systems

The VIT app must aesthetically fall in line with the Twitter 'bluebird' app. Using Twitter design systems, and guidelines, we led with the Twitter primary palette to distinguish individual features, wayfinding and highlighting areas the main components of the app. 

 

ColorPalette

UI Design

The final UI design is clean, instructional and it retains elements of the Twitter platform that celebrities already know and love. The most significant challenge during the design phase was balancing instructional hints while maintaining the Twitter design.

TwitterVerified_UI_Screens_transparent

UI Animation Explorations

 

Q&A_Dribbble_ButtonPressCircleNEW
Q&A_Drib_ButtonShift_moving_USE
Q&A_MenuSlider
Q&A_LoadingProgress

Q&A Examples

Hype Examples

Currently at @Twitter infusing Product Design and Product Management to build innovative tools for Media Publishers.

Currently at @Twitter infusing Product Design and Product Management to build innovative tools for Media Publishers.

           Twitter       Instagram       Linkedin        Dribbble

     Twitter       Instagram       Linkedin        Dribbble

Twitter       Instagram       Linkedin        Dribbble

Twitter       Instagram       Linkedin        Dribbble

Martin Craster.

Martin Craster.

Made In Middlesbrough, England. Exported to California.

Made In Middlesbrough, England. Exported to California.

jQuery(document).ready(function($) { $('#first').hover( function() { $('#bg-img-1').addClass('show'); }, function() { $('#bg-img-1').removeClass('show'); } ); $('#second').hover( function() { $('#bg-img-2').addClass('show'); }, function() { $('#bg-img-2').removeClass('show'); } ); $('#third').hover( function() { $('#bg-img-3').addClass('show'); }, function() { $('#bg-img-3').removeClass('show'); } ); $('#fourth').hover( function() { $('#bg-img-4').addClass('show'); }, function() { $('#bg-img-4').removeClass('show'); } ); $('#fifth').hover( function() { $('#bg-img-5').addClass('show'); }, function() { $('#bg-img-5').removeClass('show'); } ); $('#sixth').hover( function() { $('#bg-img-6').addClass('show'); }, function() { $('#bg-img-6').removeClass('show'); } ); $('#seventh').hover( function() { $('#bg-img-7').addClass('show'); }, function() { $('#bg-img-7').removeClass('show'); } ); $('#eight').hover( function() { $('#bg-img-8').addClass('show'); }, function() { $('#bg-img-8').removeClass('show'); } ); $('#mtv').hover( function() { $('#bg-img-mtv').addClass('show'); }, function() { $('#bg-img-mtv').removeClass('show'); } ); $('#mls').hover( function() { $('#bg-img-mls').addClass('show'); }, function() { $('#bg-img-mls').removeClass('show'); } ); });