by Joe Pendlebury (@theuxchap)

7 Reasons to Idolise the UX of Warby Parker’s iPhone App

Joe Pendlebury
Published in
9 min readNov 23, 2017

--

ABOVE: Example of a product details screen in Warby Parker’s iPhone app.

The Chore of Shopping In-store for Glasses

Buying frames is a bit of a chore, which is why I only change mine, every couple of years or so. When in-store, the sheer range of styles, colours and brands to choose from, can be somewhat overwhelming. Add to that, the pressure of the commission-driven sales staff, pushing you to make a purchase, and it’s not the pleasant experience, it should be.

Up until a few days ago, the concept of buying glasses online was new to me. I’d never thought about it, or considered it as an alternative option to heading to a brick and mortar store. That was, until I inadvertently discovered the iPhone app belonging to Warby Parker, whilst researching shopping apps, for work. For those Brits, who like me, hadn’t heard of the brand before, Warby Parker are a US-based retailer of prescription glasses and sunglasses, who specialise in offering designer eyewear, at affordable prices.

First Impression? A Sight for Sore Eyes

After spending just 2–3 minutes exploring the app, it was love at first sight. I was immediately impressed by the simple, clean design, and the distraction-free browsing experience, so much so, that it inspired me to write this post.

Let’s take a look at the Warby Parker app, to see what UX treats, make it such a pleasure to use:

ABOVE: Selecting frames for men or women in Warby Parker’s iPhone app.

1. Beautiful Basics Approach to Design

The UI design of this app is delightfully basic. Colour use is predominantly limited to white and the occasional grey. Brighter shades of blue help narrow focus to area of importance, like primary calls-to-action on the product list and product details screens.

The diverse range of available frames, are elegantly presented in a single-column layout on the product list screen, maximising the full available width of the viewport, simplifying scannability down the list of results.

Adequate levels of whitespace and the tasteful positioning of UI elements, adds to what is an enjoyable browsing experience.

2. Efficient and Usable Navigation System

Product findability is a vital component of any shopping app. The routing from the home screen to the product details screen is a key customer journey, yet it’s often disrupted as a result of distractions, misunderstandings, and other such annoyances. Fortunately, there’s no sign of any of that here. The decision making process is very straightforward.

On opening the app, you firstly choose whether to shop for “Optical” or “Sunwear”. Next, you choose which gender to shop for — “Men” or “Women”. On arrival to the product list screen, tapping a pair of frames will in turn direct you straight through to the product details screen. It’s that easy.

Further still, the second step is omitted altogether on future app opens, as your gender selection is retained from the previous session. You can however change the gender on the product list screen, by pulling down at the top of the screen, to reveal the two gender options again. A gender neutral / unisex option would be a worthwhile addition though.

ABOVE: Filtering capabilities in Warby Parker’s iPhone app.

The primary means of navigating through the app is delivered in the form of a “Tab Bar”, persistently docked to the bottom of all screens in the app. This allows for a more “exploratory” browsing experience, which is particularly useful for those new to the brand and its offering, as well as inquisitive users.

It consists of the following five options, running in order, from left-to-right:

  • Shop
  • Home Try On
  • Help
  • Account
  • Cart

One potential area for improvement here could be to consider moving the “Cart” option, to feature prominently in the middle slot, which is usually reserved for the “Primary” tab. It’s a more comfortable thumb reach for both right and left-handed users, especially those holding the device, and operating the app with one hand.

3. “Try on at Home” Offering

For many, spectacles can be a high value purchase. Like clothing, it’s often difficult to envisage how well a pair of glasses will fit, or how they will look, until you firstly try them on. It’s not a decision you want to rush to make, nor a decision you may wish to make without consulting advice from those around you, especially when about to spend a considerable sum of your hard-earned wages.

ABOVE: Choosing “Home Try On” frames in Warby Parker’s iPhone app.

For this reason, many fashion retailers now offer a no fuss, free returns policy. It gives the customer the freedom and convenience to try on what they have bought online, and return what they don’t want to keep, without incurring additional shipping charges.

Warby Parker have adapted this powerful USP, to offer similar benefits to those not sure about which frames to purchase. Their “Home Try On” service, allows a customer to pick 5 frames, to test out for 5 days. They’ll also ship them out to you for free, and even provide a pre-paid envelope for you to return them in. That gives you plenty of time to seek feedback from your friends, family and loved ones, before making the big decision. Once you’ve found the perfect match, you can complete the purchase online, and a brand new pair will then be shipped out to you.

It’s dead easy to order your “Home Try On” box, using the app. You simply tap the “Try on at home” option on the product details screen, and when you’ve chosen your 5 pairs of frames, proceed to the checkout.

When your frames have arrived, you can use the app to take a selfie, wearing each pair. This is then compiled into a video, which can be shared via various social channels, for others to comment on and help pick a favourite.

