Jennifer Story
PROJECT
Crayon (Smart Image Filter)
Color-based touchpad explorer for image editing
ROLE
UX, visual mockup, demo prototype
As a lead design, worked with project lead, project manager, SW engineers
DURATION
Design Research and development Jan ~ March 2022
Project Introduction
Create a new photo editing system and interface that can replace the current photo filter system in the Photo App of the mobile phone. New image filters enable users to generate their own filters based on the photo color.
-
Enhance the current photo filter interface for quickly exploring various filters
-
Provide an intuitive interface for users to generate their own infinite filters
-
The smooth transition across different filters
Ideas implemented in the current user behavior and interface
Utilize original image colors and users' most used device's behaviors and interface for the color selection
Idea 1: Generate its own color harmony from the image on mouse pad interface
-
Color picker generation based on image color distribution
-
Mouse pad behavior of dragging and selecting to browse filters
-
Bookmark to save changed images instantly, located on the color pad as mouse pad click behavior
Idea 2: Hue & Tone spectrum from image's primary colors
-
Color wheel or spectrum, including tone saturation
-
Dragging up and down for saturation of the color
-
Bookmark is located on the list of saved image thumbnails
-
3rd party filter still can be downloadable
Idea 3: Mix of image's theme colors with swatch interface
-
Color swatch based on theme-based color combination
Individual object selection by tapping
#Hash-tag
for the segmentation
Idea 4: Segmentation and Stylized filters
-
Auto-generate #hash-tag based on the image and selection of each object component.
-
Segmentation by tapping the area on the image or by selecting the tag
-
3rd-party style filters can be downloadable
Key features & design solutions
Auto-generated color pad interface
-
The color pad is automatically generated based on each image
-
Enable users to explore an infinite set of filters using the color-pad interface
-
The smooth transition and immediate viewing experience between color transition
Bookmark
-
Track and save user-generating filters
-
Use saved filters can be used in other images
#Tag segmentation for stylizing
-
Understand and detect object/scene/person and automatically generate hashtags for each image
-
Segmented by hashtag for stylizing the image
Wireframe
Overall user flow: integrated into current Samsung Gallery App
Flow for the 3rd-party filters installing within new filter system
Visual mockup
include below
-
Immediate image color correction by dragging on color-pad
-
Integrated into the current Samsung Gallery App for users' easier adaptation
-
Bookmarking color filter before saving as own filter
-
3rd party filter downloadable
-
Styler filter with indivisual selection by auto generated #tag
Working with engineers collaboratively to develop the final solution
Various design explorations influenced engineers to develop
-
ways of sorting color filters
-
reducing the latency of the color-changed images
-
generating color distribution in real-time
Technical Details (reference: the solution by engineers )
Original Photo
-
16 distinct filtered photos are corresponding to one (x,y) location on touchpad
-
Similar filters are closer in distance to ensure a smooth transition
-
Touchpad color at location (X,Y)=average color of the image at (X,Y)
1-3 seconds
User flow diagram
Force Directed graph (FDG) diagram (by engineers)
