skinscope ios app - process & annotated designs
DESCRIPTION
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_PrototypeTRANSCRIPT
SkinScopeSkincare Analysis iOS Application
By Carla Crandall
2
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.
Context
3
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.
Problem
4
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.
Solution
5
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.
Audience
6
Preliminary Wireframes
Product Search Product Reviews Ingredient Analysis Similar Products
7
Preliminary Designs
8
Final Designs
9
Log InThis 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).
10
RegistrationIf 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).
11
MenuTapping 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.
12
HomeThe 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).
13
ScanThe 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).
14
Search ResultsThe 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 on a product will take the user to the
Product Overview screen (page 18).
Tapping the gear icon will create a modal
window that allows the user to filter the
search results by product rating (page 15).
15
Filtering Search ResultsThe 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.
16
Recommended ProductsThe 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 on a product will take the user to the
Product Overview screen (page 18).
Tapping the gear icon will create a modal
window that allows the user to filter the
products by product type (page 17).
17
Filter RecommendationsThe 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.
18
Product OverviewThe 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).
UnselectedState
SelectedState
Swiping left will take the user to the Reviews
Overview screen (page 19).
19
Reviews OverviewThe 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.
UnselectedState
SelectedState
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).
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).
20
Write a ReviewThe modal window allows the user to write a review for the selected product.
Tapping the X icon will dismiss the modal
window.
Tapping on the Submit button saves the user’s
review.
The label indicates how many more characters
the user can enter as part of their review.
21
ReviewsThe 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).
22
Filtered ReviewsThe 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.
23
Ingredient AnalysisThe 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).
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).
Tapping on the View Ingredients button will
take the user to the Ingredients List screen
(page 24).
Tapping on the Wishlist icon will add the
product to the Wishlist (page 28).
UnselectedState
SelectedState
24
Ingredients ListThe 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 on an ingredient will take the user to
the Ingredient Info screen (page 26).
Tapping the gear icon will allow the user to
filter ingredients by rating (page 25).
25
Filtered Ingredients ListThe 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.
26
Ingredient InfoThe 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).
Swiping Right and Left allows the user to
page through the Ingredient Info screens for
all of the product’s ingredients.
Tapping on the Blacklist icon will add the
ingredient to the Blacklist (page 30).
UnselectedState
SelectedState
27
Similar ProductsThe 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).
Swiping Right will take the user back to the
Ingredient Analysis screen (page 23).
Tapping on a product will take the user to the
Product Overview screen (page 18).
28
WishlistThe Wishlist screen displays all the products that the user has added to their wishlist.
Tapping on a product will take the user to the
Product Overview screen (page 18).
Tapping the gear icon will allow the user to
filter the wishlist by product type (page 28).
29
Filtered WishlistThe 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.
30
BlacklistThe Blacklist screen displays all the ingredients that the user has added to their blacklist.
Tapping on an ingredient will take the user to
the Ingredient Info screen (page 26).
Tapping the gear icon will allow the user to
filter the blacklist by rating (page 30).
31
Filtered BlacklistThe 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.
32
Blacklist WarningThe modal window warns the user when they are viewing a product that contains blacklisted ingredients.
Tapping the X icon will close the modal
window.
33
ProfileThe 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.
34
Reviewed ProductsThe 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).