4. 180 Degree Views of the Frames

Spectacles, being the rather awkwardly-shaped wearable that they are, on the face of it, come across as quite a difficult product to merchandise online.

  • How do you effectively communicate colour, size, fit and quality?
  • How do you allow the customer to envisage themselves, wearing a pair of your frames?

Unlike with clothing, static product photography doesn’t quite cut the mustard here. Yes, a high-resolution, front-facing, zoomable image would go a long way to achieving the above, but is there any benefit to showing the traditional, top-down, and side profiles, as well, for example?

ABOVE: Example of the tilt functionality available on the product details page of Warby Parker’s website, which is near-identical to that found in its iPhone app.

Warby Parker’s solution to this conundrum, is an excellent one. It comes in the form of an interactive, 180 degree view of the frames being worn by a model. A single, horizontal finger swipe in each direction, adjusts the angle of viewing — 7 different angles, in total. Device tilt doesn’t impact the angle of viewing on the iPhone app at least, but it does on their mobile site (as per the screenshot above), which seems a little odd and inconsistent.

All in all, a very simple, yet innovative technique that adds another dimension to the browsing experience.

5. Ability to Add Frames to a List of Favourites

ABOVE: Example of a list of favourite frames in Warby Parker’s iPhone app.

Favouriting” allows a user to essentially shortlist products of interest, with a view to go back and review them in more detail, as part of a second pass. All “favourited” items are saved to a central location, ensuring ease of access back to this list, without the hassle of having to locate each individual item again, later on.

By opting to “Favourite” a product, the user is showing some degree of intent to purchase that item. In light of this, for many retailers, favouriting functionality is no longer just a “nice to have” feature; it’s now a “must-have”.

The simple fact that Warby Parker have realised this, and incorporated “favouriting” into their app, is itself a smart move. Not only that, but as you are required to sign into your account to save frames to a list of favourites, it means that your favourited items are accessible via both the app, and their website, irrespective of which channel, you firstly favourited on.

6. A 10-Second Sign-Up Process

Let me make a very bold statement here. This is the best account sign-up process, I have ever seen featured in a mobile app.

ABOVE: Account creation process in Warby Parker’s iPhone app.

To create an account, all that’s required is an e-mail address and password. That’s it. Account created. Job’s a good’n.

The first time I went through this process, I was genuinely (and pleasantly) surprised by how quick it was, and how little personal information, I needed to supply. It’s refreshing to come across an account sign up process that doesn’t request superfluous information, for the purpose of sending out marketing communication.

The only oddity for me, is the fact that the speed of signing up for an account isn’t more widely publicised, perhaps prior to the point of opting to sign up, for example.

Okay, so for some, it may take slightly longer than 10 seconds to complete, but it’s still very fast!

Really impressed by this. Other retailers, please take note.

7. Apple Pay Integration

Bearing in mind this is an iOS app, the integration of Apple Pay, makes perfect sense, from a customer convenience perspective.

With the exception of the very first time you make payment using Apple Pay in an app, for all subsequent purchases, there’s no need to resupply your billing, shipping and contact details. All of this information will have been retained from the first purchase. As such, subsequent in-app payments can be made, across any app that offers the ability to pay by Apple Pay, just by using the Touch ID.

You can of course amend those details if you so wish to do so, otherwise, the process couldn’t be any simpler.

ABOVE: Checkout process in Warby Parker’s iPhone app.

Wait, There’s More!

As if all that weren’t already enough, for every pair of glasses sold, Warby Parker also distribute a pair to someone in need. Social responsibility, done right.

This really is a great example of a retail app that’s been designed, wholeheartedly with the user’s needs at the forefront of the decision making process. Definitely one to add to the “UX Inspiration” folder on your iPhone. Looking forward to seeing what Warby Parker have to offer by way of an iPad app, and Android app(s), if they so choose to tackle those in future too.

Warby Parker’s iPhone app is currently only available in the US, and can be downloaded here — https://itunes.apple.com/us/app/warby-parker-rx-eyeglasses/id1107693363?mt=8

Originally written and published to www.uxchap.com on August 12th 2016, by Joe Pendlebury.

One Last Thing…

If you liked this article, please applaud it 👏 and share it with your friends, work colleagues and followers. Remember, you can clap up to 50 times — it makes a big difference for me in helping to focus my writing on what you guys enjoy reading the most.

You’re also welcome to follow me on Medium, on Twitter, or even connect with me on LinkedIn. Thank you for your support! 😊

--

--

Joe Pendlebury
THE UX CHAP

E-Commerce UX Maverick | 18+ Years Optimising UX | Saved UK's Largest Fashion & Homeware Retailer from £135m+ "Burger Menu" Mishap | Innovate, Don't Imitate 🔮