a website for small business owners in the floral design ... · photo-realistic graphic features....

Judith Etienne

mybouquet designsA website for small business owners in the floral design wedding industry providing online consultation service

that saves clients time and money.

2 MyBouquet Designs Judith Etienne

ConceptObjective The goal of Mybouquet Designs is to implement a website for small business owners in the floral design wedding industry. Users will be able to filter the menu selection by their preferences and visually design their virtual bouquet. In regards to the wedding industry and project plan, this application will provide target users with online consultation, a floral price estimator, and provide a platform to create their bouquet ideas.

User Benefits Based on my research, the subject matter for this project is not very broad, as I have only come across one full website that allows users to design virtual 2-D bridal bouquets. My project compares in allowing and providing users a menu tool to design virtual bouquets. The core feature of my project is to provide users with a user-friendly interface and photo-realistic graphic features. In addition, the user will have preferences to share their designs with potential clients, floral wedding designers and friends via e-mail and popular social media engines such as Facebook and Twitter.

Execution I have created a timeline that will guide and allow for adequate research and preparation of the finish application. Technically, this project will be a challenge and require thorough understanding, development, and practice with back end functions as well as scripting languages. My project will initially be drafted and designed with Photoshop to create and execute the UX design. In building the user interface/interaction platform, Axure will be implemented in creating a real simulation of the application.

3Judith Etienne MyBouquet Designs

Target Audience

User Persona 1 Name: Jamison Age: 30 Location: New York

Motivation Jamison recently got engaged and is in the early stage of planning her wedding. She bought a couple of wedding magazines to guide her in creating the perfect day. Besides dress shops, reception venues, photographers, and bands she needs help finding the right floral designer to help create her wedding bouquets. Jamison cut clips from magazine of all the different flowers, colors and bouquet styles that inspire her. However, Jamison wants professional help and would like to reach out to a floral designer.

Problem• I want to communicate my wedding ideas and find

a floral designer that can create a virtual bride bouquet sample.

• I want a price estimate for the bride’s bouquet.

SolutionCreate an inspiration board and find local floral designers.

User Persona 2 Name: Betty Age: 44 Location: New York

Motivation Betty is a floral designer. Initially, when she meets with Clients the topic of conversation includes discussing the specific floral budget, wedding style, timeline for event, and delivery. The follow-up meeting usually involves Betty having bouquet- samplings ready for the clients to view or re-arrange until approve. Creating bouquet sampling involves travel time and availability of certain blossoms in season. Betty wants to find innovative ways to design and create samplings to reduce her travel time, finding blossoms, and cost.

Problem• Wants to reduce bouquet-sampling cost.• Want to increase traffic and direct customers to her floral

design web site.

SolutionCreate and upload bridal bouquet designs sampling for potential clients.


Competitive Analysis


Competitive Matrix

MYBOUQUET DESIGNSFEATURES

Excellent MyBouquet DesignsAverage Poor N/A

DESIGNED BY THE BRIDE

WEDDINGWIRE THE KNOT BRIDESMARTHA STEWART

WEDDINGS

Inspiration Board Builder Tool

Bouquet Design Builder Tool

Online ConsultationRequest/Inquiry

Local Floral Designer Vendors Search

Free AccountSubscription

Local Vendors AccountSubscription

Help and Documentation

COMPARATIVE MATRIX


Information Architecture

HOME Sign In Join

FloralDesignerVendors

DashboardAccountSettings

Inbox

MyBoards

MyFloralDesigners

VENDORHOME

Sign In Join

Dashboard

InboxMyBouquets PackageSelections

Storefront

MyPro�le

Portfolio

Reviews

Are You A Floral Designer?

AccountSettings

MatchingSearchCriteria

Conditional SelectorHeader Navigations User/Authenticated Pages Vendor/Authenticated Pages Result PagesKeys

InspirationBoards

InspirationBoards

BouquetCreator

User - VENDORUser - ENGAGED COUPLE


User Scenario and Flow ChartHOME

InspirationBoards

InspirationBoards

START

END

User account?

Y

N

Choose template

Search for photos

Save board

Name board

Drag&Dropphotos to board

Sign In form display

StartYour Board

User Email &Password

Search criteria input by the user

Board saves to

MyBoards

