top of page

Expanding Customer Reach  via eCommerce

Creating an eCommerce web process to optimise the consumer's online browsing and shopping experience as well as expanding Flowers by Marilyn's business reach to drive sales.

CLIENT

Flowers By Marilyn 

(General Assembly Mock Project) 

MY ROLE

Co-led team of 5 UX Designers,

UX Research,

Ideation and prototyping

TOOLS

Figma, Fijam, Slack, Zoom, Marvel

DURATION

2 week design sprint

flowersby marilyn.png

INTRODUCTION

Living in an increasingly digital world, businesses need to keep up with consumer trends. In particular, there is an ever growing need for small businesses that have traditionally valued in person interactions to expand their services online. Our client, Flowers by Marilyn, a busy florist located in the outskirts of Melbourne CBD is a perfect example of this.

 

With an online website but no eCommerce process, they are missing out on capitalising on the benefits of an online shop that can allow them to expand their reach to new customers. With this in mind, my team and I were tasked to design a mid-fidelity eCommerce website that would allow our client to display and sell their uniquely curated and high quality products while maintaining their essence and identity as a small local business.

INTERVIEWS | WHAT ARE OUR USERS SAYING?

Conducting 50 user interviews, 2 contextual inquiries, and 3 florist business owner interviews.

Before interviewing users, we developed a discussion guide to understand user needs and pain points when ordering flowers online, as well as industry best practices. We brainstormed initial assumptions to validate or disprove through user research. Our interview guide included opening questions about recent experiences, thoughts on buying flowers, reasons for buying, and frequency of purchases. We then asked specific 'why' questions to uncover user motivations.

​

After synthesising our findings via affinity mapping, we were able to pinpoint the primary needs, desires, and frustrations that users experienced. 

From our user interviews, we found our users saying:

“I rely on photos to buy online from unknown florist”

“I use photos to make decisions because I’m not familiar with types of flowers”

These insights revealed that users make their purchases based on the visual appeal of product photos, and that they will order from unfamiliar florists if the pictures looked attractive.

“I buy flowers for special occasions and events”

Users also expressed that one of their motivations to purchase flowers was to gift it to a loved one on special occasions.

Observing users in two different florist settings, we found:

  • Customers inspected the freshness and quality of the flowers.

​

  • They viewed the entire range of flower arrangements available.

​

  • They also compared the pricing of flower arrangements.

RESEARCHING THE PROBLEM SPACE

First, we wanted to know who our competitors are and what they offer so that we can identify any gaps that can make our client stand out more. Next, we needed to understand more about the behaviours and motivations of consumers that purchased flowers. In order to understand these things, we employed a combination of research methods which included contextual inquiry, user interviews, task analysis, feature inventory analysis, and pros and cons.

KNOWING OUR COMPETITORS FIRST

We discovered that there was an opportunity for our client to provide more visually appealing product photos and information on their website. 

Before conducting user interviews, it was imperative for our team to do market research to understand who our competitors are and what they are able to offer. We used Google maps to identify our direct competitors around the area and also researched on the best in class florists.

After analysing competitor websites, we realised the importance of including an eCommerce process. 

After conducting a pros and cons analysis and feature inventory analysis, we discovered that a majority of features missing from our client's website were related to not having an eCommerce process and lack of clear images and product information.

PROS

  • Clearly showing a variety of products and services

​

  • Indication of flower sizes

 

  • Additional information such as flower care tips and style guides

CONS

  • Flower arrangements with names that lacked context of flower type, e.g. "Cotton Candy" or "Free Spirit"

​

  • Extra scrolling or clicking to view key features and options

Compared to other small businesses around the area and larger businesses in the industry, our client showcased less product variety and services on their website.

To understand our client's market position compared to competitors, we used a market positioning map to identify strengths and gaps. Initially, we compared customer satisfaction through Google reviews but found this data skewed and unhelpful as most major and local competitors had high ratings, making it difficult to identify a gap.

​

We then focused on product variety, which was more revealing. Unlike competitors, our client did not showcase their product variety well. For example, Aloha Flowers, with a similar business structure, displayed a broader range of products. This highlighted an area for our client to improve.

EMPATHY MAP | DEFINING OUR USER

To better understand our user, we created an empathy map to visualise what they say, think, do, and feel. This process helped identify key motivations and deepen our insights.

​

We found that:

​

  • Users look for visually appealing images to make a purchase decision

  • They search for products suited to the occasion

  • Users want the actual product to be similar to the online product picture

PERSONA | DEFINING OUR USER

Meet Emily Roberts

Based on our research and empathy map, we created our persona, Emily Roberts. She values gifting flowers to her loved ones on special occasions but lacks extensive knowledge about flowers. Her purchase decisions are largely based on the product photos.

Emily Roberts

"There's something special about gifting flowers to loved ones on special occasions to show that I care."

Bio and scenario

Emily is a successful 30-year-old graphic designer living in the inner suburbs of Melbourne. Despite her busy schedule, Emily prioritises gifting flowers to her friends and family for various occasions throughout the year, and while she doesn't possess intricate knowledge of flowers, she has a deep appreciation for them.

Goal

To be able to purchase appropriate flowers for a special occasion based on product photos online.

