Alex - Lead UX/UI Product Designer | Crafting Intuitive Interfaces for 73M+ Users Worldwide

Goal

Audience

Design Process

Overall process took me 6 full days from start to finish, until I had a production-ready Figma file.

Research

Problems & Solutions

I started with research about the general coffee-making process because I don't have my own coffee machine. The first question I asked myself about - What makes a coffee maker machine great (good vs bad features)? I use Notion as my default tool for overall process. Based on user research on the Internet I collected several findings and potential solutions for the very first time. Next, I Google how the machines work on a technical level. It could possibly useful for the maintenance alert feature or some other ideas. Then I summarized the whole information in ChatGPT and created a list of key features, that I want to implement in the first MVP design version of the app. Some features I marked as optional, because of tight deadlines

Usage context

Home & Office Environments

Make the entire flow of coffee brewing as quick as possible, due lack of time
Remote control of the coffee maker, including brewing, scheduling, and stopping
Detailed information about the machine's status, maintenance needs, and coffee statistics
Customizable settings for different types of coffee and user preferences
Notifications and alerts for brewing completion, maintenance needs, and more

I imagined using context to identify areas of the product that need to be taken into account, such as design and product features.

Usage context

Ideas

Instant pairing via Bluettoth;
Guest mode to skip registration process, and save customers time;
Maintenance guide with materials for common issues with a machine;
Coffee consuming analytics (for authorized users);
Coffee-beans purchase via Apple Pay to save customers time.
Remote Brewing: Start and stop brewing coffee remotely.
Customizable Coffee Profiles: Save and select different coffee recipes and preferences.
Machine Status and Maintenance: Real-time updates on the machine’s status and alerts for maintenance needs.
Coffee Statistics: Track usage statistics, such as the number of cups brewed, favorite recipes, and more.
Scheduling: Set schedules for automatic brewing at specific times.
Notifications: Alerts for brewing completion, low water levels, maintenance reminders, and software updates.
Integration with Smart Home Systems: Compatibility with platforms like Google Home, Alexa, and Apple HomeKit.

I have documented the following ideas that emerged from my research.

Prioritize

Then I prioritized my ideas by leveraging an Effort and Impact graph.

Metrics

User Engagement: Frequency of app usage and user interactions with different features;
Revenue via integrated shop
Customer Satisfaction: Feedback and ratings from users about the app and its features;
Brewing Statistics: Increase in the number of coffees brewed using remote features and custom profiles;
Maintenance Compliance: Reduction in machine breakdowns due to timely maintenance reminders;
Smart Home Integration Usage: Number of users connecting the app to smart home systems.

I have defined metrics to measure the success level of our product.

Information Architecture

Object Map

I use a helpful pattern which I call Object Map. I visualize objects and available actions with them, and metadata as well. This helps me to understand IA and content for each component in the interface.

Information Architecture

Wireframes & Userflow

Open in Figma

Then I created the very first version of Userflow. A little time after I decided to simplify navigation and merge several functions with two items: Home, and Shop

Information Architecture

Authorization

Throughout the whole task, I worked with several authorization functions, like SignUp, and LogIn with different methods. Finally, I decided to provide users choose between Guest mode and SignUp, because the first option saves them time.

Brand Design

Brand Name & Mission, Vision

Next, I went to brand design. The first thing I do with a brand - is define three keywords that will describe this brand. After that, I write the mission and vision. These will help me to understand visual style when I continue with UI design and copywriting

Brand Design

Typography

Brand Design

Product images

I generated several images in Midjournay and then upscaled them to visualize my vision of this product in the physical world.

Visual Style

Colors & References

To determine the visual design of a product, I start by selecting three adjectives that best describe the product. Based on this description, I create a basic color palette using the website https://uicolors.app/. Next, I search for suitable typography from Google Fonts or Fontshare. Finally, to define the UI style and find interesting UX patterns, I browse various apps and visual/UX references on Mobbin, or other resources.

Design Preview