(Re)Designing a world-class mobile experience.
A case study of the redesign project for JCPenney’s Android and iOS mobile apps.
JCPenney is one of America’s largest apparel and home furnishings retailers. Its mission is to ensure every shopping experience is worth the customer's time, money and effort. With this value proposition in mind, we set out to completely redesign their mobile app experience from the ground up. The vision was simple; provide customers of this iconic brand a world-class omnichannel shopping experience.
Step 1: Creating and building a vision.
Upon first joining the UX Team over at JCPenney, I was immediately drawn to the then outdated native apps. The app featured old, surpassed design elements. Thus, 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. With the business, design, and user goals/objectives highlighted in this case study, here is what our team came up with.
Business Goals & Objectives—
- Increase in conversion to 2%
- Increase user session times by 7%
- Decrease cart abandonment by 3 bases points
- Increase overall CSAT from 2 to 4-1/2 start rating
Design/User Goals & Objectives —
- Flexible, modular and scalable
- Simplified browsing & checkout experience
- Implement ease of use making app more intuitive
- Remove any navigation confusion
- Eliminate unnecessary steps
Step 2: Giving users what they
In retail apps, it's quite common to pack too many features and too much information, this was no different at JCPenney. With this overload of features and capabilities came a sluggish, under-performing and overwhelming application.
After I analyzed and compartmentalized, it was time to act —
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.
1. Death to the Hamburger Menu
This preliminary affinity mapping of the main navigation highlights how crucial the transition from the traditional hamburger menu to the standard 5-tab navigation menu was for the apps.
At this point, apps such as Facebook and YouTube had just began transitioning from the hamburger to a 5-tab menu approach. This simple tweak provided customers with ease and flexibility to shop throughout the app from one point in the experience to the next.
Case in point – customers 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.
2. The Not-So “Magnificent Seven” Taps to Products
Staying true to the company's mission, we wanted to make sure our customer's shopping experience is worth their time and effort both in our stores and in our digital experience. 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.
3. Designing a Seamless & Frictionless Checkout Experience
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 —
1. Add items to your empty bag
2. Select/confirm billing & shipping
3. Review savings and final pricing
4. 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.
4. Iterate, 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.
Time and time again, we would run into various hurtles where the technology was simply not quite there yet to meet our designs. Thus, we would work through these previously unidentified barriers to our original plan, architecture an alternate solution within our technical constraints. Thus, building a close knit team that helped push each other further and harder.
Step 3: Pitching it to the Execs.
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. Point being, by presenting a clear plan of action based on solid research, we were able to get buy in from our executive leadership.
Step 4: The proof is 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.