UI Design for Photo App

Page 1

The UI Design for Photo APP Interaction Designer / Wei-Hsin Lai 05/2014 - 06/2014


Kodak Mosaics Concepts Photo mosaics creations

Brief:

This Application can help users to create their photo mosaics from personal or group photos. It also provides the options to print the mosaics or make as a photo product.

Brainstorming Phase

UI Concept

Main Menu (Option 1)

Home Screen

Make a Mosaic Timeline

Main Menu (Option 2)


Select Pictures

Function Menu

Searching by categories, words, or pictures.

Searching by catalog Selecting one catalog from the top menu.

App NotiďŹ cation

Searching by image Dragging one image to the search bar.

NotiďŹ cation Menu

Searching by image Showing the related elements of the key image in the search bar, such as colors or face features.


Image Stock Navigation Concepts Image category & Searching

Brief:

When people make photo products, such as wall art, they may select some images from the image stock in the APP. These concepts aimed to discover the navigation methods for people to search images easily.

Brainstorming Phase

UI Concept Presentation Concept 1

Concept 2

The Wall Canvas Display

T-Mobile

4:55 PM

The theme on grouping

40%

T-Mobile

Imagestock

Travel 1655

Travel

Animal

Party

Sport

851

856

Using random images to show the content of the category, like a wall canvas.

40%

Imagestock

1655

Animal

4:55 PM

People 2274

3527

1956

Art

1789

Using square darkened images as the catalog backgrounds.


Concept 3

Image Searching Features

1

2

T-Mobile

4:55 PM

40%

3

T-Mobile

Imagestock

4:55 PM

40%

4

T-Mobile

Imagestock

4:55 PM

40%

T-Mobile

Imagestock

4:55 PM

40%

Imagestock Puppy

Animal

Travel

People

Party

Sport

Art

Searching by categories, words, or pictures.

Animal

Travel

People

Party

Sport

Art

Searching by catalog Selecting one catalog from the top menu.

Animal

Travel

People

Party

Sport

Art

Searching by image Dragging one image to the search bar.

Animal

Travel

People

Party

Searching by image Showing the related elements of the key image in the search bar, such as colors or face features.


Marketplace Navigation Concepts Photo product navigation

Brief:

From the Kodak Marketplace, users can review and choose dierent photo products, such as wall arts, mugs, or other personalized creations. The focus of these concepts was to think of friendly and appealing navigation interface.

Brainstorming Phase

UI Concept Presentation Concept 1

Hero photo & Horizontal scroll

T-Mobile

4:55 PM

40%

T-Mobile

Marketplace

4:55 PM

40%

Marketplace

Wall Art

Wall Art

all Art

Luggage Tag

iPhone Case

Cube

Comic Book

Cube Note

Cup

Wall Art

t Book

Comic Book

Calendar

Orna

Greeting Card

Luggage Tag

Notebook

Comic Book

Version 1: Users can scroll the thumbnails underneath to review products.

Version 2: Dierent from version 1, the underneath part are product icons.


Concept 2

Concept 3

Vertical scroll & Section enlarge

T-Mobile

4:55 PM

Canvas

40%

Desktop view menu

T-Mobile

4:55 PM

Marketplace

Wall Art

T-Mobile

Wall Art

4:55 PM

40%

T-Mobile

4:55 PM

Marketplace

Marketplace

Cube Note

Coaster

40%

Coaster

40%

Marketplace

Post Card

Post Card

Noteb

ook

Noteb

ook

Luggage Tag

iPhone Case

Luggage Tag

iPhone Case

Magnet

iPhone Comic Book

Calendar

Comic Book

Note Pad

Case

Luggage Tag

Calendar

Version 1: When scrolling the category icons down, the icons would be enlarged. Also, the four centered product catalogs would show the thumbnails.

Ornament

Frint

Version 2: Dierent from version 1, all the product catalogs are thumbnails.

Case

iPhone

r

Cup

Note Pad Stationery

Coaste Ornament

Magnet

Stationery

Luggage Tag

Mug

Version 1: The products are shown as on the top of the desk. The wheel underneath could switch to another product catalog.

r

Coaste

Mug

Version 2: Dierent from version 1, the menu is in the center for easy navigation.


Concept 4

Concept 5

Square icon menu

Collapse Menu

1

2

T-Mobile

4:55 PM

40%

T-Mobile

4:55 PM

40%

T-Mobile

Marketplace

Marketplace

4:55 PM

40%

Marketplace

Comic Book Wall Art

Coaster

Canvas

Wall Art

Comic Book

Cube Note

Cup

Comic Book

Calendar Wall Art Canvas

Starting at $12.99 Create a beautiful Canvas Print that will stand the test of time. Greeting Card

Luggage Tag

Notebook

iPhone Case

Prints

Pillow

Coaster

Luggage Tag

Cup

Ornament

Calendar

Mouse Pad

Cube Note

Prints

Notebook

The square icons represent dierent product categories.

Greeting Card

When clicking one icon, the selected catalog would be enlarged and show product description.

iPhone Case

The collapse menu could be scrolled vertically and opened when clicking.


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.