Case Study: Designing an e-commerce site for a local business
Intro
Goooooood Morning world, this article is brought to you by Andasha Wardhana, Alex In The Dam, and Dila Ozer. Today we’ll be writing about our third Ironhack project — designing an e-commerce site for a local business that either did not have one, or had one that needed discernible improvements. During this project, we would be exposed for the first time to User Experience Design techniques such as Card Sorting and User Flows and other Usability Testing tools such as Maze. The end result was a refined mid-fi prototype that we were proud of.
Brief
Officially, we had a little under three weeks to organize information in a clear way, to be effective for both our clients and their customers, in addition to tackling Interaction Design Patterns to make the exchange as streamlined as possible. We also had to spend quite a bit of time doing some benchmarking and market research and analyze the current webshop while proposing a better solution for the store’s online presence.
About Gerda’s Bloemen
We stumbled upon this cute little flower shop in the negen straatjes of Amsterdam called Gerda’s Bloemen. A pillar of the local community, they have been operating at the same location for over 40 years. Relying mostly on local support, Gerda’s Bloemen mostly supplies the city’s businesses with decorative flower bouquets, but also caters to private individuals, weddings and birthdays among other things. Gerda’s Bloemen most famous client might be the Rijksmuseum for whom they take care of and arrange a flower arrangement every week. Perhaps the most Dutch aspect of this shop is that they deliver flowers by bakfiets all over the city.
As you might have guessed, a shop of this stature surely doesn’t have an extensive need for a comprehensive webshop, and although they do have one, it is at best the bare minimum and has much room for improvement. With tech-savvy competitors popping up every year with really detailed webshops and competitive prices it is always important to pay attention to what others are doing to not fall behind. The COVID crisis further exacerbates the anxieties of people as we see a shift to online shopping across all industries. Thankfully for Gerda’s Bloemen, we took it upon ourselves to propose a solution — and they were glad to help us out in our project as they admitted the shortcomings of their current webshop.
Competitor Analysis
The first thing we did was interview our lovely shopkeepers for about 30 minutes or so. In between two bouquets and with a cup of tea, we discussed their business. The main findings were that they perceive themselves as higher end and providing a higher service than most other shops. They are known for their personal attention and for creating connections with their clients. Their clients describe Gerda’s style as wild, organic, and natural. According to them, their competition is not so fierce as Amsterdammers like to support their local shops. Anecdotally, I can confirm that this is true, you could easily never leave your neighborhood in Amsterdam and find everything you need in a few blocks.
Speaking specifically about their sales, Gerda’s has suffered a decline in business clients since COVID — an important market for them. This coupled with the decline in events means that sales took a hit, and although they are currently selling more plants than before, this doesn’t make up the loss of business. This seemed like a good time to revisit their webshop. Admittedly, their current webshop could be better. There is no space to add a message to greeting cards, forcing customers to call once they’ve placed an order — not exactly a pleasant user journey if you ask me. There are also no bouquet options, the delivery options are not clear, and there are no input fields for customers to put their information down. Compared to big online players like Bloomen, AP Bloem, Top Bloemen, who all have comprehensive webshops, there is clear work to be done. All of the competitors we investigated had better online galleries, photos for every flower, some had sections to write messages for greeting cards, clear delivery options and cheaper delivery charges. The improvements we had to make started to become clear but of course we had only just started our journey.
Gerda’s Customer User Persona
Now that we found out about Gerda’s business and their competitors, it was time to deep dive into our user. For Gerda, their clientele consists of mostly business clients like hairdressers, hotels and old and loyal clients who have been shopping there for decades. New business also include referrals from existing clients. A lot of their new business comes from word of mouth and recently they’ve had a bit of success with Instagram and influencers. This has been organic and they invest no money into this.
As for the users we identified and what they wanted to see out of a flower webshop, our findings were as follows. Most clients (78%) are women and those who buy flowers at least twice a year are mostly 31–40 years old (57%). Although most shop in person, we did find that more people are going online to buy flowers due to COVID and because online shopping is increasingly easy to do. The flower industry might be an industry that is spared from going completely online as we found that people want to see the flowers in person and of course you can’t smell flowers online — unless we bring back the Smell-O-Vision. What our survey found is that there are 6 things people want to see when buying flowers online (in order of importance): picture of bouquets, flower types (difficult to implement due to seasonality of certain flowers), clear delivery options, choosing a theme, choosing colours, and filtering based on price. With this part completed, we were able to piece together a User Persona that we felt accurately portrayed the goals and frustrations of someone wanting to buy flowers online.
Problem Statement
We were also able to piece together a problem statement that connects Gerda and our User Persona. The master problem statement was as follows: Gerda’s Bloemen needs to find a way to add more information to their webshop because currently their limited options are restricting the amount of online sales they could do.
“We believe that if we added more detailed information on their webshop, Gerda could increase their online sales.”
We formulated our problem statement through various “How-Might-We” statements and by exploring jobs to be done and a value proposition canvas. The number overarching goal however was as follows: increase online sales. Simple right? It seemed to solve both our client’s problem and at the same time dealt with the frustration that the customers of Gerda had with the current iteration of the webshop. Next, we would set out to create a MoSCoW (must have, should have, could have, won’t have) and a happy user flow after we determined the sitemap through card sorting.
Prioritization (MoSCoW)
As mentioned before, customers of Gerda really wanted to see 6 things: picture of bouquets, flower types (difficult to implement due to seasonality of certain flowers), clear delivery options, choosing a theme, choosing colours, and filtering based on price. With limited time on our hands we decided that the must have should be the aspects that bring the most value with the minimum amount of effort. And so, we decided to implement: bouquet pictures, delivery options, price & size filters, in addition to seasonal flower categories. The product roadmap for the future would include: the ability to choose themes, photos from past events that Gerda catered and colour options for flowers. With this being done, we could finally get to wireframing and drawing up some lo-fis.
Lo-fi & Results
We tested the lo-fi using invision. Essentially, we uploaded the screens and then ran some quick usability interviews with a few users falling into the correct user persona. Their feedback was that:
- Some wanted to add flower care instructions
- Adding a note to your delivery should be before checkout
- People did not know what the two x’s meant on top of the pages
- Price did not seem to be super clear as to what it represented and that is a big no-no.
Now that we had sufficient feedback we could get back to the drawing board and implement the changes into our mid-fi. Hopefully the second round of testing would go better.
Mid-fi & Results
I love testing, and what we did was we used Maze which helped to collect invaluable feedback. You can see a screenshot of it below. Perhaps most noteworthy was that 78% of users rated their experience as 7+ in terms of easiness in completing the task they were asked. The overall usability score was somewhat skewed as we only included a happy flow and one path.
Learnings
This was the most comprehensive project we had submitted, since then, we’ve worked on two more UI heavy projects. This project was a mix of being UX heavy and getting familiar with some basic UI work such as drawing up lo-fis and mid-fi. As such, there was several learning:
- Test often, and test early: there is no point in testing your mid-fi once you’ve already put hours of work into it
- Implement the changes that have the most impact with the lowest effort: at first we wanted to do everything, add colours, add themes, etc. This might not be a bad idea in the long run but focus on what your customers want to see the most and what is most feasible to implement
- Support your local businesses: it might seem like the easy thing to do is go on big e-commerce providers like Amazon or bol.com, but in these tough times for local business, spend your hard earned dollars (or euros) on local businesses that have been part of your community for a while, they need our support
Groetjes,
A.D.D
