LG T-Commerce

In early 2012, Fluid teamed up with LG electronics brand to begin work on designing out a Smart TV Shopping platform. This platform was not in existence and had led to months of research, design and development in order to conceive this experience. The idea was to transform how User's watch TV and incorporate a seamless shopping experience into their ordinary viewing programs.

Role

UX Designer

Company

Fluid

Timeframe

March 2012

Deliverables

Research, Information Architecture, User Flows, Wireframes, Annotations,
User Testing

Information Architecture

After stakeholder interviews, research, and previous e-commerce experience this is the IA we landed on that drove the

Opportunity

LG approached Fluid with a goal to create a new way of shopping. Imagine you're watching your favorite TV show, and one of the actors is wearing something that you like. During a commercial, you can bring up the T-commerce platform and find the exact or a similar item and purchase it all before the show comes back. It was an opportunity to reimagine how customers shopped.

Design Process

We began by doing market research on products that used TV as a conduit for tasks such as Netflix, X-Box Live, Facebook, etc. and on SmartTv's in general. We worked closely with the LG team located in Korea and came up with the ideal IA and user flows for how clients would navigate the platform. Afterwards, we began drafting up designs and going through rounds of user testing to validate our concepts.

Brainstorm

Initial user whiteboard user flows and case studies of other TV technologies (i.e. XBox Live registration flow).

User Journey Flows

We came together as a team to figure out what the ideal flows of this new experience would look like from creating your profile,

Wireframes

Featured

Brand Gallery

The Brand Gallery displays selected brands in a Carousel and Brand Stripes/Stacks below to feature brand content. User lands on this screen upon opening the LG Plaza application, or upon click of "Brands" in the global navigation.

Content on this screen may include videos, images, and text. The top portion is reserved for newer brands to display their banner followed by an alphabetical listing of every brand.

Brand Galley - Scrolled

Each brand is given a module to custom fit their brand imagery. Each module consists of 5-8 image and video slots. When the User rolls over a module the whole slot will highlight and if they roll over a video section, just the video will highlight and afford the User the ability to watch it directly from here.

Brand Channel Landing

The Brand Channel is the "Homepage" to each of the brands represented on the LG Platform. The user can access this screen from the brands menu in the navigation, the brand gallery screen. The page can be configured in varying ways depending on the brand.

Brand Channel Navigation

Clicking on the "Storefront" would expose the Brand navigation menu. Rolling over a category would expose a left-right navigation to subcategories.

As the user begins to shuffle through sub-categories in the menu, the sub-category indicator at the bottom of button shuffles to reflect the currently displayed sub-category. We suggested a maximum of 8 sub-categories, but has a hard maximum of 10. Clicking on a button when a subcategory is displayed will take the user to the displayed sub-category screen. As the User cycles through there will be a delay that will refresh the screen with the selected subcategory. Recommended delay is 2 seconds, TBD in development. Clicking will also refresh the screen with the selected category or subcategory

Product Detail Screen

When the user clicks on a product from anywhere within the plaza experience they are taken to a product detail screen in this state.

Product Detail Screen - Product Details

Once the user has clicked ‘Show Details’ in the minimized panel it will expand to reveal the entire Product Shopping Panel shown here. This panel will provide the user with additional information about the product including reviews and a description along with social and wishlist features.

Shopping Bag

The Shopping Bag screen is where all of the User's items they've added are aggregated. The User can access the Shopping Bag & Checkout Link under the Bag icon on the Primary Navigation.

Shopping Bag - Chaeckout

Once the User has selected to checkout and the system makes a call to the Middleware to verify all products are still in stock and the same price, this screen displays the option to use the local profile or guest checkout.

Unauthenticated Checkout Landing

The User navigates to this screen via the email entry screen on Guest Checkout.

Other Projects