Being Creative Vs. Following Convention.

Introduction

There are times when a designer needs to be creative and a time when he/she should follow convention. The issue is knowing when is the correct time to have which mindset and whether it is desirable having to switch back and forth between the two. In this UX case study, I explain my process of designing an e-commerce website, that sells an unorthodox product, where I had to make decisions to think outside of the box or follow the status quo.

The Design Brief

Consumers nowadays are more willing to purchase items that they otherwise might be skeptical about purchasing online. It is becoming more common to see consumers expand their online shopping categories due to convenience. However, although online shopping is convenient for consumers, the relationship they build with a retail store is lost, leaving the consumer to adapt to a minimalistic way of purchasing items that they are unfamiliar with. There is an opportunity for products that require more attention to detail to create an online presence while bringing the in-store shopping experience into the digital world.

The design constraints:

1. The final deliverable must be a website mockup that sells flowers.
2. The website must translate the positive attributes of a physical store to a digital experience.
3. The design must be developed based on the collection of real data.

Research

During the researching, defining, and planning stages, I worked alongside three other designers: Anushka Agrawal, Cindy Leung, and Kate Leenutaphong. We began our research by studying the websites of three local florist shops that had already expanded into the e-commerce industry: Queen Bee Flower Shop, V&J Plant Shop, and Our Little Flower Company. We were able to hold in-person interviews with two out of the three shop owners, and the consensus we gathered was that:

1. Their websites were used more as a tool to collect client information rather than to sell products.
2. The volume of products, that they provided on their websites, were minimal, or products that were going out of season.

While in the physical shops we also took the opportunity to observe the shopping habits of customers and the interactions they had with the shop owners. I was able to conduct two in-person interviews with customers who were shopping in the area around Granville Island and my teammates conducted multiple phone interviews with acquaintances who had previously bought flowers online.

The second form of data collection we used was an online survey which we administered to social media platforms, chat groups, and online forums. We received over 60 responses over the five days that the survey was open.

Define

To ensure that we would meet the project deadline, we concluded the data collection phase and moved on to organizing and defining all the information we had gathered. Organizing the information into an affinity diagram allowed us to notice natural groupings and patterns in the data, and what we discovered was that there were three distinct groups of people:

1. People who don’t buy flowers.
2. Young adults who buy flowers for romantic reasons.
3. Elderly people who buy flowers on a regular basis.

The online survey revealed that 1 in 10 people have never bought flowers. The majority of our survey respondents were also aged between 25 and 34 and their top two reasons for purchasing flowers were for anniversaries and romance. It was our in-store observations and in-person interviews that revealed the elderly population who regularly purchase flowers for decorative and creative reasons.

To narrow the scope of the project we decided to focus on just one of the groups: Elderly people who buy flowers on a regular basis. The data for this group informed us that they:

1. Value the freshness, and quality of the flowers over all other attributes.
2. They are skeptical about buying flowers online due to reports of the product not matching the image shown online.
3. They enjoy being part of the experience of interacting with the flowers/florist and creating their own arrangements.

To ensure that we kept our target user in mind at all times, I created a visual representation of the group called a persona, so that whenever we needed to make a design decision we could refer back to this image:

Plan

With a defined target user group in mind, we started to plan where a website could be used to benefit our persona. We used storyboards and customer journey maps to pinpoint areas of positive, neutral, and negative emotions during the in-store and online shopping processes.

Storyboard of how buying flowers online could benefit our persona.

The key findings we decided to focus on were:

1. Removing the negative aspect of having to physically travel to a flower shop.
2. Alleviating the negative feelings attached to navigating a confusing website.
3. Eliminating the stigma surrounding the product not matching the image shown online.
4. Maintaining as much of the positive aspects of shopping at a physical florist shop as possible.

With a project timeline of two weeks, we had to ensure that we focused on designing a minimum viable product (MVP), meaning that at the time of delivery the prototype needed to fully perform its core function whether it achieves this with ten features or one.

As a team, we agreed that at its core function, the website had to allow the customer to:

1. Browse images of flowers.
2. Sort and filter the products.
3. View details about the product.
4. Purchase the product and have it delivered to their home/recipient.

Any other feature added beyond this list could be added based on our own individual interpretation of the data and time constraints.

Prototype

