Buying Gin pins online — An E-commerce Challenge
For the first two weeks of our UX/UI Design Bootcamp at Ironhack Amsterdam, we had to work on an E-commerce project. The original guideline said, more precisely, a local E-commerce project.
--
The idea was that “local shops often suffer a decrease in their annual sales due to more and more adoption in online purchases through options like Amazon or eBay.” But due to the pandemic, this aspect had to be reconsidered. My partner in design, Matty Acton, was working from Spain and I was working from France. Visiting a local store and observing it was, unfortunately, not an option for us.
So our challenge was to focus more on helping a shop to improve their online presence and to be more competitive in the market. We would work on delivering the best shopping experience for our end-users.
Luckily, Matt has a friend who launched this Gin-themed pins online store: Tipsy per Tutti. We agreed to work on this existing website and optimize it.
This first challenge immediately immersed us in the design thinking process and served the purpose of making us work in a team. We used Zoom to video call while working with Miro (❤️️) for the brainstorming steps; Figma for the design parts; and Google Forms, Sheets, and Docs for the rest. The remote work experience was a first for me and it went very smoothly: much more than I thought it would.
Timeframe: 2 weeks
Stage1: Empathize — Understanding the user’s needs
To understand what the usual cocktail-pin buyer wants and needs when buying online, we had to do some research.
The first step was to look at direct & indirect competitors’ websites and create a Brand&Features Comparison chart. That way we would understand better what was standard and what was extra.
We could see that Tipsy per Tutti didn’t include Return&Refunds Policies and FAQ but also what we considered bonus features such as Variant requests, a Blog page, or multicurrency pricing. Besides, the shop was present on Facebook, Instagram, and Etsy but didn’t link the latter anywhere on the website.
From this competitor's study, we posted a survey on specific pins aficionados communities through Facebook and Reddit. The survey is accessible here.
The goal was to confirm or discredit assumptions we had about what the users wanted and what features they might like. We asked participants about their pins buying behavior online and to help us understand what makes a pin special in their eyes. At the end of the survey, we asked them to leave their email address if they agreed to help further by participating in a video call with us. To anticipate it, we wrote down an Interview Guide that would follow up on the survey’s answers we got and help us go deeper into the subject.
Our target audience being so niche and only having a couple of days to dedicate to this stage of the project, we were really happy with 15 survey results and 1 participant for an interview.
Stage2: Define — Defining the problem
We used this to process the results we got from the surveys and the interview.
An Affinity Diagram is a creative tool used to generate, organize, and consolidate information concerning a product, process, complex issue, or problem. What we learned from it was that the customization/personalization feature we originally thought would be a great and fun selling point actually wasn’t a big interest at all. The big reason for that seemed to be that pin buyers mostly buy pins as souvenirs and don’t really want to design them except if the process was made super easy. So Matt and I decided to entirely drop the pin customization feature.
What also transpired from our research was the need for trust. Several elements boiled down to trust and it is what we used to write our problem statement:
The user needs to know where the pins come from and who made them because they want to support the artist.
The user also wants to know what other customers have experienced, and where they can be shipped to because they need to trust the store/seller.
This statement then helped us write our hypothesis statement:
We believe that by providing information about the artist including product review info and listing shipping information, Tipsy per Tutti will achieve its goal of building more trust and engagement with its products. We will know we are right when sales on tipsypertutti.com website increase by 15% in the next quarter.
As a next step, we had to create a User Persona. The goal here is to keep our efforts human-centered. Fleshing out our persona helped us better understand the final user, keep in mind the user’s needs, and avoid projecting our own goals into our design.
Then, we mapped out the typical journey Chris would go through when finding Tipsy per Tutti pins from Instagram. We determined the highest point in the journey was finding pins he likes on the Tipsy per Tutti website and the lowest points hesitating to buy due to the difficulty to find info on the seller, shipping, or even the size of the pin.
Stage3: Ideate — Challenging assumptions & Creating ideas
The two previous pages gave us a good building ground for the next steps of our project.
To prioritize our solutions, we placed them in a MoSCoW chart. This helped us determine what we had to implement in this prototype and what we could leave out for now by classifying what our prototype Must, Could, Should, and Will Not have.
From here, we managed to move on pretty smoothly to the Site Map & User Flow. We re-organized the product categories because we deemed the current categorization and tag system quite messy; an About page and a Blog page were added, as well as an On Sale page.
In the Footer, Privacy Policy, Site Map, Shipping Info, FAQ, and Contact information. This structurization was supposed to help make navigation through the website easier and more professional.
Then came the User flow, it is the path taken by our prototypical user, Chris, on the Tipsy per Tutti website. Our User flow takes him from his entry point (Instagram) through a set of steps towards a successful outcome and final action (purchasing a pin). We included different paths for different user status: guest, signing up, or already registered.
Stage4: Prototype — Creating solutions
As the last step in this challenge, the prototype implements the solutions we identified on Stage3 into a mid-fi wireframe.
Our new website got rid of the hamburger menu and replaced it with a navigation bar. The “Meet the Artist” page has a bio and picture, this could be the place to talk about the pin design process and fabrication. The footer links to Privacy Policy, Shipping Info, FAQ, Site Map, social networks, and other marketplaces.
The product page shows the materials the pin is made of, measurements, product reviews, and now allows the user to add a pin to their favorites.
You can take a better look at the prototype here.
Conclusion
Those two weeks were rich in learnings and experimentations.
I am super grateful to have joined this Bootcamp and to have had the opportunity to try remote working with Matty Acton: a complete stranger who turned out to be a highly compatible co-worker and a great guy! The remote working tools allowed us to work as a team at all times. I greatly appreciated the fact we could come up with ideas that weren’t always the best without judgment: I truly believe this is the best environment for finding solutions.
This project is obviously unfinished and has only completed the first cycle of iteration. Having the time to test the prototype would have been great and could have given us some insight into what to look at for a second round. Overall I was pretty surprised at the problems and solutions we found: Design doesn’t have to be revolutionary or hyper-glamorous all the time, the goal was to make what we currently have better and I really liked to be reminded of that.
