JCPenney
(Re)Designing a world-class experience for JCPenney's app.
Overview
JCPenney's mission is to ensure every shopping experience is worth the customer's time, money and effort. With this value proposition in mind, I set out to provide customers of this iconic brand with a world-class omnichannel shopping experience.
Role & Responsibilities
Mobile Apps UX Design Lead, Interaction Design, Visual Design, Motion Design, Illustration, Iconography, Content Startegy, Art Direction.
Background
Upon first joining the UX Team over at JCPenney, I was immediately drawn to the then outdated native apps. I embarked on a mission to overhaul and revamp the entire experience from the ground up. You can read more about that here, but back to what the case study.
After sitting down with the mobile apps' product owner and business analyst, we began to build a business case on why and how we should re-build both JCPenney's iOS and Android apps. Here is what we came up with.
Business Goals —
- Increase in conversion to 2%
- Increase user session times by 7%
- Decrease cart abandonment by 3 BPS
- Increase CSAT to a min of 3.5 stars
Design & Users Goals —
- Intuitive, Flexible, modular and scalable
- Simplified browse/checkout experience
- Remove any navigation confusion
- Checkout faster & more efficiently
Design & Users Goals —
- Intuitive, Flexible, modular and scalable
- Simplified browsing & checkout experience
- Remove any navigation confusion
- Checkout faster & more efficiently
Performance over features
In retail, it's quite common to pack too many features and too much information. After all, you're trying to sell your product, so this was no different at JCPenney. With this overload of features and capabilities came a sluggish, under-performing and overwhelming application.
So my first order of business, analyze and compartmentalize —
1. Hamburger menu - gone
2. Seven taps to product detail page - gone
3. step checkout gone, gone, gone!
Restructuring the navigation system, reducing the amount of "taps" to a single product, and allowing for a one-page checkout, allowed our apps to be faster in performance, more intuitive to use, and much more engaging.
The preliminary affinity mapping of the main navigation below highlights how crucial the transition from the traditional hamburger menu to the standard 5-tab navigation menu was for the apps. This simple tweak provided customers with ease and flexibility of use as they jump around the app in their experiences.
Cutomers could now browse for a particular item, jump to their bag to check their total, go to their account to see if they had any saved coupons or earned rewards to apply to this potential purchase, and right back to their product detail page.
A more immersive way to browse
Staying true to the JCPenney’s mission, I wanted to make sure our customer's shopping experience is worth their time and effort not ony in stores but also digitally. Whenever opening up the app, customers could find products they were looking for faster.
No more scrolling through endless marketing content before getting to the “Departments” section. No more having to hunt for recommended products. No more endless taps to get to a gallery of products you were searching for. I redesigned the home screen with the customer’s time and effort in mind.
Featured sales & promotions, browse/shop by department, view today’s coupons, browse though previously saved items, or by a curated list made just for you. Simply open the app, and all of the crucial shopping elements were now with in fingers reach.
User feedback & validation
When it came to the bottom of the funnel, the motto was “less is more.” Meanwhile most retailers adhere to the 3 step process: billing, shipping, (or vice versa) and finally review; we decided to go with a one page checkout approach, and boy did it work!
The one-page checkout process was simple —
- Add items to your empty bag
- Select/confirm billing & shipping
- Review savings and final pricing
- Place order and receive confirmation
By bringing the checkout experience right into the shopping bag, we allowed our customers to blaze right through the checkout experience. Needless to say, results were extremely positive. Conversion metrics were high, and other product owners and channels were now interested in pursuing such a progressive approach.
Iterate, & then iterate some more
When it comes to any design project and design thinking, there is nothing more crucial than iterative design. This project was no different. Every functionality and feature required multiple versions, explorations, and trials. Even though every pixel coded had to earn its spot, exploring different “blue sky” concepts was free of charge.
After the strategy had been "crossed" and all the KPIs had been "dotted" (Get it? Cross your Ts... Dot your Is? -- meh I tried, moving on) now came the burden opportunity to present our redesign concept to leadership for sponsorship.
Using my awesome Keynote skills, I put together the most "out there" presentation you can think of, featuring smoking phones and you’d never guess it, the King of Pop himself — long story so I won't go too much into that. My point being, I by delivering our key goals and objects in a fun, yet informative way, we were able to get buy in from our executive leadership.
The proof is always in the pudding
As much as a 'no-brainer' all this may sound in hindsight, this was definitely not the status quo back then. And so, our strategy was simple - build a completely separate 'beta' app to test out and validate our redesign concepts with real customers.
The results were extremely pleasing. The legacy app was 'sunset' after only 2 short months after the redesign beta launch, and my redesign was now responsible for a 4.5-star-rating, almost double increase in overall conversion, and a series of cultural change in innovation for the company.
$2.4M
redesign project
$2.4M
redesign project
40%↑
YoY conversion
11%↑
reward enrollment
16%↑
account linking
~300k
new downloads
115%↑
mobile-only comps
← Back to
All work
Up next →