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.
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:
I selected a few key views to redesign and added my commentary below.
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.
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.
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”.
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.