Joy Flowers - Ecommerce Project

The Beginning

At the start of this project I was given the option to choose from a list of briefs provided to us by General Assembly, or select an independently owned shop that is local to me, as long as they either had a website in need of improvement, or no website at all. After reading through the briefs provided I decided to work on behalf of a local business, a florist that I have personal experience using, I felt that this business suited the brief we were given very well. In person this florist has a very personable feel, with unique and interesting decor and gifts, something which is not translated in any way on our current website, where you are able to make online purchases of bouquets and other floral arrangements, with very little input or visual representation of the product.

The Current Website

The site has limited photos and at times, no visuals of our products, the process of buying a mother’s day bouquet is relatively straightforward as compared to other sites, however there is not option the filter by price until you have selected the item, there is also no indication of the size you would receive at that price.

Comparative Analysis

During competitive and comparative task analysis I was able to see the ways Bloom & Wild and Etsy had made the experience of purchasing a gift feel less like you are taking a risk, by creating a visually delightful website, with access to multiple reviews, as well as indications of popularity. However, when viewing a product on Bloom & Wild, an overlay appears rather than taking you to a product page, consequently in order to fit all the information you have to do a lot of scrolling, this is something I feel could be improved upon in my final design.

User Research Plan

In order to understand the current/past user experience when shopping for flowers online or in person, I created a user interview plan following the practice of firstly setting out my Goals and Assumptions, that would help me then identify the most illuminating questions. I conducted five user interviews both on Zoom and in person and recorded them with the participants permission, three of the participants had first hand experience buying flowers from the florist I used as inspiration for my brief, three participants also had experience buying flowers online.

The findings from these interviews provided me great insights, I transcribed the interviews and transferred each individual finding onto a post-it note, which I then grouped by trend. Reviewing these trends I was able to create ‘I statements’ that captured each important insight the trends gave us:

Primary & Secondary Persona

This made the process of discovering our Primary and Secondary Persona feel very grounded, as I was able to pull from the findings directly, the Primary Persona is Maria, she buys flowers at the local florist for special occasions, she doesn’t mind spending more money with a local business, but in return she expects the quality the be better, and the buying experience to feel personal, as including the favourite colour in the bouquet or even a favourite flower is something that Maria feels is important.

The Primary Persona

The Secondary Persona

A couple of the findings did not match this persona which is how our second persona Mark was discovered, Mark also likes to buy flowers at his local florist for special occasions, but other than price (which is also an important factor in Maria’s buying behaviours), he wanted to feel confident that the bouquet he was purchasing was appropriate for the occasion, opting to put his trust in the florist to make that call and guide his choices.

I began to consider therefore how might we make Maria’s experience buying online feel personal, while also giving Mark the guidance he needs to feel great about his choices when buying flowers for his loved ones, for this ideating phase I referred to the sites used during competitive and comparative task analysis, seeing how they tackled the challenges users faced around trust and personalisation, it was during this process that the idea to group bouquets by occasions/similar scenarios emerged, for this to work well I would need to identify what titles would be the most sense to the user, to ensure the process of finding the right bouquet was as easy as possible.

Card Sorting

So to identify this I did a card sorting exercise using Optimal Workshop, bouquets unlike other items are open for interpretation when it comes to which is appropriate for a date versus a sick friend, this is the expertise of the florist themselves, for this reason I decided to focus on creating the best possible framework that they themselves could then use and organise by uploading their bouquets under whatever heading/headings it best suited in their professional opinion. So for my card sort I wrote a list of 22 different scenarios in which a person may decide to buy flowers, examples include:

• Mum’s birthday

• Friend’s Dog passes

• Going on a date

• Boss has a baby

I found 9 participants who had experience either buying flowers online, or visiting the florist I had chosen for my brief, one participant had experienced both. It was an open card sort where I asked the 9 participants to group the cards and then name the groupings themselves. 7 clear categories emerged while viewing the similarity matrix:

• Birthday

• Celebration

• Romantic

• Wedding

• Thank You

• Just Because

I decided 6 of these could work as part of a drop down menu, while ‘Wedding’ was conventionally its own page, where customers can view past weddings the florist has done and contact them directly for a discussion and quote.

This helped me begin forming an improved navigation of the website, besides a drop down itemising the occasions, I settled upon a filter navigation on the product pages, where users can filter price as well as occasion.

