Mobile HTML5 OpenTable Spotlight Deal Page by Kyle McGuire
Mobile HTML5 OpenTable Spotlight Order Review Page by Kyle McGuire
Mobile HTML5 OpenTable Spotlight Payment Page by Kyle McGuire
Mobile HTML5 OpenTable Spotlight My Purchases Page by Kyle McGuire
Mobile HTML5 OpenTable Spotlight Use Voucher Page by Kyle McGuire

OpenTable Spotlight Mobile Website

I created this set of design explorations to help OpenTable envision a mobile-optimized version of Spotlight, their restaurant deal service. Working from initial suggestions provided by their in-house design team I mapped out the full extent of features, content, and interactions that would need to be supported in order to maintain appropriate parity with the desktop version of the deals site and how to incorporate those features into their mobile reservation making service. The visual cues that informed the design were taken from the main website and enhanced with tactile and material styling appropriate to a touch-based interface. All the mockups were created in vectors to facilitate easy translation into final code for both standard and high-resolution mobile devices.

See more in Web and Digital Commerce
BluLabel iPhone App Deal Page by Kyle McGuire
BluLabel iPhone App Deal Listing Page by Kyle McGuire
BluLabel iPhone App Voucher Redeem Page by Kyle McGuire
BluLabel iPhone App Townhog Splashscreen by Kyle McGuire
BluLabel iPhone App SF Gate Splash Screen by Kyle McGuire
BluLabel iPhone App SweetJack Splashscreen by Kyle McGuire
BluLabel iPhone App Playboy VIP Splashscreen by Kyle McGuire

BluLabel Daily Deals iPhone Apps

This series of iPhone apps offered access to the various daily deal sites powered by the BluLabel platform, including sites run by the San Francisco Chronicle and Cumulus Media. Round trip functionality, from deal browsing and purchase to point-of-sale redemption at local merchant’s locations were incorporated into the app. The app was designed from the ground up to gracefully accommodate the various visual styles requested by white label partners.

See more in Web and Digital Commerce
BluLabel HTML5 Mobile Daily Deals Site User-flow Documentation 1 by Kyle McGuire
BluLabel HTML5 Mobile Daily Deals Site User-flow Documentation 2 by Kyle McGuire
BluLabel HTML5 Mobile Daily Deals Site User-flow Documentation 3 by Kyle McGuire
BluLabel HTML5 Mobile Daily Deals Site User-flow Documentation 4 by Kyle McGuire
BluLabel HTML5 Mobile Daily Deals Site User-flow Documentation 5 by Kyle McGuire

BluLabel HTML5 Mobile Website User-flow Documentation

This is an excerpt of the UI specification document that I prepared in order to map out the functionality, user flow, and design of the BluLabel Daily Deals HTML5 mobile website. The document contains a complete page inventory and details on how the UI adapts to different content variations and user-states. The entire document is annotated and cross referenced with notes on how UI components are supposed to function and technical implementation details. The document also acts as a guide to clients explaining what aspects of the app can be white-labeled with their branding and messaging. This project involved working closely with the engineering team members to ensure all the product features would be supported by the mobile API powering the site.

See more in Web and Digital Commerce
BluLabel Daily Deal widgets for SF Gate, Sweetjack Cumulus Media, and Opentable by Kyle McGuire

BluLabel Local Offers Widgets

These embeddable widgets were designed for use on online publishing media properties to advertise the daily deal offers of BluLabel’s partners. Each widget was specifically tailored for placement on the partner’s website. Because the widgets were to be deployed primarily by a DOM-injecting AJAX script, special attention was paid to how the widgets were coded to avoid the host site’s CSS from distorting the designs. Each widget incorporates logic to handle each potential deal status to focus on maximum purchase conversion or new user acquisition. One of the first designs I created for this series was A/B tested and proved to have a click-through rate 30% higher than the previous design it replaced. Sweet!

See more in Web and Digital Commerce
Daily Square Landing Page by Kyle McGuire
Daily Squares Leader Board by Kyle McGuire
Daily Squares Facebook Authentication by Kyle McGuire
Daily Squares Friend Picker by Kyle McGuire

Daily Squares Game

I produced this design and user flow for a Facebook game designed to encourage user engagement and social viral user acquisition for e-commerce websites. To win the game players have to participate each day to build a team that collectively accrues points. The user interface focuses on the leader-board and recruiting additional participants from their social circle to keep people engaged and competitive.

See more in Web and Digital Commerce
BluLabel Logo by Kyle McGuire
BluLabel Business Card by Kyle McGuire

BluLabel Corporate Identity System

DotBlu, Inc wanted to create a new brand and corporate identity for their product line that focused on their strength as a provider of whitelabel web software. The platform’s strength is the successful melding of technology with clients’ visual identities so the logotype combines a luscious script type with the friendly rounded display serif type used in dotBlu’s corporate logo. A complimentary color pallet, usage guidelines, and a suite of icons and business cards was developed along with the new logotype.

BluLabel Corporate Site by Kyle McGuire
BluLabel Corporate Site by Kyle McGuire
BluLabel Corporate Site by Kyle McGuire
BluLabel Corporate Site by Kyle McGuire
BluLabel Corporate Site by Kyle McGuire

BluLabel Website

This corporate website was designed to showcase dotBlu, Inc’s web products. The company offered online platforms to power whitelabel Flash Sales, Daily Deals, Local Offers, and user acquisition tools like Facebook-based contests and sweepstakes. Signature images were created for each product line. The site uses HTML5, CSS3, and media queries to optimize the site for various devices. One of the highlights of the creative process was to stage, light, and photograph the mobile apps I’ve designed in action.

See more in Web and Digital Commerce
TownHog Movies Login Page by Kyle McGuire
TownHow Movies Code Generation Page by Kyle McGuire

TownHog Movies Website

This website allowed customers to claim movie ticket discount codes purchased through promotional offers on daily deal sites. As this was a new purchase model for movie tickets the focus of the user interface was to reduce the user flow to a simple three step process outlined in the primary branding elements. The site brought a great deal to happy customers while offering participating sites a powerful user acquisition tool.

See more in Web and Digital Commerce

Syndication Engine Illustration

This diagram illustrates the players, communication channels, and publish-to-redemption flow of BluLabel’s daily deal syndication engine. The diagram gives an easy to understand overview of a complex API platform that manages the interactions of deal publishers, daily deal websites, consumers, and local merchants. The entire diagram was drawn from scratch in resolution-independent vectors, making it easy to size for any medium.

BluLabel Syndication Engine Illustration by Kyle McGuire
See more in Web and Digital Commerce
TownHog Holiday Card Illustration by Kyle McGuire

TownHog Holiday Card

This holiday card was designed as a thank-you for all of the local merchants that featured their business on the TownHog website. Have you ever seen snow so cheerful and don’t those candy canes just look delicious?

See more in Promotions and Digital Commerce