Pricely

Problem

“I always take pictures of products and their prices in stores, but when I actually need them, I forget to check or can't find them. I want a better way to remember deals without relying on memory or scrolling through photos.” 

Solution

An app that allows users to:

• Upload product photos

• Add product name, price, store, and optional notes

• View and manage their entries in a clean, sortable list

• Include products to folders

• Toggle dark mode, export or import data, and reset their notes anytime

Everything is stored locally on the user’s device.

Design Process

I started with identifying user behavior patterns, especially how people shop and use their phones while doing so. I wanted to create something that felt familiar but solved a real problem I was experiencing. The interface draws inspiration from the Notes app that everyone already knows how to use, but I realized that tracking products needed something more visual. Unlike regular note apps where photos are just attachments, I made the product image the main focus of each card. This way, you can quickly scan through your saved items visually, which is super helpful when you're actually shopping and trying to remember what you saw.

I created personas and user flow diagram to guide these feature decisions and wireframed several versions of the interface in Figma, focusing on minimal steps per task. I wanted users to capture, organize, and manage product information through photography. The challenge was creating an intuitive interface that could handle complex data organization while maintaining the simplicity of a notes app experience. I also considered adding account creation and syncing features but removed them in favor of a completely local, login-free experience for simplicity and user control.

Aesthetically, I wanted the app to be clean, modern, and neutral with no harsh colors or clutter. I kept the interface accessible for both dark and light themes and have the buttons, fields, and icons large enough for tap interaction on smaller devices and mobile usability. Moreover, the navigation follows familiar mobile patterns with tab-based organization, allowing users to switch between product list and folder management. Thus, I learned a lot about mobile-first design and how important it is to consider our targets, and I also learned that design is never really 'done', like there's always room for improvement based on how people actually use your product.

UX Design Principles

From past courses and learned knowledge, I applied some UX design principles while creating this app. I made design decisions guided by usability and accessibility principles for users to have a smooth and intuitive experience.

For strong usability, I used Ben Shneiderman's Eight Golden Rules throughout my design process:

• Strive for consistency: Repeated design decisions were used across screens such as icon placements, layout structure, and navigation between product and folder views so users won't have to relearn anything.

• Offer informative feedback: Every action can result in immediate visual confirmation, like using modals for warnings before deleting products.

• Permit Easy Reversal of Actions: Canceling actions, retaking photos, and adding back arrows or cancel buttons reduce users' anxiety about mistakes.

• Support internal locus of control: The design allows users to take control of their data like organizing folder, exporting and importing data, clearing data, and switching between dark and light mode. 

• Reduce short-term memory load: Product cards display key info at a glance, so users don't need to remember what they entered earlier. Familiar patterns help users avoid remembering details from one screen to the next, reducing cognitive load. 

I also aim to make the interface inclusive as possible to support users with visual impairments, mobile device limitations, or those unfamiliar with tech by following basic WCAG 2.1 accessibility guidelines:

• High contrast text and buttons for both light and dark themes

• Touch-friendly button sizes for mobile users

• Iconography paired with text labels

• Simple, readable typography and clear information

Furthermore, since users will likely interact with this app on the go, I prioritized mobile usability:

• Interface designed for thumb navigation with actions, like the camera icon placed at the bottom for capturing or submitting product images

• Two main view: Products and Folders, accessible thru tabs

• Simplicity is the way with a clean list of products and less distractions. Actions accessible within one or two taps.

• Consistency displayed with headers, icons, themes uniform across screens. The tab bar and top app bar remain consistent to reduce cognitive load.

Figma

Future Features

The current version focuses on manual input, local storage, and usability. However, there are several features planned for future development:

• OCR Integration: Using Google Cloud Vision API, I plan to allow the app to automatically extract product names and prices directly from photos. This will make note-taking faster and reduce manual errors.

• Comparison Tab: Users will be able to compare saved prices across different stores or dates for the same product. This could include simple charts, color-coded savings, or a list of best deals.

• Cloud Sync: To support data persistence across devices, a future version will introduce Firebase authentication, enabling users to log in and access their notes from any device.

• Categories: Rather than generic tags, I plan to implement a set of categories such as "Dairy", "Snacks", "Produce", etc., to help users group and view products more easily.

• PWA Support: Eventually, I want the app to function as a Progressive Web App (PWA), meaning it can be installed on a phone and used like a mobile app, even offline.

Final Product

Project Demo