Allow me to set the scene. Convicted stockbroker, Jordan Belfort, is trying to transform a room full of misfits into salesmen. Belfort shoves a pen underneath their noses, asking them to "sell him this pen". As each person takes the pen from him, they stumble through sales pitches "This is the best pen ever made"...
The last salesman takes the pen. "Write your name on this paper," he tells Belfort. Belfort, emptyhanded, looks befuddled. The salesman replies, "Well, you don't have a pen anymore. Supply and demand, bro."
-- Wolf of Wall Street (Film)
This scene in Wolf of Wall Street illustrates the fundamental selling point: that until a need is acknowledged (in this case, Belfort doesn't have a pen), a great product or service will go unnoticed. Thus, a product must address an urgent need.
In many ways, a product display page (PDP) acts very much as a salesperson. Yet without engaging in conversation, how can I, as a designer, create an interface that both discovers & meets a need?
For this design challenge, much inspired by this famous scene in Wolf of Wall Street, I decided to design a mobile product display page. It was only fitting, since I had spent the summer working at an e-commerce & lifestyle startup. I ultimately settled on a spoon-- with the intention of selling a mundane item as a luxury product. In addition, mobile web was the platform of choice, as statistics show that over 2 billion mobile devices will make some form of transaction by the end of 2017. (I also love designing for smaller screens, as it forces me to focus on surfacing the most important content.)
I. User Goals
In the spirit of good salesmanship, I started off this design challenge by understanding what a potential client would want. This included low level user research, where I asked friends to identify what was most important in terms of making an online shopping decision.
In order of importance, the common themes of prioritization across a quick polling of my friends (in order) were 1) item details 2) price 3) reviews 4) shipping.
II. Business Goals
Though user needs are important, balancing the (hypothetical) business goals were also incredibly important. Based on my hunches, the main goals of a business are to 1) increase conversion 2) increase average order value.
Who am I solving for and why?
For the sake of this exercise, I needed to create design constraints. I decided to design a screen for a mobile user, who was looking for a mulitfunctional spoon. This user wanted to know why this spoon was so great, and needed sufficient persuasion before they made a purchase. They would need to be able to glean the most important aspects of this product at a glance.
After developing a rudimentary understanding of the user needs and business goals, I continued to look at existing patterns for mobile PDPs. I've included screenshots of the most notable ones below.
Each of Amazon's mobile PDPs were over 7000 pixels in height, which led to an uncomfortable scrolling experience and a torrent of information, making it extremely difficult to sift through the information for the most important aspects. Though they used colors to differentiate the CTA from the rest, it was still lost in the mass of information.
Jet.com had slightly better hierarchy, though their policies were oftentimes confusing and led to a convoluted selection process. In addition, they had so many upselling items that it was near impossible to scroll to the bottom of the page.
Apple was the most minimalist of the three. With the relatively limited product line, Apple was able to pare down the info to only the bare bones, with the most important information at the top, and descriptions of the device. However, this is a unique case-- for a brand as strong as Apple, there was no need for selling people on the Macbook, as people usually have made up their minds about this purchase. Instead, Apple focused on delivering the best experience in picking out the perfect Macbook.
Below, I've included my final mockup. I chose to use horizontal scroll for product images & preview of reviews to avoid a lot of the pitfalls that both Amazon and Jet.com faced, with their seemingly infinite scroll towards the bottom. I chose to anchor the CTA to the bottom of the page, as this would prevent it from getting lost amongst the content. By cleaning up the information hierarchy, I hoped to address the pitfalls that both Amazon and Jet.com faced, but settle for a happy medium (as my brand isn't as well developed as Apple's) between the ultra-minimalistic and helpful descriptions.
This version has redlines and more closeups of how scroll components would work. Hover over the UI to see the grid system I utilized and pixel measurements.
I also took a stab at a rudimentary style guide-- one with strong typographic hierarchy, that could be extended as additional pages were built out. I chose dark hues with a stronger pink accent, so that it would be compliant with accessibility guidelines.
I did this entire project in Sketch, but if I had a bit more time, I would've liked to take this interaction into Framer to explore interaction design and motion a bit more. I would've also liked to flesh out additional flows-- including the reviews experience, since reviews heavily impact whether a customer buys a product. I based most of this project off of intuition and my past experience working in conversion & e-commerce, but if I were in a real world situation, I would've analyzed the data points as well as done more thorough user research to ground my design decisions. Happy to chat more about my low fidelity explorations and my design philosophy! Let's chat.