Needs

  • To access to credible reviews to help guide her decision making process

  • To feel confident in her purchase decision

  • A variety of products to browse and choose from

Behaviours

  • Purchases flowers for friends and family on special occasions

  • Chooses flowers based on how they're presented

  • Looks for pricing and florist location informations during research

Pain Points

  • Flowers don't meet expectations based on what was in the product photo

  • Unable to inspect freshness and quality of delivered flowers

  • Hard to gauge size of flowers based on product images

JOURNEY MAP | UNDERSTANDING EMILY'S PURCHASE EXPERIENCE

Emily starts to feel overwhelmed during the research and decision making phase when searching for visually appealing product photos online.

While browsing for product photos online, Emily starts to feel overwhelmed and experiences decision fatigue as she is unable to decide on which product to click into or choose. 

PROBLEM STATEMENT

Emily needs appealing product pictures so that she can make a purchase decision.

IDEATE | REFRAMING THE PROBLEM

How might we...
make product pictures more appealing?

make Emily’s purchase decision easier?

make the decision making process fun?

Using the Crazy 8 ideation method, our group brainstormed ideas for each “How Might We” statement. We did two rounds, and after each round we presented our ideas and voted on solution ideas that we thought would be able to help Emily’s problem.

​

Some of the main ideas that came up during our Crazy 8 sessions included:

​

  • Making product pictures stand out more using a label

  • Showcasing ratings, likes, and reviews on products

  • Adding different image angles and perspectives to show scale and product details

​

We voted on ideas through a group voting system, and decided to focus on one statement that would create the most valuable and achievable solution to Emily’s problem. Considering this, we decided on ‘How might we make product pictures more appealing for Emily?’

Crazy 8’s on How Might We make product pictures more appealing

Following Google Design Sprint’s method, after voting on one “How Might We” statement, each team member created a solution sketch on either a new idea or a combination of the solutions to further elaborate on one idea that would best be able to solve our user’s problem.

PROPOSED SOLUTION | USING LABELS TO HELP WITH PURCHASE DECISIONS

A label feature placed on top of product pictures to make the product more visually appealing, and convey information about the occasion, need or product trait to help with purchase decisions.  

USER FLOW & WIREFRAMES | VISUALISING THE PURCHASE PROCESS

Creating the user flow and wireflow of screens and interactions required for our user's purchase process.

PROTOTYPE AND TESTING | Iterations from Usability Tests

Results from low fidelity testing on 3 users revealed high success rates on task completion, with feedback to improve the label copy.

We tested the low fidelity prototype out on 3 users, where we gave them the scenario of purchasing birthday flowers for a friend, and to checkout using the guest checkout option. We measured task success and noted any hesitations, confusion, or errors.

​

Our usability test results revealed:

  • All users successfully selected a product on the homepage and proceeded to the product page

  • 2 out of 3 users expressed confusion on adding a message on the product information page

  • 2 out of 3 users found the product labels unclear

Low fidelity paper prototype

We refined our design after 2 rounds of moderated user testing with 3 users per round for our mid-fidelity prototype.

First Round of Usability Testing Results: ​

  • 2 out of 3 users all clicked on the ‘FLOWERS’ tab first before clicking on a product shown on the home page

  • 2 out 3 users commented that “Add to cart” call to action button should be placed higher rather than needing to scroll down page to view it

  • All users provided feedback on including a ‘back’ button for each step of the process

Adjustments made: ​

  • Included a catalogue page for when users clicked on the 'Flowers' tab on the menu bar, which would lead to the same purchase path as if they clicked directly on a product picture from the home page

  • Improving the copy of labels to ensure that they clearly indicated what occasion or need the product was associated with

  • Adding a 'go back' option to give the user more control while navigating the website, and to provide a more smoother user experience

Second Round of Usability Testing Results: ​

  • 2 out 3 users successfully used the product label on the home page to guide them to the appropriate product page

  • 1 out of 3 users clicked on ‘EVENTS’ tab first because they thought birthday would fall under this category

  • 1 out 3 users commented on including the ‘back’ button for the check out page

To enhance content placement and user value, we reviewed industry best practices and incorporated heuristics into our design process, analysing the information architecture of our design.

Our team completed a heuristics critique on our content and information to ensure a smooth user experience. We wanted to make sure that our design and content included elements such as being clear, valuable, accessible, and useful. To do this, we used Abby Covert’s Information Architecture Heuristics: Checklist for Critique to guide us.

FINAL SOLUTION

Home Page, Catalogue, and Product Page

View Cart and Payment 

404 and Contact Page

REFLECTIONS AND NEXT STEPS

Maintaining strong communication skills is vital to successfully navigating collaboration in a remote setting.

Working remotely, our team maintained good communication using Zoom, Figjam, and Figma. However, a more detailed project plan and structured daily stand-ups with time-boxing could have improved efficiency. I also learnt to be more assertive and often took on a project management role, facilitating stand-ups and monitoring progress. Overall, the project was a valuable learning experience, demonstrating strong collaboration despite the remote setup. I look forward to applying these insights in future projects.

​

Recommendation for next steps:

  • Establishing style guidelines for product labels and website branding

  • Conduct further user testing and reiterate on designs accordingly

  • Improve accessibility for visually impaired users by adding audio product descriptions and making images clearer to show scale and details accurately

bottom of page