Scenario 1: Create Your First Inspiration BoardJamison recently got engaged and is in the early stage of planning her wedding. She bought a couple of wedding magazines to guide her in creating the perfect day. Jamison cut clips from magazine of all the different flowers, colors, and bouquet styles that inspire her.

1. Jamison finds Inspiration Boards from the Home page.2. She starts the board from Inspiration Boards page. 3. Jamison signin as herself. 4. She then names the board and chooses a template. 5. After, Jamison searches for photos based on her ideas

for her wedding bouquet. 6. Jamison drags and drops images to the board until it is

complete and saves board.



FloralDesignerVendors

START

END

User account?

Y

NSign In

form display

Enter location and search

Save vendors



Vendors saves to

MyFloralDesigners

ResultPages

ResultPages

Scenario 2: Find and Save Your Perfect Floral Designer Vendors Jamison gathered her wedding ideas. However, Jamison wants professional help and would like to reach out to a floral design to help create her wedding bouquet sample.

1. Jamison finds Floral Designer Vendors from the Home page.

2. She wants to find local floral designer vendors near her location.

3. Jamison browses through the vendor result pages. 4. She selects and saves three vendors that are best

suited for her.


User Scenario and Flow Chart

Inbox

START

END

Type subject

Type message

Request bouquet sampling

enter vendoremail address

Select board(s)

Request bouquet sampling

MyBoards

Scenario 3: Request Bouquet Sampling

Jamison created her mood board and found the perfect floral designer and would like to request a bouquet sampling of her ideas.

1. Jamison compose a new message from the Inbox page.2. She enters vendor email address, type the subject

matter and message. 3. Jamison attached the mood board file and click on

Request Bouquet Sampling button.



HOMEVENDOR

Dashboard

Dashboard

START

END

User account?

Y

N

Name bouquetChoose

bouquet details

Search for images

Save bouquet

Compose message

Send message

Create bouquet

Drag&Drop images to workspace

Sign In form display

Are You A Floral Designer?



Bouquet saves to

MyBouquets

Inbox

Scenario 4: Create and Send Bouquet Sampling to Client Betty is a floral designer. Initially, when she meets with a client the topic of conversation includes discussing the specific floral budget, wedding style, timeline for event, and delivery. The follow-up meetings usually involves for Betty to have bouquet-samplings ready for the clients to view or re-arrange until approve. Creating bouquet sampling involves travel time and availability of certain blossoms in season. Betty wants to find innovative ways to design and create samplings to reduce her travel time finding blossoms and cost.

1. Betty finds link to vendor page.2. She signs in as herself. 3. She then chooses to start a new bouquet. 4. Betty searches for flowers, greenery, and accessory

images based on Jamison’s submitted inspiration board wedding ideas.

5. Betty drags and drops images to the workspace until complete and saves bouquet.

6. Betty replies to an inquiry from Jamison a potential client who requested a bouquet sample and pricing.

7. Betty attaches the bouquet sample and pricing info and send message.


Wireframe1

2

4 5

3

6

1 2

4

5

3

6

1

2

4

5

3

6

1

2

4

5

3


Wireframe

1

2

4

5

3

1

2

4

5

3

6


Identity Guideline — Color & TypographyCOLOUR SPECIFICATIONS

Pantone 1635 CCMYK: 0/55/53/0Hex: ff9985

Pantone Black CCMYK: 0/0/0/100Hex: 000000

Pantone 7527 CCMYK: 13/12/18/0Hex: dad6cb

WhiteCMYK: 0/0/0/0Hex: ffffff

Josefin Sans Light

Goudy Oldstyle Regular

Goudy Oldstyle Italic

Goudy Oldstyle Bold

TYPEFACES

1234567890 !@£$%^&*()-=+ABCDEFGHIJKLMNOPQRSTUVWXYZ





Interface Design

1

2

4 5

3

6

1

2

4

5

3

6


Interface Design

1

2

4

5

3

6

1

2

4

5

3


Interface Design

1

2

4

5

3

1

2

4

5

3

6


Usability TestingOverview This report summarizes both pilot and user testing results and recommendations for MyBouquet Designs online prototype. The goals of these usability testings include establishing a baseline of user performance, validating user performance measures, and identifying potential design concerns to be addressed in order to improve the efficiency, productivity, and end-user satisfaction.

Usability Test Objectives – To determine design inconsistencies and usability problem

areas within the user interface and content areas. Potential sources of error may include:

