Nike app checkout experience redesign

Screenshot of Nike app:

My redesign:

Today I decided to take on the difficult task of attempting to improve the checkout experience of the Nike iOS app.

First of all I had to take stock of the screens and interactions on this page. It was very hard to find any flaws. And actually I don’t think there are any flaws per se - perhaps however there are some things that could be improved in terms of being creative, rather than fixing something. In other words rather than “solving a problem” we’re creating an opportunity to explore some options on how to improve this experience by being a little creative.

This exercise ended up being extremely detail oriented and particular. I had to find rationale for the most minor details and decisions such as font weight and grouping. I didn’t want to do anything without a rationale, and this exercise served to help understand the minds of the Nike team and what rationale they may have used while designing this experience.

On the left is the first screen I’ll be redesigning. While I don’t think there are any flaws per se - there are a couple areas I wanted to try exploring. First, can the product image take up the full width instead? I see that they have carefully blocked it into the left 3rd of the screen, but I wanted to try a full width image. The idea behind this is to see if the full width image would help push users over the edge in terms of convincing them to finish buying. It would remind them that yes this is what I want, and would help to encourage them that they’re making the right decision in pressing the buy button.

So  first of all I replaced Helvetica Neue with SF Pro — not because I have  an issue with Helvetica Neue or Nike’s decades long decision to use  this classic font — but because my computer seems to not product  Helvetica Neue in the same way the Nike app for iOS displays it. There  were issues with kerning and individual glyphs (the tail of the lower  case a) that seemed odd. Also there were only a few font weights.  Because SF Pro has more font weights and is more suited for screen  design, I opted for this font by Apple instead for now.

Secondly I created more space between the page title and the first image. I used  specifically 16px between those two which perceptually is the same as  24px to the left edge of the screen. The reason for that I believe is  because the descender of the “g” and the bounding box of that text box  displays that it’s 16px away but really from the bottom of the capital  “B” to the image it’s almost 24px.

Next is the most obvious change the large product image. I wanted to use  this chance to remind the user that they’re in fact buying the correct  product. It gives them the assurance that this is what they want and to  eliminate any last second hesitations, which a smaller image may or may  not give them. This isn’t based on any user study obviously as this is a  Daily UI shot, but it’s my conjecture that the larger product image  (since it’s a beautiful product photo) will help them feel confident  about this purchase.

Next is the product information, I left unchanged as left aligned right rag,  but left the entire space to the right empty. My design philosophy with  this page (whether correct or misguided who knows) was to create a more  spacious page that used more vertical scrolling height instead of  cramming information in horizontally and eliminating scroll. My  rationale behind this is that users have a lot of comfort in scrolling,  so creating more white space on this page may create a more beautiful  experience with minimal sacrifice due to scrolling.

Next was the quantity button. Now I admit this was difficult for me, and I’m  not certain I made an improvement — or if I actually made it worse. I  tried a few different options here but ultimately went with something  close to what Nike did by creating an invisible horizontal row as  they’ve done. But in my version placing it under the text with just a  few more pixels under the size information as the last piece of text in  the product description metadata.

My concern with this is how the bold text sandwiches in the grey text, and  then the next text is also bold in Shipping, creating an asymmetrical  pattern of bold — grey — bold — bold. It may be better to go bold — bold  — grey, bold — bold — grey, etc., to create a subconscious recognition  of harmonious symmetrical pattern recognition (like viewing the  mathematical patterns in flowers for example), could create a sense of  peacefulness. In any case this is a one day project so I’m leaving it  there for now.

Next is the shipping information. Now one area I felt could be improved in  the Nike app is how the shipping and pickup texts were sequentially bold  text which created a lack of cognitive chunking. Each bit of text felt  the need to be read sequentially rather than reading just the title and  skipping the grey bits — so that’s what I did here. By making part of it  grey and the active link black, I tried to create this effect to reduce  cognitive load / the need to read to understand.

For the Pickup button I created here the reason I did that was because I  wanted to discern the purpose of this button more than I felt was  happening in the Nike version. For the Nike version, I felt that by  having this as text right next to the Shipping text, it made it seem  equal in its status — but it isn’t. The shipping bit confirms that  shipping is currently selected, and tapping Pickup (Find a store) would  actually change the mode from one to another. So really it’s more of a  switching mode, and so for that reason I felt it deserved a different  visual display to communicate the idea that you’re about to change from  the current mode (delivery) to a new mode (pickup). Nike did a great job  on the overlay where they show these two side by side with icons, but  here on this page I thought this may deserve some kind of  differentiation. Whether it’s a button or not however, I could be open  to other ideas here.

Finally I introduced a shadow under the checkout and free shipping message bit.  The reason was actually not because the flat non-shadow version didn’t  work, but purely for the UI still shot purpose. Because if I used a flat  design here when it’s meant to scroll, the line would make it seem  misaligned. Because I’m using a shadow, it helps communicate that there  is a scroll below the static checkout button component.

Next I will be doing the overlay for submitting payment. Thanks for reading!