Brief
Your ideal customer is a man named Stephen. Stephen is in their 70's and is married with children. They are a high school graduate and run a large company. Stephen lives in Columbus, has never bought anything similar to your product before, and likes to support small independent businesses.
Task Flow
Homepage > Product details > Checkout > Confirmation
photograph by Daria Trofimova
Wireframes
The initial wireframes explored the general page layout and navigation items on mobile. Later, the mobile navigation was significantly reduced to a cart and menu icon to remove visual clutter and consolidate actions, such as removing the home icon in favor of the logo sending the user back to the homepage.
Research and inspiration
Coffee shop and roastery websites I reviewed as part of my research included Trade, One Line, Redemption Roasters, and Onyx (if you're an August Burns Red fan, you gotta get that sexy mug). All of them had a page where the coffee options were presented in a grid format containing pictures, text about the coffee, and the price. One thing I noticed that was consistently lacking though was a quick add-to-cart button, which is useful for returning customers or a "surprise me" experience.
Instead of "Learn more" taking up additional real estate, it was integrated into a hover state on the image.
Button animation
Since the target audience didn't grow up with computers, I brought in some skeuomorphism to give the buttons a slight dimensional and tactile feel, while keeping the design clean and modern. To build the component in Figma, I created a frame inside of a frame, centering the text within the internal frame. The inside frame was made slightly smaller with a spread of 0 and a Y offset of 2. A 2px stroke was applied to the outer frame.
Building this made me nostalgic for old web design.
Tooltips
Coffee terminology can be overwhelming for first-time buyers. Stephen enjoys coffee each morning, but hasn't thought much about the quality difference between the Keurig machine coffee he gets at work and what he can experience at a local coffeehouse. It can be unclear what "light roast" or "single origin" mean, or how different growing environments and washing methods affect the product, let alone a first-time buyer understanding his palette enough to appreciate these variables. Adding tooltips based on context that appear on hover (and tap on mobile) would quickly close the knowledge gap to make for an easier buying decision.
How many times have you struggled to visualize the size of a product when making a purchase online? Maybe Stephen will return to buy a 5-pound bag of coffee for the office now.
