If I Designed It: Victoria’s Secret iPad app

When I do UX research for a client, a lot of my time is spent looking at other apps for inspiration and requirements gathering. My iPad is full of apps that I actually never use, but have been there for research. One of the apps is Victoria’s Secret—a brand I think everyone knows. I was a bit surprised about the UI and the overall experience of the app, which gave me the idea to start doing “If I Designed It” blog posts.

The purpose of If I Designed It is not to rip any apps, but critically look at how they can be improved the approach I would take to make it better. And yes, if you were wondering, there were a lot of “hey the assets look great!” and “working hard, or hardly working?” comments as I was working on the re-design of an app full of beautiful women in lingerie.

Let’s take a look at the app.

App Analysis

When I first opened the app it seemed fine. When I started interacting with the app I noticed there was a lot of clutter, and was not sure if the purpose of the app was for marketing purposes, online shopping or a little bit of everything. My observations:

There were a lot of views that seemed to just be a web view of the website. If that was the case, why wouldn’t I as a user just go to the website on Safari vs. a native app experience?

As I mentioned earlier, the focus seemed very broad. There was a section to view the models, shop online, watch videos, connect via social media.

The connect via social media seems as if it was reused because there was copy to download the iPad app…as I was using the iPad app.

My Suggestions

Focus the app. My recommendation would be to make it a catalog/shopping experience, but in a native iOS experience, not re-using the website.

My attempt was to create an app with no tab interface. Though I think it would work well with an app for a store, I wanted to try something different.

If I Designed It

I selected a few key views to redesign and added my commentary below.

Launch View

Home View

The home view would show the user featured content that would be called from a web server so the app would not have to be updated every time something new comes in. The “shop” button below would take the user to the next view, shop. Alternatively, the user could swipe to go to the shopping view. My intent for not having shop be the home view is to highlight the features for the user first.

The navigation include’s the VS logo along with a shopping cart count, search button and nav button. The nav button would open a list-view of the navigation options. The intent is to keep everything in one button as opposed to a tab interface.

Shop View

The shop view includes custom buttons of every product category. If Victoria’s Secret ever wanted to add more categories, the user could swipe to show more of them. tapping and holding on one of the buttons would bring the graphic to a 100% opacity. When the user taps on a category, they go to the shop category view.

Shop Category View

You will notice the tone of the app gets lighter and lighter as the user goes deeper into their shopping experience. In this view, the user is presented with a thumbnail format of the product category, as well as breadcrumbs at the top where the user can easily jump back to the category. When the user taps on a thumbnail, a new view opens up—product detail view. I opted to have an entirely new view as opposed to modal so the user can focus on the individual product and easily jump back by tapping “back”.

Product Detail View

The product detail view shows the main image of the product as well as tappable thumbnails of alternate views, which would replace the main image upon tap. There is a slide drawer at the bottom for the user to see different color and pattern types. Since some products have a lot, the user will be presented with just one row until she taps “more”. When tapped, the slide drawer will move up and reveal all the different color and pattern taps. Tapping the button again will collapse the drawer.

You will notice in my version that there is no shopping quantity, size and other ordering elements. The reason is because that is too much of a web experience, where user goes over with a mouse and clicks on each form field. Instead, the user will tap “add to bag” and be present with a custom interface to select quantity, color/pattern and size.

Overall, this re-design presented a lot of design challenges in creating a sense of focus for the app while maintaining the branding and look that Victoria’s Secret is notorious for.

If there are any iPad or iPhone apps you’d like to see re-imagined, let me know and I’ll add it to the series!

Note: This is my own work and has no direct affiliation with Victoria’s Secret.

David Hoang is a Product Design leader at One Medical and founder of The Rock Tumbler Collective. His focus is on developing products for mobile platforms and emerging technology.