A Start up' s outcome for transforming basic photos into artworks 

Download-on-the-App-Store-button.png
looong cover. without logojpg.jpg

Fade Away

02 | 2017

Role

UX and UI Design Intern

_______________________________

Duration

3 months

_______________________________

Tools

Adobe Photoshop, CorelDraw

Sketch, Zeplin

Steps

Understand

1

Observe

2

Point of View

3

Ideate

4

Prototype

5

Test

6

Project Brief

The Birth of a Startup!

 

Fade Away was the first attempt of ECCENTRIC group in order to create our startup. We decided to develop an entertainment application that could be able to transform a primary photo into a piece of art.

Why We Need Fade Away

We were going to create our own startup with a triple mobile application. Fade Away not only was an entertaining application that could make money for our startup, but it was also the first stage to gather the data for the second application. This app helped us to complete our raw data for future work.
 

Goals of Fade Away

goals.jpg

2

4

Development of design thinking process in the new fields and intangible products


Utilizing design thinking potential throughout the tech-based design projects

1

Combining common tools in design processes with design and software development method

3

Optimizing the application design and development process by the standard criteria
of market 

Optimizing the activities of the team based on design thinking

5

Software Development Life Cycle (SDLC)

In this cycle, we focused on delivering the product through an adaptive process swiftly and receiving continuous feedback from the users. 

Understand

Observe

Ideat

Prototype

Test

spiral life sycle.jpg

Point of view

Focus Group

This session took place with 9 persons who used similar applications to edit their photos and videos. Also, they were active users of social media

Picture2.jpg

Insights 

Throughout this session, participants mentioned various valuable info, which is shown as a Word Cloud 

"I look for new editing tools because I like changing the theme of my pictures before sharing them."

word cloud beefor edit .png

After a deep interview and the focus group session, we defined the Goal-Oriented personas based on the imaginary personas. 

photo_2021-01-11_19-44-22.jpg

She is a popular member of social media

 

  • More than 100,000 followers on Instagram

  • Use mobile phones, professional cameras 

  • Apply tools for changing light, color, contrast, sharpness, filters, and various effects, and shares them on Instagram.

  • Has several editing apps on her smartphone and tablet.

Hoori

Persona 2.jpg

He is very fond of traveling and hiking

Steve

  • Use his phone rather than a professional camera.

  • Uses only the features of the Instagram 

  • He thinks the only correction he should make to his image is light and color correction.

  • Not very familiar with computer software

pereira_patric.jpg

He is an creative artist and designer

Tom

 

 

  • Shares  his works on social media 

  • Takes pictures from the process of artwork creation

  • Use a limited number of applications.

  • High-quality photos lead to get better feedbacks.

After understanding the most important characteristics of our personas we defined the design criteria.

icons8-easy-50.png
icons8-camera-icon-with-face-50.png
icons8-image-gallery-50.png

Optimized for the majority of people

 

Simple appearance

Simple to use

Consider camera's quality

Provide tutorial

Editing tools

Access to the photo gallery

Save on photo gallery

Share on social media

Market Research Analysis

We studied many applications such as Prisma, Darkroom, VSCO, Snapseed, Retrica, FaceTune, Selfie, Focus, Font Candy, and Microsoft Selfie and evaluate them in terms of "tools", "subscription fee", and features. 

To understand the situation of our brand and find the gaps in the market, we have designed perceptual maps based on market research. 

#1 

Senario.jpg

Take a picture            Edits it in a timely manner      Share social media

#2 

Senario2.jpg

Take a picture            Edits it in a timely manner      Share social media

 with camera

A value map is a graph to express the relationship between the user and the product. This chart includes two parts: customers and value proposition.

Gains

Vlue proposition.png

Pain Relivers

Product

Gain Creators

Customer job(S)

  • Lack of  time

  • Lack of Patience

  • Financial limitation

  • Spending less time

  • Less time is needed to learn

  • High quality output

  • Medium-income employee

  • Freelancers

  • Influencers

  • Spending less time to do the process

  • Easy learning

  • High quality output

Pains

  • Application for smart phones

  • No need to spend a long time to work with 

  • No need to be patient to work with

  • Free

