‍

For this challenge, I was instructed to deliver a mockup for a coffee roasting company which prides itself in offering premium coffee and which is considering opening a café. I was to include a brief description and design rationale with my image.

‍

‍

The Kickoff

I started this design challenge by doing some light research. To find a little inspiration, I broke down the responsive web designs of independent coffee roasters, restaurants, and other such businesses. I collected the designs which seemed to offer the most intuitive architecture and content strategy.

Next, I sketched out several sloppy wireframes and digitized them. My final design iteration is a combination which I felt allowed for the smoothest experience.

‍

My Design

I took that final wireframe and made it pretty! What you see below is the second half of my deliverables package.

I wanted to blow them away, so I included the following:

• my wireframes (above)
• a mobile version of my design
• a simple style guide
• two browser views to display sticky features

‍

‍

I feel this design offers a smooth design for the following reasons:

1. The menu is neatly tucked away. The user’s cart can be found within it. The copy on the Hero allows for LaunchPad Coffee Roasters to feature whatever photo and preferred news—say, the grand opening of their café or any news products or offers. The announcement card neatly leads into the the next section. It could include a gentle scroll animation.
2. The Shop module allows users to browse featured products, add them to their cart in whatever quantity, and view all products. As displayed in the second item of the third column of this page, the shop header and button stick to the user’s screen as he/she scrolls.
3. To encourage sales, I made sure that the About module draws attention to the sourcing of LPCR’s coffee, and the Process module breaks down LPCR’s roasting practices. As seen in the third item of column three, the Process module, the main copy and button stick to the screen as the user scrolls.
4. The Café module would offer basic info—like hours and location—and it could feature Instagram photos. Lastly, the Footer allows users to access other social media, sign up for a newsletter, or review the menu, legal info, etc.
5. I aimed to select clean, straightforwards photos with bold colors to elicit a favorable response from viewers. To compliment the photos, I kept the lines of my design straight, and its colors attractive yet understated. Next, I applied the same font which appears on the company’s site for the mockup's main copy, and I selected a serif for primary headers to create visual variety.

Conclusion

It was a lot of fun doing this design challenge, and I was pretty excited to deliver this package. Feel free to let me know what you think!