Max Coffee Beans — Nicole Andrews Design

Max Coffee Beans was a random generated ux/ui brief that I created to explore working in Figma and utilizing UI design principles.

Project Brief: Max Coffee Beans - your ideal customer is a woman named Mia. Mia is in their early 50s and is single. They have a masters degree and manage a large team. Mia has never bought anything like this before but she does enjoy supporting small businesses.

Task Flow: 1) Homepage/Marketing Page, 2) Product Features, 3) Checkout, and 4) Confirmation Page.

My first steps were creating low fidelity mockups to understand the basic flow of the project.

After receiving the UX/UI project brief and using the Task Flow supplied from the course project, I first created these low-fidelity mockups to explore layout possibilities and account for text copy.

Next, I developed the visual design of the Max Coffee Beans brand.

This included exploring colors for the brand that were high contrast and would have the most visibility for the ideal customer. For the logo and fonts, I wanted to use something that would appeal to the ideal customer and feel friendly enough yet bold to see at a distance. The coffee cup in the logo provides an obvious hint that the business sells coffee while the shape of the head of the cat in the cup is reminiscent of a coffee bean.

After creating the lofi mockup, I created the high fidelity mockup of what the mobile version of the site might look like.

I used the blue as the main primary color of the brand to reduce the number of colors as well as create the highest contrast with the white and darker purple text. I created the pages that I had originally mocked up in the low fidelity design.

During the project, I did see an opportunity to build out the checkout process more fully and decided to create designs for that process.

I followed the process and design layouts put forth by Shopify as they are an expert in the field of e-commerce websites and checkout workflows. Looking back, I think I would have preferred to put the email as one of the first steps with rest of the information rather than at the end on the payment screen. I also would have built a cart design similar to the order summary page featured above.