Songporn Siangvisuth

Student ID#03097164

Web Design & New Media, Spring 2013

Presentation Date: May 10th, 2013 11.30AM

Area of emphasis: Technology

Thesis Introduction

• Life list = a list of species sighted and identified by a bird watcher or

naturalist over a lifetime. (dictionary.com)

• Life list of flowers• The mobile application helps identifying flowers• Community of people who are interested in flowers

Problem & Solution

Problem• Love flowers but don’t know

much about them.• Want to learn about them, but

don’t want to make an effort to learn.

• Being busy. Don’t have time to read tons of books.

Solution• The way to know kind of flower • Don’t need to know much

about botany nor agriculture.• Learn and enjoy flowers while

doing another activities.

Concept Video

Project overview

Technology Inspiration

Flora by Yen-Ling Kuo at the IAgents Lab of National Taiwan Universityhttp://agent.csie.ntu.edu.tw/~a33kuo/project.html

Competitors

Flower Pedia Project Noah Nature Gate

Competitive Analysis Matrix

Very goodPoor Moderate Good

Unique Position

• Not much academic knowledge• Flowers are not first priority in your life, but you are just curious.

Relaxing during learning about flowers• Apply image processing technology

Research & analysis

Concept Development

Flower encyclopedia Web Site.

Mobile application that helps identify flowers by using image recognition technology

Mobile application that helps you keep a record the flowers you like, and help you identify flowers by using image

recognition technology

Survey Conclusion

• 16 Participants, 14 females and 4 males• No one hates flowers.• Women do activities concerned to flowers more than men.• Most of people who like flower want to know about kinds of flowers.

Target Audiences

• Emphasis on women.• Ages 18 to 45• They love flowers and want to learn about them• Primary audiences are people who are not good in flower

identifying.• Secondary audiences are people who have the knowledge about

flower, but they want to connect to other people who like flowers as them.

Persona I

Amy, 33(Female)•Occupation: business analyst•Nationality: American•Status: Single, 0 kids•Place: San Francisco, CA USA•Hobby: hiking•Device: iPhone 4s

Scenario: While Amy is hiking, she sees an unfamiliar beautiful flower, and she wants to add the picture of it on her life list and identify by using Floralé.

Persona II

Lin, 22( Female)•Occupation: graduate student in Botany•Nationality: Chinese•Status: Single, 0 kid•Place: Berkeley, CA USA•Hobby: strolling in a park•Device: Samsung Galaxy S3

Scenario:She loves to look at flowers, because they make her feel relaxed. She also would like to see flowers from different places different via Floralé.

Project process

VisualDevelopment

Mood Board

VisualDevelopment

Logo

Application icons

(iOS & Android)

VisualDevelopment

Fonts

-Typekit by Adobe

-Google Web Fonts

Color palette

InformationArchitecture

Wireframes I

Wireframes II

Wireframes III

Wireframes IV

User Testing & Results

• Date: September 17th, 2012 to December 9th, 2012• Participants: 11• Place: Online-testing and AAU UX Lab

Problem 1 Having summary and activities bar before signing in do not make senses.

Old design New design

Problem 2 Participants got confused on menu bar; between “Add flower”, “Life list”, and “Encyclopedia” when they want to add a picture of flower.

Old design New design

Problem 3 Add button, “Identify it”, and “Identify later” is not clear.

Old design New design

Problem 4 Participants were not sure to go by “Identify more specific” and “Unidentified”.

Old design New design

Problem 5On Save page, Participants did not have no idea what they need to do in the first sight, until they scrolled down and see save. Some participant thought the task had been done

Old design New design

Technical Development

• Project Form: Functional prototype• Platform: Android4.0+, iOS6+ (in the future)• Browsers: Chrome mobile browser• Technologies:

– HTML5, CSS3(Webkit based)– JavaScript, jQuery 1.9 – PHP 5.2.17, MySQL 5.5.30

• Wireless connection: Wi-Fi(best), 4G

Technical Experiments

• Phone Gap– Slow, take time to load– Not support some CSS3– Cannot open PHP file

• Chrome mobile browser– Support CSS3– Support HTML5

Technical Experiments

• jQuery– Fast, stable performance – Works well with HTML5, CSS3, PHP and API.– Light weight– Has the function that interpret JSON data to arrays

Technical Experiments

• XML– Slower than JSON, if not much data– Complicated structure– Hard to convert to data that JavaScript can comply.

• JSON– Faster than XML, if there is not much data.– It is JavaScript, so it works well with jQuery– Easy command: $getJSON( );

Data Diagram

Data Diagram

Project demonstration

Conclusion

Next Steps

• Make all functions work • Study Android SDK and Object-C• Make it compatible to iPhone • Co-work with computer engineers to apply image recognition

technology to the application

Conclusion

• Problem…– Users want to know kinds of flowers, but don’t want to take a lot

of work to learn.

• Solve the problem…– Combine future technology with good design, both visual and UX.

• What I learn…– Design skills : graphic design, illustrations– User experiences: user testing, solve the UX problems– Technical terms: coding, web technology, mobile technology– Group environmental working

Thank you

Songporn Siangvisuth

Floralé