Sketch

After researching and mapping out the desired navigation, I began sketching the wireframes of my checkout flow. Using competitor and comparative websites as inspiration.

Lofi Wireframes

I moved then onto creating low-fidelity wireframes which I could prototype, testing my navigational structure by setting out tasks for my users to fulfil:

• Find a bouquet for a birthday

• Filter for bouquets below £30

• Filter for yellows bouquets

• Add the bouquet to the basket

• Proceed to your basket

• Add a gift to the basket

• Return to the home page

All Critical Feedback

(These are thoughts and opinions expressed by one or more users)

• Thought they should look at gifts first to find options for a birthday.

• Wanted to adjust price range first.

• Expects to see the price on each product card when hovering.

• Wants to see a size description on the product page.

• Expects to see multiple photos for a product.

• Wants to see a basket summary at beginning of the checkout.

• Expects more delivery options.

• Clearer labelling that the details are of the recipient and not the buyer.

• Expected to see ‘sign in with google’ as the top option due to the colour and regular convention.

• Wants a clear field for the message besides the ‘To’ and ‘From’ sections.

• Would expect to see all the products in a summary on this page. (final step in checkout)

• Would like a word count on the Card Message section.

• Would expect the chance to choose what card you would like to send - photos of the designs on the back.

• Was unsure how to navigate home and would prefer a Home button.

Out of this feedback I was able to identify the insights I could address in my iterations before creating a high fidelity wireframe: 

• Expects to see the price on each product card when hovering.

• Wants to see a basket summary at the beginning of the checkout.

• Expects to see multiple photos for a product.

• Clearer labelling that the details are of the recipient and not the buyer.

• Would expect to see all the products in a summary on this page. (final step in checkout)

• Would expect the chance to choose what card you would like to send (Colour/Design)

Before creating my high fidelity wireframe I set about making those changes and creating the functioning components I would need to demonstrate how I want the website to work:

• Dropdown menu with ‘while hovering’ feature

• Product card with ‘while hovering’ feature

• Product card with multiple photos, clickable

• Scrollable, clickable filter

• Video on product page

• Scrollable review carousel

It was also important for me to emphasise the local aspect of this business, by reminding users they could contact directly for further personalisation, as well as putting a box before checkout for any notes to the florist.

Components

Style Guide

For colour scheme inspiration I looked at Dribbble as well as drawing colours from a photo provided to me by my cousin who works professionally as a florist, I felt the light and deep shades of pink evoked joy as well as passion and affection, opting at first for a bright pink, I later changed it to a much darker red/pink after doing an accessibility assessment.

From the research it was clear users opted to buy from independent florists mainly for special occasions, consequently the site should represent luxury as well as communicate the local/independant nature of the shop.

For Typography I wanted to communicate the hands-on, personal nature of this business, by using a handwritten font - Beth Ellen, as though one of the local florists themselves has signed it specially, on top of this I made the Headers a serif font - Taviraj, for a classic feel, and the body font a san serif - Lato, for sleekness and legibility.

Final Thoughts

I was satisfied that the end result addressed accessibility concerns, delivered on the passion, joy, softness and luxury feel that it was intended to have.

In order to address the local and independent aspect of this business I created a section labelled ‘The personal touch’ where I featured a video, showing a local florist making a beautiful bouquet by hand, alongside a message informing the user that if they couldn’t see exactly what they wanted they could contact the shop directly. This was a particularly important way of highlighting the differences in service you can receive from an independent like Joy Flowers versus a bigger store online, and why it’s worth paying a little extra.

Key Learnings

My key takeaways from this project are:

• Let personas lead the way: Coming back to the primary and secondary persona needs and goals throughout this project was extremely valuable, knowing what Maria and Mark would need the site to provide for the optimal experience, I was given very clear direction by them and consequently, was able to use my creativity to address the ‘jobs to be done’.

• Components are magical building blocks: Once created, I was able to use and adapt the components to create a cohesive site with less unnecessary work, this not only saved me time but allowed me time to be more creative with layout and interactions.

• I love prototyping: I love the ability to demonstrate how you want the user to experience your design, creating while hovering functions, utilising smart animation to show how filtering would work, I am extremely interested in growing my skills in this area.