Role- UX Researcher | UX Designer | UI Designer
Tools- Sketch, MTurk, Google Docs, Whimsical.io, Flinto, Storyboardthat.com
Have you ever went shopping for food or personal care products and as you started reading the ingredients you came across terms that sounded gibberish to you? Have you caught yourself looking up those ingredients in the middle of the store? Have you wondered about their impacts on your body and the environment? Wonder no more, Alma app is here to solve the mystery for you!
Landing page
Users can login if they have previously created an account or create a new account. Users also have the option to skip straight to the content if they want to check out the app before they sign up or if they simply want to do a quick check for a product.
Creating an account
Users have the option to sign up using their email and password. For a quick signup, users can login using Facebook.
Profile Page
Users are encouraged to create an account to personalize the app. They can set their own preferences of diet restrictions, allergy considerations, or brands they are interested in.
Homepage
Products are organized in categories, which is one of three ways for users to find a product. The 'Recommended Products' section is based on search history for returning users and serves as trending products for new users and app visitors.
Search & Filter
While searching, users have the ability to filter the product list results by categories, diet & lifestyle, allergy restrictions, brand, or by price. The filter is a great feature for new users, app visitors, and for users who have created a profile but have a temporary criteria preference.
Barcode Scan
The barcode scan is one of the main features of the app. Users can take a picture of the barcode or they can enter it manually to get information related to the product.
Barcode Scan Result
Product information will appear once the barcode is scanned. The first page on the left shows two features: the question mark icon and criteria violation notification. The question mark icon is used to flag a questionable ingredient and allows users to explore the ingredient further. The criteria violation notification shows up when the product scanned does not fit the preferences that the user has set in their profile. The middle screen shows the ingredients that don't fit the user's criteria after clicking on the criteria violation notification. The page also shows alternative products that fit the user's needs. Finally, the page on the right shows information about a selected ingredient. It shows the usage of this ingredient and its health impacts. The page also shows products that don't contain that ingredient if it poses health risks.
Product Information
Product information is the most important part of the app. Users can view product ingredients, view stores that carry the product and compare prices, view related products, or find more information about the brand.
Favorites
Users can add their products to the favorites page and quickly adjust it by a simple click. This page can also serve as a shopping list for users.