Video Playlist Module

Enhancement | Plugin

Problem

The current video module required the admins to link their youtube or vimeo playlists to our application in order to display videos to the team. When they linked their channels to the application, they had no way to manage their videos from our application.

Enhancement Overview

Create a plugin, that will allow admins to import or build their own playlist, while being able to fully customize videos being played.

My Role

I was responsible for designing an interface that was simple and intuitive enough for a user to import/build a playlist from an outside source to build their own video playlist, as well as have an option to customize certain video and playlist properties.

Import Playlist

Admin who wanted to import a playlist from a third party, would simply have to copy and paste the link of the playlist, choose a layout on how they wanted the playlist to be and hit save.

Wireframes

Design

Build Playlist

The build playlist, would allow the admins to copy and paste individual links of videos to build their own custom playlist. After the playlist has been built, if they wanted to add more videos, they would have the option to add a new video right from the player page.

Wireframes

Design

Admin Settings

Case study

Problem

With all the robust features offered within the app, admins needed a way to control the differnt permissions and settings across all the application. These settings were all placed on one page, and made it difficult when trying to locate and update particular settings. Certain settings, took the user to another screen in order to update, lead to them being confused, and calling our support team to help update their application.

My Role

I was responsible for creating a new interface that would organize settings based on what feature they were changing, along with creating a way to update the setting without taking them away from that screen.

Image of list and layout idea

Approach

I went through each of the admin settings, grouping each setting by feature they updated. After I organized the settings, I looked at the current UI elements and determined if they were appropriate for the feature they were responsible for updating. This allowed me to start brainstorming the functionality when editing the settings, and gave me a brief idea on the interface layout.

Wireframes and Designs

User Account Info

Orders Discounts & Fees

System Messages

Pre Paid Buy Flow

Case study

Problem

AT&T offers customers a way to purchase prepaid phones, plans, or the option to bring their own device. The current buy flow had issues where customers were getting lost in within the interface, which resulted in them loosing confidence while purchasing the product the needed.

My Role

I was tasked with finding the solution and redesigning the prepaid buy flow process. This involved implementing new functionality and creating a new interface.

Approach and solution

Conducted a competitor analysis, to further understand how the prepaid process varies across the industry. After studying our competitors who share a similar demographic, I was able to create a list of improvements that would further improve the current flow.

Teamed up with our researcher to conduct a field study, to obtain feedback on the current purchase flow, our competitors purchase flow, and the solution if a user couldn’t find what they needed from either flow.

Based on the results from the field study, I was able to analyze the pain points on how a user gets to their end goal, and to formulate a journey map to simplify the process and eliminate getting lost within our interface.

A content audit was then conducted to understand where key usability issues arose. I found majority of the users had trouble understanding some of our content, which resulted in them getting confused and would leave the flow.

I took this information and created wireframes for a desktop experience on purchasing a prepaid service. I was able to eliminate the pain points of the user, and create an intuitive interface that simplified the process of purchasing a prepaid service.

Wireframes

Card Based Overview

UI | UX | Prototype

Problem

With all the robust features offered within the app, admins needed a way to control the differnt permissions and settings across all the application. These settings were all placed on one page, and made it difficult when trying to locate and update particular settings. Certain settings, took the user to another screen in order to update, lead to them being confused, and calling our support team to help update their application.

My Role

I was responsible for creating a new interface that would organize settings based on what feature they were changing, along with creating a way to update the setting without taking them away from that screen.

Card Based Overview Desktop

UX | HTML Prototype

Problem

The AT&T development team and a few steakholders, were struggling to understand the functionality of the "Drawer" design pattern.

My Role

I was tasked with creating a prototype that the development lead could interact with to fully understand how the "Draw" was suppose to function, and give our steakholders a chance to experience the new functionality of the Card Based Overview Desktop App.

Design

Atlas

Design | Development

Problem

Blue Sombrero offers various themed websites that leagues, clubs, and teams could choose from. While each theme offered a different layout, the biggest issues that customers had, was that each theme was restricted to certain features and modules, as well as all of the themes looked old.

My Role

I was tasked with creating a new website theme, that could utlize every feature that Blue Sombrero offered, fully responsive to reach every device, and would have a modern design touch, that would stay edgy to the sport, while keeping the elegance of web standards.

Approach and Solution

I needed data on what our most popular themes were, what were the main design trends between these themes, and what features customers found to be the most important between the themes offered. I approached the Sales and Club support teams, to conduct a survey with the clubs, finding out what they like from other websites(doesnt have to be sports) and what features they would personally find useful to display important information on their websites.

Based on the information, I got back. I was able to understand what our customers wanted from our themes. I began to research, different website design trends, from dribble, pintrest, themeforest, and major league sport teams websites. Picking apart various elements of each design I found, I was able to create a list of UI components, layouts, and design patterns that would fuel my inspiration to design a new website theme.

Low-Fidelity Wireframes / Sketches

Started sketching layouts of the different components that would make up the new theme. Making sure to keep hierarachy and important elements upfront and center, while keeping a solid visual flow where the secondary sections would not be overlooked.

Wireframe

After defining the layout for the new theme, I began to flush out web elements and further defining the core of the theme.

Final Comps

Atlas, was born! The theme originally came in four dark colors offered at Blues Sombrero, blue, green, gray, and red. I decided created a light version of the theme to the clubs, and later added orange, purple, and yellow to the themes.