– Navigation errors: failure to locate functions, excessive keystrokes to complete a function, failure to follow recommended screen flow.

– Presentation errors: failure to locate and properly act upon desired information in screens, selection errors due to labeling ambiguities.

– Control usage problems: improper tool bar or entry field usage.

– Exercise the application or web site under controlled test conditions with representative users. Data will be used to access whether usability goals regarding an effective, efficient, and well-received user interface have been achieved.

– Establish baseline user performance and user-satisfaction levels of the user interface for future usability evaluations.

Web Site for Testing www.mybouquetdesigns.com/thesis-v1

Target Users Specifically designed for brides, floral designer, and florist.

Number of Users Preferably 3-5

Recruiting Method AAU Usability Lab Recruiting

Test Dates/Times/ Location Pilot Test – 6/27/12 – 1-2:30 pm PT / 4-5:30 ETUser Test – 7/31/12 – 1-2 pm PT / 4-5 ETFacilitator and User: Kevin JohnsonAAU Usability Lab Online

Test Participants Recruited Students responsibilities will be to attempt to complete a set of representative task scenarios presented to them in as efficient and timely a manner as possible, and to provide feedback regarding the usability and acceptability of the user interface designs to friends or personal social media page.


Pilot Testing Report: RecommendationsThis session was not recorded. It was suggested for future pilot or testing that I could request for recording.

Overall Recommendations 1. Prototype – Finish building prototype so users will be able to

complete tasks.

2. Strengthen user-testing scenarios Example: Task 5: Share A Bouquet Design With Other Users After landing the job to design the bouquet from the bride, you, the floral designer wants to share the virtual bouquet design created to showcase your portfolio.

Suggestion: Task 5: Showcase Your Bouquet Design Now, you want to showcase your bouquet design work to Bouquet Gallery.

Also, to remove any references to titles such as “floral design-er” and to replace “my final thesis project” with “mybou-quet designs”.

3. Forms – Create “Completed Task” steps each task. – Facilitator Notes.

Home Page Recommendations – Include slideshow images.– Move top navigation header to the right side instead of

the left or prove a reason for it being on the left side.

– Consistency – “modify a design” should be renamed to “bouquet gallery and “start a new design” should be renamed to “bouquet creator” so that users don’t have to think but know what the buttons does.

Positive – Simple design. – Slideshow.

Bouquet Gallery Page Recommendations – Change the flower placeholder images with different images. – Add more options to the filter menu such as “mybouquet”

button for authenticated users and “show all” button for both anonymous and authenticated users.

– Add “favorite” or “follow” icon for each designed bouquet. – Add an “X” (close) button box for authenticated user to

delete their bouquets.

Bouquet Creator Page Recommendations – List Bouquet by name from A-Z.– Add “no option” to Blossom by Name selection

list menus. – Add price approximated and cart.– Change naming convention: “Blossom” to “Flower”.– Make visual: add color palette instead of color menu

list options.– Make all sharing icons visible in the tool bar area.– Add a pop-up menu alert when “Save” button is clicked.– Add favorite icon in the tool bar area.


First Testing Report: RecommendationsThis session was recorded and below is the link to the video meeting: https://live4.academyart.edu/p3cit6s16vs/

Overall Recommendations 1. Prototype – Finish building prototype so users will be able to

complete tasks.

2. User Account – Provide users with testing user name and password to

access authenticated functions such as MyBouquet page, Save, Share, and add to Favorite.

3. Logo – Link site logo back to home page.

Home Page Recommendations – Make “user guide” and “about” navigation menu spacing

consistent with the others.– Remove border from slideshow to give less a

wireframe impression.– Add images of newest or most popular bouquet.

Positive – Slideshow images added instead of placeholder images.

Bouquet Gallery Page Recommendations – Change typography font.– Make user bouquet name text larger than “user name”

and “date”.– Remove “reset” button.

– Add dynamic “new” message at the top of new bouquet design images.

Bouquet Creator Page Recommendations – Create hierarchy steps for creating a bouquet.– Add a progress steps bar above workspace to let user

know how the remaining steps for creating a bouquet.– Differentiate between the required and optional steps in

creating a bouquet.

MyBouquet Designs Getting key functions into code early, I quickly identify issues and within a few iterations I was able to improve the original design. I will be working on building the

site and beta test in the near future.

a website for small business owners in the floral design ... · photo-realistic graphic features....

Documents