Vekeo UX & UI Design
Designing for Scale
For years Broadnet was the technology provider behind thousands of telephone town hall conference style calls [events], for a variety of clients including the majority of U.S. Congress, professional sports teams and large advocacy organizations. However, there was no way for participants to sign up for events or listen beyond the telephone. Enter Vekeo.
Developing a New Product
Broadnet had its competition in the telephone town hall space but none of their competitors took events beyond the phone. As the lead UX designer for the project it was my job to develop the site structure, information architecture and nomenclature for a brand new product with no competition.
Defining User Requirements
Working as part of the Vekeo Product Development team, we identified three main user requirements that would be the basis of the application. Vekeo needed to provide users access to event registration, live event audio or video streaming, and an on demand content repository. In turn, the site also needed to be responsive with a ‘mobile-first approach’.
Information Architecture & Site Structure
Using YouTube and Hulu as a model, I used the terminology ‘Channel’ and ‘Event’ for the main action pages on the site. Each ‘Vekeo Host’ setup a Channel Page that contained all of their events, a brief description of their position, organization or company and featured links to their other digital properties. It was essentially their Vekeo Profile Page.
Vekeo’s primary objective for ‘Hosts’ was its ability to obtain user acquisition for their live events by obtaining a user’s name, phone and email address with the consent to market to users beyond the live event. With this in mind, I built registration forms into both Channel Pages and Event Pages.
Mobile First Approach
Through the use of working prototypes and user testing, I was able to experiment with different layouts and interactive elements, finding the best user experience across each device break point – mobile, tablet and desktop. I focused content across each device using a hierarchy system of headings, sub-heads and copy but remained focused on mobile usability. I streamlined event sign ups by fixing the registration form to the top and continued molding the best mobile experience by minimizing scrolling using interactive elements – sliders, anchors and pop-ups – making it easier to navigate content on a small screen. I found these techniques - along with many others - improved usability on mobile devices and created a top-notch user experience.
Touch sensitive sliders were used to minimize vertical scrolling. Left/Right arrows were eliminated to maximize event image tile size and instead, replaced with dots to visually cue the user of additional content.
The SIGN UP button was fixed to the top, keeping it visible to users while on the Host’s Channel and Event pPges. Sign up forms were hidden behind onclick events as to not disrupt the flow of content consumption.
A touch sensitive slider was used on the Category Page to minimize vertical scrolling and allow the user to efficiently navigate to a specific category - using ID hooks/anchors - onclick.
Templated Page Design
Using Brad Frost’s ‘Atomic Design’ methodology, I designed the Channel and Event Pages using a variety of atoms, molecules and organisms combined together to develop page templates, scaled across each device. Yet, to ensure page uniqueness, I spec’d for individual atoms on each page to be customizable based on the Host’s preferences.
Channel Page
The Channel Page was dubbed the Host’s Vekeo Profile Page as it contained links to all of their Vekeo and non-Vekeo content. I designed the page with the Host and their brand in mind, building content blocks [organisms] that allowed for a brief description and image, followed by a block that contained all of their events.
The basic Channel Page layout is broken into sections, directing the user’s eye down the page. It contains customizable content including images, descriptions, promo videos, call-to-action banners and external links.
In an effort to minimize distracting content, the registration form is hidden until the onclick event is triggered. Once triggered, the registration form pops up over the page, greying out everything behind it.
When an event goes live, the streaming player is dynamically added to the page, pushing the events down. The streaming interface enables users to participant in the event via live streaming, rather than over the phone.
Event Page
Event Pages were a sub-page of the Host’s Channel Page and dynamically displayed content depending upon the events life-cycle. Unlike Channel Pages, Event Pages were event specific giving the date, time and information about that specific event.
Upcoming Page State
I designed this page state with a focus on user acquisition – getting users to sign up for the event. Information is laid out so the user’s eye travels from the top down to the left column, absorbing event information before shifting their eye’s right, to the sign up form.
Live Page State
The live streaming player activates 20 minutes prior to start time, moving the ABOUT section down and hiding the SIGN UP form. Live streaming content gives internet users and users not apt to provide their contact information the ability to still join.
On Demand Page State
The final page state provides users who may have missed the event or want to re-listen the ability to do so. All media content is loaded to the page, replacing the streaming player. The SIGN UP form is displayed again but directs users to the Channel Page.
Vekeo Logo Design
When designing the logo, I drew inspiration from chat bubbles and the text messaging typing icon. I used a thicker, block font to make the V-E-K-E stand out and added styling and color to the O, giving the logo its unique look.
This was the first logo I designed that was trademarked.
Coloring in the Lines
Once the UX was complete and approved by the decision makers, I moved on to the UI. Since Vekeo was a new brand, I developed the product branding – typography and colors – and finished by putting a face on the UX mock-ups. I chose to use electric green as the primary color and paired it with black, white and grey for an eye-catching pop. Images were used heavily as to not saturate the user with text and interactive elements were used throughout to keep users engaged.
Vekeo Color Palette
Channel Page
Event Page
Developer Hand-Off
After the UI and UX were completed and approved, I redlined final mock-ups for the developer hand-off. From here, I remained heavily involved working with developers tweaking designs and elements to meet tight deadlines and constantly editing CSS styles. I also worked closely with QA specialists, tweaking certain aspects of the design to meeting changing user requirements. While a number of elements from the initial designs were left on the cutting room floor, the site was launched in late 2015, just in time for the 2016 U.S. elections.
UX Functionality Updates
After the site was launched, I frequently analyzed registration numbers and Google Analytics data to see specific page views, bounce rates and average time spent on pages, helping me determine user patterns to validate my UX decisions. This data provided me with the knowledge I needed to tweak the initial user flow, streamlining event sign ups and eliminating the upcoming event page by incorporating event details into the host’s Channel Page using an onclick event. The new ‘EZ Vekeo Sign Up’ as it would be known, eliminated additional content curation time for the Vekeo Team and removed unnecessary pages/page loads for the user.
EZ Vekeo Upcoming Event Pop-Up