STUBHUB
HYBRID UX/UI DESIGN

Overview

During my internship at eBay/Stubhub, I was working on various projects across multiple platforms in UX/UI. I was performing as a hybrid designer where it extended to designing and exploring new user experiences for iOS, Android, Web, and Wearable platforms. My main focus was rebranding and working on a new revamped Stubhub experience and keeping the consistency across all the teams.

img

Basic Design Elements & Typography

There were a variety of new ways to play around with typography and core ui assets that helped define the new Stubhub experience and look.

img
img
img

Color Treatments & Imagery

A set of cool and warm tones were used as overlay two-tone, full color, or on black and white imagery. The basic design elements and typography would be able to beautifully overlay on top to represent and bring out the new brand experience.

img img

Design Consistency Across All Platforms

The new refresh is expected to be consistent through all platforms including: Web (Responsive desktop and mobile), iOS, Android, and Wearables.

img

Before and After

The current or previous Stubhub style and experiences will be displayed on the left vs what it could potentially look like after the new style refresh has been given. This can include phones, tablets, desktops, and wearables.

img
img

Geofilter Search Backgrounds

Explorations were done on using Geofilters to use your location where it will pick up popular landmarks wherever you are at and use as the background image for search.

img

Date Explorations (Wireframes)

A variety of different styles and layouts for date treatments were explored. I mocked up the dates in the current layout to perform usability tests to further understand and learn what treatment works best.


Events Header Explorations

Various headers for the events pages were explored, using our new brand guide with different color variations. We also had to take consideration of the limitations that were given of the entire layout from size, color, typography, image usage, and etc.

img

Easy 1, 2, 3 Checkout

I explored an easier 1, 2, 3 step checkout page that is much more easier to follow. More structure and organization was put into the newer checkout flow, which made it more simpler to read and experience.

img

UI Style Guide Explorations

Many different UI style patterns for buttons and layouts were explored and helped us decide on which color to use as the new Stubhub primary colors, following the new brand. I explored between two colors as primary and also played around with secondary colors as well. I also had to take into consideration localization for countries like Germany to see if the new style and typography text would work.

img
img

Avatar Explorations

I explored further into doing something different with personalized avatars. Rather than using the universal human icon when no image is uploaded, I played around with using just plain text with initials and our Stubhub exclamation trademark sign. I used simple shapes and the our talk bubble icon as the environment to wrap the text in. These were just fun explorations I wanted to try out and pitch.

img

Color Recipe Explorations

I was asked to explore different color usage with our warm and cold colors. This exercise was to get a feel for what image overlay colors would look good with color typography. I explored multiple variations of good vs bad. The bad ones are the ones we put in the "graveyard" and let it rest in peace.

img