Gains

To take this test with the software, the desired categories were specified, and all the steps were provided to the users in a customizable form of cards. Users were asked to use the drag and drop method.

We found that "crop ratio" sharing on "Facebook and Instagram" and different "effects" are the most important features to the users.

B) Have you ever used photoshop as photo editing tool?"

A) Have you ever used photo editing application on your smartphone?

Yes (8 answers)

No (2 answers)

B) Have you ever used photoshop as photo editing tool?"

Yes (6 answers)

No (4 answers)

Gains

The following categories are designed based on the responses:

icons8-home-144.png
icons8-crop-96.png
icons8-edit-144.png
icons8-select-100 (1).png
icons8-share-144.png

2. Crop and resize

 Crop ratio, Re-cut, Rotate

1. Home

Camera, Gallery, About Us

 

3. Edit page

 Filter, Effect, Change layers, Intensity, Edit

4. Selection page

Re-select, Tutorial

5. Share page

 Instagram, Facebook, Share, Save

user flow.png

In order to assess the functionality of the application, we have designed the test with 3 main tasks. 

At the beginning of the test, users supposed

to answer 2 questions.

Suggestions

// Adding and eliminating control points

// Adding a precise ability of selecting with path

// Adding more effects

final pages.jpg
poster 3.jpg
poster 2.jpg
poster 1.jpg
poster.jpg
 
pages-cover.jpg
 
 
 
 
 

Scenarios

After determining the goal-oriented personas and investigating the market, we defined 2 scenarios for a photo editing application.

Value Proposition Map

Cart Sorting

Main Pages

In the next step, we started to ideate which is based on the categories suggested by users.

User Flow

Wire Frame

wire fram.jpg

UI Flow

After finding the user flow, considering user experience, sketching, and paper prototyping we designed the UI flow as below 

UI flow2.png

Visual Identity

Font

Buttons

As a means to emphasize on uniqueness of our application and facing budget limitations, we have designed the font ourselves instead of using existing fonts. 

Font.jpg
Editing page botton.jpg
camera page botton.jpg
Save and share botton.jpg
gallery and camera botton.jpg

Color

group 1.jpg

#Group 1

group 2.jpg

#Group 2

group 3.jpg

#Group 3

final group.jpg

Final Combination

Logo

logoo.png
Picture9.jpg

Final Pages (iPhone 6)

Protocol Analysis

 

It is needed to measure the app's desirability with qualitative methods. For this purpose, the protocol analysis method has been applied. We did the protocol analysis with 4 participants and gathered valuable feedbacks. A summary of the result is shown here:

Relative satisfaction with product performance

Helpful 

tutorial
 

Moderate 

level of simplicity 

of use
 

Uniqueness of he ability to select the desired area of the image and apply filters 

Having the new artistic features

Willing to introduce this app to family and friends

AdobeStock_285912430 (1) [Converted].png

#1 

You took a picture yesterday, you want to make some changes and share on Instagram, how do you do that?

Participants' first choice to do this task was Gallery. This indicates the respondents are familiar with the concept of the gallery as a place to access mobile photos.

#2 

Can you take a picture with your mobile phone and change its dimensions to a square?

The first choice of 70% of participants was Camera and 30% of them choose Gallery as the first choice.

#3 

If you took a photo that does not have enough light, how do you correct it?

The first choice of 60% of participants was Gallery, and 40% chose Camera as the first choice. This means that the first choice does not affect the task execution.

Usability Test

A) Have you ever used photo editing application on your smartphone?

Yes (9 answers)

No (1 answers)

B) Have you ever used photoshop as photo editing tool?"

Yes (5 answers)

No (5 answers)

Screen Shots

screen shots2.jpg

Commercial Posters

Business Canvas

covas.jpg
looong cover. without logojpg.jpg
looong cover. without logojpg.jpg

Tasks & Results

Tool diagram-subscription type.png

Tools -Subject Recognition Diagram

Tool- Subscription Type Diagram

Learning Curve- Image Editing Type Diagram

Subject recognition diagram.png
Tool diagram-subscription type.png
Learning curve diagram-image editing typ

Design Criteria

Goal-Oriented Personas