skinscope ios app - process & annotated designs

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




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 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.


window.


option.


window and filter the recommended products.

18

Product OverviewThe Product Overview screen gives the user some basic information about the selected product.


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 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.


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.


window.


option.


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.



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.


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.


window.


option.


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.


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.



Swiping Right will take the user back to the

Ingredient Analysis screen (page 23).



28

WishlistThe Wishlist screen displays all the products that the user has added to their wishlist.




filter the wishlist by product type (page 28).

29

Filtered WishlistThe modal window allows the user to filter the wishlist by product type.


window.


option.


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).


filter the blacklist by rating (page 30).

31

Filtered BlacklistThe modal window allows the user to filter the blacklist by ingredient rating.


window.


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.


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.


back to the Profile screen (page 33).