For my own personal interpretation of the solution, I decided to focus on designing a website that sells individual components of a floral arrangement so that customers can select, customize, and create their own designs at home. From our domain research, I discovered that a floral arrangement is composed of primary flowers, greenery, filler flowers, and other decorations. Knowing this, I organized my site structure accordingly.

Other key features that differentiate my design is product details which provide the fragrance level and life expectancy of each plant. These two attributes were the second most important aspects of buying flowers after freshness and quality. Having them listed in the details also aid in replicating an in-store experience.

To alleviate some of the skepticism that comes with buying a perishable product online, I created a customer photo gallery feature where if customers who had previously purchased a product sent back an image of it being used in an arrangement, the store would provide that customer with a discount on their next purchase. This would allow a new customer to see the quality of the flowers after they have been delivered, as well as persuade past customers to become repeat buyers.

The last feature that I implemented was one that I debated with myself. From Dr. Jacob Nielsen’s article Do Interface Standards Stifle Design Creativity? he claims that

Users spend most of their time on other sites. Thus, anything that is a convention and used on the majority of other sites will be burned into the users’ brains and you can only deviate from it on pain of major usability problems.

–Jacob Nielsen, Co-founder of Nielsen Norman Group

It is conventional for the checkout button to be represented by an icon in the top right corner of a webpage, however, based on our data, we noticed that elderly people had difficulty browsing and purchasing products online, but was it such a major usability problem that I could deviate from the norm? I made the decision to get creative. I challenged myself to unlearn what I had already known about the structure of an e-commerce website, and I came up with the idea of an always visible basket. The idea was based on the observation that when shopping in a physical store, the customer can always see what is in their basket. Dr. Nielsen also states that designers should “minimize the user’s memory load by making objects, actions, and options visible.” I felt that my design was being creative, but not just for creativity’s sake. With an online basket that is always visible, our target user group of elderly people no longer have to remember what they have already added. It also adds the benefit of seeing the products next to each other while browsing other products which can be useful when deciding what colour and type of flowers to combine for an arrangement.

Test

Using a sitemap and user flow as my guidelines, I created a paper prototype to test the basic layout and flow of the website with users before committing to my final prototype which would be designed in Sketch and Invision. The major points of feedback I received from my four user tests were:

1. Having the buying process in steps felt restricting.
2. The checkout button was difficult to find.

Final Prototype

Taking the feedback I received from my paper prototype testing, I took to Sketch and InVision to create a working wireframe prototype. Instead of having steps that the customer had to strictly follow, I created a navigation bar to assure the customer has the freedom to browse whichever section they desired. I also renamed the permanently visible “Basket” to “Cart” (sticking to a more conventional name here) and placed two large buttons next to it for viewing the cart details and checking out.

Click here to view the prototype:

Click here to view the project `FLORISTA`

Consider scalability

To meet the deadline of the project I had to stick to building an MVP, however, the vision for the website is to potentially become a platform for floral arrangement hobbyists to share their creations and knowledge of the field. Future iterations of the website could include features such as instructional videos, product care videos, and forums to attract beginners to the hobby further increasing the business of the company.

Timeline:
2 weeks

Team size:
4 people

UX tools:
In-person interviews, personas, storyboarding, journey mapping, affinity diagramming, user testing.

UI tools:
Adobe Illustrator, Sketch.

References:

10 Usability Heuristics for User Interface Design

Do Interface Standards Stifle Design Creativity?

Reflections a year later

This is still one of my favourite projects to this day because even after revisiting it a year later I realize something new, and that is: This project exemplifies many things that a business owner should consider when starting a business.

1. Know who your ideal customer is and be specific. You can’t make everyone happy, especially when you’re just starting a small business, so you might as well make some people happy.
2. Find out what they value and add that value. This was the key driving point for everything related to the product. The features, the language, the look, the navigation it all derived from who the product was serving.
3. Consider scale, but not before you’re making a profit. At the end of the project, I started thinking about all the other features I could add to the website. If the project didn’t have a deadline, I could have easily been trapped in that mindset and might have lost focus on the main goal: To sell products.

What would I do differently today?

Do research on what device the target customers would be using the website. I made the assumption that elderly people would likely be using a desktop computer, and my idea of the “always visible cart” functions okay on a desktop, however, it would need to be optimized for mobile if that’s what the customer data returned.