The Landscape

 

CVS pharmacy had long established its brand as the go-to online pharmacy and wanted to improve their mobile shopping experience across the board, and they saw the iPad as a blank slate to create new ways for customers to shop. Working with CVS marketing, design, product, and technology, as well as our development partner, UsableNet, we created an iPad experience that matched the message of CVS.

 

In 2013 the design was a Webby Award nominee for “Best Tablet Shopping Experience” and in 2014 won a “Best in Industry” award from New Media.

Defining The Look

I began by creating mood boards to hone in on the right visual direction for the app. Looking to avoid the “traditional” pharmacist on white look that’s often overused when portraying pharmaceutical sites, we moved forward with this friendly, trustworthy look and feel.

Typography

I was inspired by the typography on various CVS packaging designs collected for the mood boards, and searched for a family of sans serif (knowing that they also had to be web safe for future integration with their online store.) Helvetica Neue Bold was chosen as the display typeface for its official, reliable personality and Helvetica Neue Light for its non intrusiveness and even x-height.

Imagery

We worked with illustrator Richard Harkrider to develop images showing familiar store layouts in an 3D virtual environment. These images are used on shop landing pages and in promo areas throughout the app to help foster a fun, human connection with pharmacy customers.

UI Elements

I used hints of depth and dimension in the app over a flat aesthetic to immerse the user in the store experience and make the interface feel touchable while shopping from a screen.

Product Cards

Product cards were designed to support a wealth of information while still being legible and scannable. The UX designer and I worked together to elegantly account for availability messaging, product names, unit sizes, and pricing within the card.

Navigation

The collapsing navigation pattern allows customers to quickly jump in and out of storefronts and categories. Nesting of stores and categories are maxed out at three levels deep in order to avoid forcing shoppers down a rabbit hole of choices.

Product Highlights

 

As part of the UsableNet collaboration with CVS, we translated our design principles into product features. By sharing wireframe prototypes with CVS pharmacy customers early in the process we were then able to test and refine our initial instincts. Below are some highlights of new product improvements.

Getting the Essentials

Convenient shopping typically involves grabbing the essentials first, so, we created a personal destination on the app called “My Shopping List” to put the customer’s personal items right at their fingertips.

Accurate Filters

Smaller “in-app” navigation was designed to allow users a second and third filter option to create an accurate search and valuable shopping experience in the app.

Personal Saving Offers

The ExtraCare deals tab is a destination for customers to find personal savings in one place. Coupons are added to a members ExtraCare Rewards Card and made available immediately.

Streamlined Checkout

I took the drill-down steps out of checkout to allow people to view and edit their delivery information, address and payment info, then checkout with a single tap.

Styleguide

CVS pharmacy internal mobile design team is maintaining and updating the app, so a styleguide was necessary to ensure the consistency of future designs and aid in a smooth hand off between our teams.

Design and Strategy Team: CVS Caremark User Experience

Project Lead:  Vicente Caride

Art Director and Lead Product Designer: Salvatore Luongo

Strategist: Elizabeth Ryan

UX Designer: Robert Begley

 

Owner: CVS Pharmacy

Chief Consumer Officer: Rob Hoenick

VP of Marketing: Christie Ramirez

Direct of Content and Social Media: Shaun Mather

VP of Technology: Vijay Kruptja

Project Manager: Nag Sayala

Illustrator: Richard Harkrider

 

Development Firm: UsableNet

LUONGOMADE

CVS iPad App

 

In March of 2013, I led the design of the award winning iPad app for the nations second-largest pharmacy chain and created a personalized retail experience that helps consumers manage their health care and drugstore needs.

 

Art Direction   |   Product Design  |  User Interface Design

The Landscape

 

CVS pharmacy had long established its brand as the go-to online pharmacy and wanted to improve their mobile shopping experience across the board, and they saw the iPad as a blank slate to create new ways for customers to shop. Working with CVS marketing, design, product, and technology, as well as our development partner, UsableNet, we created an iPad experience that matched the message of CVS.

 

In 2013 the design was a Webby Award nominee for “Best Tablet Shopping Experience” and in 2014 won a “Best in Industry” award from New Media.

Defining The Look

I began by creating mood boards to hone in on the right visual direction for the app. Looking to avoid the “traditional” pharmacist on white look that’s often overused when portraying pharmaceutical sites, we moved forward with this friendly, trustworthy look and feel.

Typography

I was inspired by the typography on various CVS packaging designs collected for the mood boards, and searched for a family of sans serif (knowing that they also had to be web safe for future integration with their online store.) Helvetica Neue Bold was chosen as the display typeface for its official, reliable personality and Helvetica Neue Light for its non intrusiveness and even x-height.

Imagery

We worked with illustrator Richard Harkrider to develop images showing familiar store layouts in an 3D virtual environment. These images are used on shop landing pages and in promo areas throughout the app to help foster a fun, human connection with pharmacy customers.

UI Elements

I used hints of depth and dimension in the app over a flat aesthetic to immerse the user in the store experience and make the interface feel touchable while shopping from a screen.

Product Cards

Product cards were designed to support a wealth of information while still being legible and scannable. The UX designer and I worked together to elegantly account for availability messaging, product names, unit sizes, and pricing within the card.

Navigation

The collapsing navigation pattern allows customers to quickly jump in and out of storefronts and categories. Nesting of stores and categories are maxed out at three levels deep in order to avoid forcing shoppers down a rabbit hole of choices.

Product Highlights

 

