LIBBY YEH
UX Research & Design

Walgreens
Landing
Page

UX Design & Content Strategy

Project Objective:

Drive awareness of Western Union's product portfolio with Western Union's own  landing page on Walgreen's website. In addition, we used the new channel to launch Western Union's Stage & Pay product using the Western Union app now available at Walgreens.

Key Performance Indicator:

  • Unique views on the Western Union landing page

My Role:

  • Content Strategy
  • UX & Visual Design
  • Video Content Strategy & Voice-over Talent

Walgreens Landing Page
Launch Wireframe

Launch Wireframe

Wireframe


The wireframe was created in excel. Yes, you read that right, in excel! Therefore, I recently turned the low-fidelity wireframe into a black and white mid-fidelity prototype done with Sketch. 


Western Union at Walgreens Landing Page

Western Union at Walgreens Landing Page

Visual Design

Once both the Western Union and Walgreens teams agreed on the wireframe layout, the following steps were taken to produce the final UI.

  • I provided copy, images and logos for all facets of the Western Union specific content (see product copy below).
  • Additionally, I developed the script and provided voice-over for the Western Union Stage & Pay App video included on the landing page (see video below).
  • The landing page followed both Western Union and Walgreen's corporate visual style guidelines.

Screen design displayed in a mockup
Screen design displayed in a mockup
Screen design displayed in a mockup
Walgreens Landing Page

                                           Initial Results

15,842
unique views during
1 Month
launch period
Walgreens Landing Page
Updated Wireframe

Updated Wireframe

Updated Wireframe Exploration

  • I did a variation of the Four-Step Sketch but for rapid wireframing. 
  • For 20 minutes I performed online research, looked at some competitors, and gathered some inspiration. It is important to note that I have a base of understanding on the target market and research results to help guide my thinking.
  • For 20 minutes, I quickly created three low-fidelity versions of the landing page using Balsamiq.
New wireframe created in Sketch:
  • Updated the treatment of the hero image to fully cover the width of the page.  
  • Moved the Call-To-Action buttons for finding a location to above the fold. 
  • Moved video content to above the fold
  • Layout for product offerings more like a retail eCommerce site with links to learn more about each.
  • Layout still complied with Western Union & Walgreens style guidelines.