Mobile UX & E-Commerce: The New American Red Cross Online Store - Clearly Innovative | Web and Mobile DevelopmentClearly Innovative | Web and Mobile Development

We recently collaborated with Orderhouse.com to re-design and optimize the American Red Cross E-commerce Store for mobile browsers.

The ARC business requirements included site optimization for the latest versions of Chrome, Safari, Firefox, Internet Explorer minus one version at the start of the project. In addition, the long term strategy for the ecommerce site needs to be responsive for desktop, tablet and mobile devices; the focus for Phase 1 of this project was to create a mobile friendly (m-commerce) version of the store.

old-rc-site-final

Screenshots of the ecommerce site prior to re-design

The Red Cross Store serves customers ranging from personal shoppers (a private childcare provider purchasing 2-3 first aid kits) to enterprises (companies making bulk purchases for their disaster relief teams).

Our approach to this project was user experience heavy and included using clear navigation, a subtle and informative notification system, humanized messaging and an accessible shopping cart. We also developed this store as a single page application (SPA) using AngularJS to create a native-like experience and faster performance on mobile devices. Being mindful of the required browser types and the variety of mobile devices was critical for the project’s success. Below are key highlights of the user experience we developed for the project.

 

Use familiar navigation and visuals

Online shoppers are familiar with standard menu navigation and iconography; we employed traditional iconography and navigation to make the experience familiar and intuitive to the user.

Because this is a mobile website and not a native mobile application, we intentionally excluded navigation arrows (back and forward). The customer utilizes their device’s native browser navigation keeping the experience standard to whatever operating system they are used to (Android, iOS or Windows).

redcross-nav-menu-crop

 

“Tell me, but don’t TELL ME”

As you add items to a shopping cart, it’s helpful to see these updates in real time wherever you are on the site. These notifications do not need to hit your customer over the head; you don’t always need to shout out via harsh pop-up alerts. Giving the user some kind of confirmation validates their action and encourages them to continue browsing products. We employed a notification system that displays subtle alerts that animate at the top of the web page and fade away after 2-3 seconds. In addition, a small quantity counter in the nav bar’s shopping cart button automatically changes as you add items.

In cases where the store required pop-up messages (e.g. for an incorrect or incorrect coupon code) we implemented a modal alert system that uses soft animations to avoid a jarring, clunky experience. These validation messages needed to be more pronounced in comparison a small notification bar.

  redcross-animation

 

Provide clear messaging

The right kind of messaging creates trust and builds self-confidence in the shopper.

A validation message that reads “You have errors in this form” is informative but could be more useful. It could be enhanced further by explicitly identifying where the errors are – or, at a minimum presented the error in a humanized tone “Oops. We found errors in your form. Please check the form for any missing information or typos and submit your information again.”  A message like this politely explains that the user made a mistake and allows them to fix it without feeling frustrated. 

In addition, providing directions and explanations as to why or how a user should perform an action is helpful and encourages customers.

redcross-message-ui

Make checking out easy and accessible

The shopping cart should be a readily accessible piece of UI throughout any online shopping experience. Just like shopping in a real store, a customer typically has the cart on his person the whole time. So, rather than making the shopping cart it’s own unique page, we created a sliding window so the user can access the cart at any time, on any page. This speeds up the process toward completing a transaction.

redcross-shopcart-2

Once the user proceeds to check out, the customer is presented with a new interface that organizes the checkout process into four steps. This change in design is intentional and reinforces the fact that the user is in a different area of the store and should be ready to complete a transaction; mirroring the same kind of experience in a physical store. The four steps for checkout are presented in a tab layout. Though this layout is used widely across the web, it allows customers to see exactly where they are in the overall process, making the process feel effortless.

Lis Warren | Lead Designer | @lissythornberry