Project Overview

• Problem: Confusing navigation, cluttered menus, & weak brand identity reduce product sales.
• Contribution: Conducted user research on Gen Z, Millennial, & older adult groups who purchase coffee products online. Created a strong brand identity, designed a customer focused UI, & developed the front-end with HTML, CSS, & JS code.
• Contraints: Creating a brand identity that resonates with Gen-Z & Millennial customers; developing back-end code for full functionality.
• Outcome: Developed brand identity & designed the UI to enhance customer experience.

Design Question

How can the design of CaffeineClicks user interface enhance the coffee-shopping experience by balancing modern aesthetics, intuitive navigation, and personalized recommendations?

Research

While conducting research for this project, I browsed through the web to find quantitative data and statistical information on midterm voters. I also explored various community forums to ask coffee enthusiasts about their online shopping experiences with competitor brands. Below are some key statistics I found.

Users

Sarah wants consistently flavorful coffee that fits her taste preferences. She’s always eager to explore new, high-quality coffee varieties and enjoys the comfort of starting each day with a perfect, reliable brew. Carl seeks exceptional coffee beans that deliver a café-quality experience at home. He values a diverse selection of high-quality, personalized blends that elevate his brewing skills and offer unique flavors from around the world.

Brand

CaffeineClicks represents a modern, fun & hip brand style that resonates most with the Gen Z and Millennial market.

User Journey & Sitemap

For this project, my requirements were to code the home, products, subscriptions, coffee quiz, & cart pages.

Wireframes

User Interface

User Interactions

User Testing

• Use Case 1: On the Products screen, filter coffee by roast level & sort by newest arrivals.
• Use Case 2: Take the Coffee Quiz from the home screen, answer the three questions, & review the recommended product.
• Use Case 3: Explore the Subscriptions screen, watch the video describing the step-by-step subscription process.
• Use Case 4: On the Cart screen, adjust the quantity of an item, review the grand total, and explore the "Add to Order" section.
• Use Case 5: Open the Questions modal from any screen, type out a sample question you have.

Outcomes & Takeaways

• What I Achieved: I used quantitative & qualitative data to design and develop the front-end interface of a coffee e-commerce website for a business marketed primarily towards Gen Z & Millennial Americans.
• What I Learned: I learned how to plan, design, & develop the front-end interface of an e-commerce website while incorporating interactions that benefit the user experience of clients looking to purchase individual products or subscription services online.
• Experience Gained: I gained extensive experience in conducting user research & using it to enhance the digital presence of a coffee shop while implementing user interactions that builds brand loyalty, promotes brand identity, & increases sales.

UX/UI Work

Reality AI - Presentation Generator

An AI-powered tool designed to help educators create engaging, tailored slide presentations based on specific topics, grade levels, and educational objectives.

View

Reality AI - Educator Assistants

A central hub for educators to explore and select AI-powered assistants tailored to their needs.

View

Memory Maker Application

An app aimed to help increase Alzheimer's patients' memory strength, preserve memories and help caretakers.

View

VoteSource - Infographic Website

An infographic site that provides unbiased information to empower informed decisions and increase midterm election turnout.

View

Reality AI - Plagiarism Detector

Crafting the next-generation AI Integrity Dashboard for the Marvel AI Platform.

View