SkinScope iOS App - Process & Annotated Designs
Upcoming SlideShare
Loading in...5
×
 

SkinScope iOS App - Process & Annotated Designs

on

  • 232 views

SkinScope is a native iOS app designed to help consumers quickly and easily research skincare products before purchasing. ...

SkinScope is a native iOS app designed to help consumers quickly and easily research skincare products before purchasing.

I am currently in the process of making this proof of concept a reality. View the github repo for a scaled back prototype:

https://github.com/CarlaCrandall/SkinScope_iOS_App_Prototype

Statistics

Views

Total Views
232
Views on SlideShare
200
Embed Views
32

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 32

https://www.behance.net 25
http://www.behance.net 7

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

SkinScope iOS App - Process & Annotated Designs SkinScope iOS App - Process & Annotated Designs Presentation Transcript

  • SkinScope Skincare Analysis iOS Application By Carla Crandall
  • Context Skincare enthusiasts do not trust marketing claims; They like to fully research a product before committing. This includes gathering opinions from real people who have tried the product, as well as analyzing each individual ingredient. 2
  • Problem There is no comprehensive resource that allows users to thoroughly research skincare products. Skincare enthusiasts often end up having to access multiple websites during the research process and compare their findings. This process is generally completed before a shopping trip, as it can be especially time consuming and frustrating to do on the spot while using a smart phone. 3
  • Solution Any easy to use app that allows users to find and write reviews for products, as well as receive a comprehensive analysis of the product’s ingredients. 4
  • Audience The audience would consist of skincare enthusiasts; primarily women in their 20’s and 30’s, who prefer to shop in-store rather than online. 5
  • Preliminary Wireframes Product Search Product Reviews Ingredient Analysis Similar Products 6
  • Preliminary Designs 7
  • Final Designs 8
  • Log In This is the first screen the user will see. After logging into the app for the first time, the user’s credentials will be saved and they will be automatically logged in whenever they open the app in the future. Tapping the login button takes the user to the Home screen (page 12). Tapping the “Create an Account” link takes the user to the Registration screen (page 10). 9
  • Registration If this is the first time the user has opened the app, they will be prompted to create an account. Having an account allows the user to leave reviews for products. Tapping the “Use your Facebook Info” link allows the user to pull their personal information into the app, instead of entering it manually. Tapping the User Photo icon allows the user to select an image from the camera roll or use the camera app to take a picture. Tapping the Submit button creates the user’s account and takes them to the Home screen (page 12). 10
  • Menu Tapping the Menu icon in the top left corner of every screen opens the app’s navigation menu. Clicking the Menu icon a second time will close the menu. Tapping a menu item will take the user to the corresponding screen: Home (page 12) Wishlist (page 28) Blacklist (page 30) Profile (page 33) The badges represent the number of products that have been wishlisted and the number of ingredients that have been blacklisted, respectively. 11
  • Home The home screen is the core of the app. It allows the user to search for skincare products to receive reviews and more information. Searching for a product will take the user to the Search Results screen (page 14). Tapping on the Scan button will take the user to the Scan screen (page 13). Tapping on a product will take the user to the Product Overview screen (page 18). Tapping on the More Recommendations button will take the user to the Recommended Products Screen (page 16). 12
  • Scan The Scan screen allows the user to use the camera to scan the barcode of a product to receive reviews and more information. Tapping the Back arrow will take the user back to the Home screen (page 12). 13
  • Search Results The Search Results screen displays the results for the search term. Tapping the arrow icon will take the user back to the Home screen (page 12). Tapping the gear icon will create a modal window that allows the user to filter the search results by product rating (page 15). Tapping on a product will take the user to the Product Overview screen (page 18). 14
  • Filtering Search Results The modal window allows the user to filter search results by product rating. Tapping the X icon will close the modal window. The green bar denotes the currently selected option. Tapping a filter option will close the modal window and filter the search results. 15
  • Recommended Products The Recommended Products screen shows a list of products that are recommended for the user’s skin type. Tapping the arrow icon will take the user back to the Home screen (page 12). Tapping the gear icon will create a modal window that allows the user to filter the products by product type (page 17). Tapping on a product will take the user to the Product Overview screen (page 18). 16
  • Filter Recommendations The modal window allows the user to filter the Product Recommendations by product type. Tapping the X icon will close the modal window. The green bar denotes the currently selected option. Tapping a filter option will close the modal window and filter the recommended products. 17
  • Product Overview The Product Overview screen gives the user some basic information about the selected product. Tapping the arrow icon will take the user back to the Search Results screen (page 14). Tapping on the Wishlist icon will add the product to the Wishlist (page 28). Unselected State Selected State Swiping left will take the user to the Reviews Overview screen (page 19). 18
  • Reviews Overview The Reviews Overview screen allows the user to read reviews, like/dislike the selected product, or write a review. Tapping the arrow icon will take the user back to the Search Results screen (page 14). Tapping on the Like and Dislike icons will record the user’s opinion on the product. Unselected State Selected State Tapping on the Compose icon will allow the user to write a review (page 20). Tapping on the More Reviews button will take the user to the Reviews screen (page 21). Swiping right will take the user back to the Product Overview screen (page 18). Swiping left will take the user to the Ingredient Analysis screen (page 23). 19
  • Write a Review The modal window allows the user to write a review for the selected product. Tapping the X icon will dismiss the modal window. The label indicates how many more characters the user can enter as part of their review. Tapping on the Submit button saves the user’s review. 20
  • Reviews The reviews screen allows the user to read all the reviews for the selected product. Tapping the arrow icon will take the user back to the Reviews Overview screen (page 19). Tapping on the gear icon will allow the user to filter reviews by skin type (page 22). 21
  • Filtered Reviews The modal window allows the user to filter reviews by the reviewer’s skin type. Tapping the X icon will close the modal window. The green bar denotes the currently selected option. Tapping a filter option will close the modal window and filter the reviews. 22
  • Ingredient Analysis The Ingredient Analysis screen gives the user a breakdown of the product’s ingredients, as well as a product rating. Tapping the arrow icon will take the user back to the Search Results screen (page 14). Tapping on the Wishlist icon will add the product to the Wishlist (page 28). Unselected State Selected State Tapping on the View Ingredients button will take the user to the Ingredients List screen (page 24). Swiping Right will take the user back to the Reviews Overview screen (page 19). Swiping left will take the user to the Similar Products screen (page 27). 23
  • Ingredients List The Ingredient List screen displays a list of the product’s ingredients, as well as their ratings, via an icon. Tapping the arrow icon will take the user back to the Ingredient Analysis screen (page 23). Tapping the gear icon will allow the user to filter ingredients by rating (page 25). Tapping on an ingredient will take the user to the Ingredient Info screen (page 26). 24
  • Filtered Ingredients List The modal window allows the user to filter the ingredients by rating. Tapping the X icon will close the modal window. The green bar denotes the currently selected option. Tapping a filter option will close the modal window and filter the ingredients. 25
  • Ingredient Info The Ingredient Info screen allows the user to find more information about a specific ingredient, as well as add that ingredient to their blacklist. Tapping the arrow icon will take the user back to the Ingredients List screen (page 24). Tapping on the Blacklist icon will add the ingredient to the Blacklist (page 30). Unselected State Selected State Swiping Right and Left allows the user to page through the Ingredient Info screens for all of the product’s ingredients. 26
  • Similar Products The Similar Products screen allows the user to find products that are similar to the selected product. Tapping the arrow icon will take the user back to the Search Results screen (page 14). Tapping on a product will take the user to the Product Overview screen (page 18). Swiping Right will take the user back to the Ingredient Analysis screen (page 23). 27
  • Wishlist The Wishlist screen displays all the products that the user has added to their wishlist. Tapping the gear icon will allow the user to filter the wishlist by product type (page 28). Tapping on a product will take the user to the Product Overview screen (page 18). 28
  • Filtered Wishlist The modal window allows the user to filter the wishlist by product type. Tapping the X icon will close the modal window. The green bar denotes the currently selected option. Tapping a filter option will close the modal window and filter the wishlist. 29
  • Blacklist The Blacklist screen displays all the ingredients that the user has added to their blacklist. Tapping the gear icon will allow the user to filter the blacklist by rating (page 30). Tapping on an ingredient will take the user to the Ingredient Info screen (page 26). 30
  • Filtered Blacklist The modal window allows the user to filter the blacklist by ingredient rating. Tapping the X icon will close the modal window. The green bar denotes the currently selected option. Tapping on a filter option will close the modal window and filter the blacklist. 31
  • Blacklist Warning The modal window warns the user when they are viewing a product that contains blacklisted ingredients. Tapping the X icon will close the modal window. 32
  • Profile The Profile screen allows the user to view basic information about their account history. Tapping on Reviewed Products, Liked Products, or Disliked Products takes the user to a screen that displays all the products that the user has reviewed, liked, or disliked, respectively (page 34). Tapping on Wishlisted Products and Blacklisted Ingredients will take the user to the Wishlist (page 28) and Blacklist (page 30) screens, respectively. 33
  • Reviewed Products The Reviewed Products screen allows the user to view all the products that they have written reviews for. The Liked Products and Disliked Products screens follow the same template. Tapping the arrow icon will take the user back to the Profile screen (page 33). Tapping on a product will take the user to the Product Overview screen (page 18). 34