App Redesign Pitch
Bath & Body Works is a retail store that offers a variety of fragrance products from body care to candles and air fresheners.
With an ever-evolving catalog and limited time products that have their own unique branding, Bath & Body Works needs an app that is simple to use and that users remain familiar with, even when new promotional material is featured.
This redesign for the Bath & Body Works app aims to create an intuitive experience that lets users easily shop and explore new releases and offers while allowing Bath & Body Works to display their product line-specific promotions without breaking out of the app’s established layout and style.
UX Design
UI Design
Research
Figma
The homepage features a lot of promotional advertisements for users to explore, but it lacks hierarchy and organization, making it look like a social media feed that users scroll without any guidance or direction. Furthermore, there are formatting differences between buttons and inconsistencies in typography.
Add structure to the homepage by organizing content into cards under labeled sections. This allows for the homepage to be an organized central hub where users can easily explore offers, products, and new releases.
The hero section acts as a billboard for top-priority information such as the deal of the day and new releases. Using a card layout here gives each bit of promotional content its own real estate to be unique and use creative typography and colors that tailor to the product line or seasonal offer.
At the same time, being contained in cards keeps the designed graphics and typography from looking misplaced or detached from the corporate branding and overall hierarchy of the app.
This section is the go-to section for all current offers. It is simply designed and straight to the point.
Using this format of sectioning out content leaves room for seasonal or limited-time promotional content to live between the evergreen sections without looking out of place.
This section is similar to the Hero section, but the information shown here is secondary and less urgent.
For instance, it can include promos that were previously in the Hero section or upcoming product lines that are not yet available. It can also be a home for other Bath & Body Works offerings such as the fragrance quiz or the Scent-Scription program.
This section will have products that are displayed based on users’ previous searches or purchases.
It also has a call-to-action at the end that invites users to use the Favorites function.
The existing Shop page looks and feels like a website homepage that was shrunk down to fit a mobile screen. It also has a lot of promotional ads, making it difficult for users to browse and find actual products.
Simplify the shop page by moving the promotional material to the Homepage and using the Shop page to display all the product categories while leaving room at the top to highlight a current offer or new release. This makes it easy for users to browse products without having to dig through a bunch of advertisements.
The Love-it List is a fun idea, but the novelty of it can be unfamiliar to new users. Furthermore, the heart imagery is repeated in the navigation two times, once for the Love-it icon and once for the Wallet icon which can confuse users when navigating the app.
Make the Love-it feature more intuitive by breaking it out into two separate features: the Favorites page and a barcode scanner.
This page keeps the same purpose of saving favorited items, but its new name will be more indicative of its function.
The heart imagery is also removed from the Wallet icon so that all heart icons are exclusive to the Favorites feature.
Instead of having the barcode scanner nested in the Love-it feature, we will add a barcode scanner icon near the search bar.
In many other apps that offer barcode scanning (ex. Walmart, Target, Puma), that function lives at the top, accompanying the search function, making it intuitive for users to either search by text or barcode.
Under the “Picked for you” section on the homepage, there is a call-to-action button that explains the Favorites feature and page to users.
There will also be a footer on the Favorites page that invites users to add more to their list.
Throughout the process of redesigning this app, I looked at a lot of other apps to see what works and what doesn't work. Then, I took elements that I believe would improve the Bath & Body Works app and implemented them accordingly.
Most of the apps I picked to analyze either had great layouts or had a similar audience and products to Bath & Body Works. I analyzed apps such as Target, Walmart, Puma, Ulta, Sephora, and more. Check out some of those inspiration screens below!
Next, I created three semi-realistic personas of potential Bath & Body Works app users, each having specific app goals. I kept these personas in the back of my head when designing the app.
To have a clear vision of what to include on each page and how I wanted to name each page, I created a site map.
I also made paper wireframes to brainstorm ways I can organize the content. Paper wireframes allowed me to quickly jot down layout ideas without the friction or hindrance of a computer.
For this pitch, I wanted to restructure and redesign the important, most commonly accessed content, but I did not add in some of the nitty-gritty information such as that relating to the email newsletter, texts, returns, "Shop Your Way" and more.
I spent the majority of my time and energy on the Home, Shop, and Favorites pages because I thought those required the most help, but if I were to continue, I would definitely dig deeper into the remaining pages as well.
For this pitch, I worked by myself, but if I were to continue, I would love to get some user research and testing throughout the process as well as some critique!