As part of the UsableNet collaboration with CVS, we translated our design principles into product features. By sharing wireframe prototypes with CVS pharmacy customers early in the process we were then able to test and refine our initial instincts. Below are some highlights of new product improvements.

Getting the Essentials

Convenient shopping typically involves grabbing the essentials first, so, we created a personal destination on the app called “My Shopping List” to put the customer’s personal items right at their fingertips.

Accurate Filters

Smaller “in-app” navigation was designed to allow users a second and third filter option to create an accurate search and valuable shopping experience in the app.

Personal Saving Offers

The ExtraCare deals tab is a destination for customers to find personal savings in one place. Coupons are added to a members ExtraCare Rewards Card and made available immediately.

Streamlined Checkout

I took the drill-down steps out of checkout to allow people to view and edit their delivery information, address and payment info, then checkout with a single tap.

Styleguide

CVS pharmacy internal mobile design team is maintaining and updating the app, so a styleguide was necessary to ensure the consistency of future designs and aid in a smooth hand off between our teams.

Design and Strategy Team: CVS Caremark User Experience

Project Lead:  Vicente Caride

Art Director and Lead Product Designer: Salvatore Luongo

Strategist: Elizabeth Ryan

UX Designer: Robert Begley

 

Owner: CVS Pharmacy

Chief Consumer Officer: Rob Hoenick

VP of Marketing: Christie Ramirez

Direct of Content and Social Media: Shaun Mather

VP of Technology: Vijay Kruptja

Project Manager: Nag Sayala

Illustrator: Richard Harkrider

 

Development Firm: UsableNet

CVS iPad App

 

In March of 2013, I led the design of the award winning iPad app for the nations second-largest pharmacy chain and created a personalized retail experience that helps consumers manage their health care and drugstore needs.

 

Art Direction   |   Product Design  |  User Interface Design

The Landscape

 

CVS pharmacy had long established its brand as the go-to online pharmacy and wanted to improve their mobile shopping experience across the board, and they saw the iPad as a blank slate to create new ways for customers to shop. Working with CVS marketing, design, product, and technology, as well as our development partner, UsableNet, we created an iPad experience that matched the message of CVS.

 

In 2013 the design was a Webby Award nominee for “Best Tablet Shopping Experience” and in 2014 won a “Best in Industry” award from New Media.

Defining The Look

I began by creating mood boards to hone in on the right visual direction for the app. Looking to avoid the “traditional” pharmacist on white look that’s often overused when portraying pharmaceutical sites, we moved forward with this friendly, trustworthy look and feel.

Typography

I was inspired by the typography on various CVS packaging designs collected for the mood boards, and searched for a family of sans serif (knowing that they also had to be web safe for future integration with their online store.) Helvetica Neue Bold was chosen as the display typeface for its official, reliable personality and Helvetica Neue Light for its non intrusiveness and even x-height.

Imagery

We worked with illustrator Richard Harkrider to develop images showing familiar store layouts in an 3D virtual environment. These images are used on shop landing pages and in promo areas throughout the app to help foster a fun, human connection with pharmacy customers.

UI Elements

I used hints of depth and dimension in the app over a flat aesthetic to immerse the user in the store experience and make the interface feel touchable while shopping from a screen.

Product Cards

Product cards were designed to support a wealth of information while still being legible and scannable. The UX designer and I worked together to elegantly account for availability messaging, product names, unit sizes, and pricing within the card.

Navigation

The collapsing navigation pattern allows customers to quickly jump in and out of storefronts and categories. Nesting of stores and categories are maxed out at three levels deep in order to avoid forcing shoppers down a rabbit hole of choices.

Product Highlights

 

As part of the UsableNet collaboration with CVS, we translated our design principles into product features. By sharing wireframe prototypes with CVS pharmacy customers early in the process we were then able to test and refine our initial instincts. Below are some highlights of new product improvements.

Getting the Essentials

Convenient shopping typically involves grabbing the essentials first, so, we created a personal destination on the app called “My Shopping List” to put the customer’s personal items right at their fingertips.

Accurate Filters

Smaller “in-app” navigation was designed to allow users a second and third filter option to create an accurate search and valuable shopping experience in the app.

Personal Saving Offers

The ExtraCare deals tab is a destination for customers to find personal savings in one place. Coupons are added to a members ExtraCare Rewards Card and made available immediately.

Streamlined Checkout

I took the drill-down steps out of checkout to allow people to view and edit their delivery information, address and payment info, then checkout with a single tap.

Styleguide

CVS pharmacy internal mobile design team is maintaining and updating the app, so a styleguide was necessary to ensure the consistency of future designs and aid in a smooth hand off between our teams.

Design and Strategy Team: CVS Caremark User Experience

Project Lead:  Vicente Caride

Art Director and Lead Product Designer: Salvatore Luongo

Strategist: Elizabeth Ryan

UX Designer: Robert Begley

 

Owner: CVS Pharmacy

Chief Consumer Officer: Rob Hoenick

VP of Marketing: Christie Ramirez

Direct of Content and Social Media: Shaun Mather

VP of Technology: Vijay Kruptja

Project Manager: Nag Sayala

Illustrator: Richard Harkrider

 

Development Firm: UsableNet

CVS iPad App

 

In March of 2013, I led the design of the award winning iPad app for the nations second-largest pharmacy chain and created a personalized retail experience that helps consumers manage their health care and drugstore needs.

 

Art Direction   |   Product Design  |  User Interface Design

©LUONGOMADE