Project Overview
Designing an e-commerce site for De Bierkoning, a craft beer store in Amsterdam, to compete with the growing competition from online retail stores.
Introduction
The challenge of digitization for small businesses
It is more and more challenging for local businesses to stay competitive against e-commerce platforms. In the Netherlands, 79% of the population shops online (source: CBS, Statline, 2018), and this trend will certainly continue in the coming years. Having an online presence is an opportunity for local businesses to grow their revenues and deliver a new user experience. For this reason, we proposed our design expertise to De Bierkoning, a well-known beer craft shop in Amsterdam.
Summary
De Bierkoning, the largest beer store in Amsterdam, faces competition from large retail chains.
Well known by beer lovers in Amsterdam, De Bierkoning has a large assortment of beers in every conceivable style. For tourists, the shop stands in their bucket list of top 10 things to do in Amsterdam. For locals, it is a place to enjoy and discover new craft beers from all over the world.
However, small businesses like De Bierkoning see the emergence of tough competition from major retail chains and online platforms. At the moment, the website of De Bierkoning only showcases information about the shop (location, opening hours, contact page). The shop managers recognize that their website could be improved and could develop toward an online shopping experience
Objective
Designing an online shopping experience.
This project focused on delivering a great online shopping experience for the user for the most famous craft beer shop in Amsterdam: De Bierkoning.
Challenges
How to design an easy-to-maintain website
The staff of the shop has a very limited time to maintain the website. The main issue being the difficulty of referencing more thousand beers. Our solution must be time effective and easy to maintain for De Bierkoning.
My role
We were working in a team of two, and we led a design process from user research to high-fidelity prototype. After interviewing the stakeholder and a few clients, we tested and iterated our prototypes and presented our results.
Key deliverables
A number of deliverables were required for this project, including:
- Sitemap
- Competitive Analysis
- Use case
- Card Sorting experiment
- User Flow (Happy Path)
- Interactive Prototype
- Mid-fi Wireframes
- Test Results
- Iterations
Next to these deliverables, we created a user persona and several pages of the High-Fidelity Prototype of the website.
Scope & constraint
Creating an MVP of an online beer shop
This project focused on ordering and getting delivered products from a local craft beer shop. Other functions of the online shop are mentioned in this case study, but were not designed further.
Focus personas
For this project, we focussed on beer lovers, expats, and locals, who like to get updated on what’s new in the shop and tasting the last beer in stock.
The research
Very early in the process, we did a stakeholder and user interviews to get a better understanding of the problem and test some design directions.
Stakeholder interview
A store with a strong identity and expertise.
In order to know more about the actual goals of the business, we met Kevin, the shop manager. We also had the opportunity to interview several customers to learn about their motivations for coming to this shop, their expectations, and eventually pain points.
Key findings
Business values and goals:
- Sharing knowledge of good beers
- Helping customers by advising and recommending beers
- Giving to local breweries a platform to display their products
- Being an authentic business with a history.
Challenges:
- Little time to maintain a website
Difficulty to reference a thousand beers - Not so many people to maintain two shops and a website
- Competition with other Craft Beer Shops, Albert Heijn, Jumbo, and specialized online beer shops.
Customers interview
The customers appreciate the authenticity and expertise of the business.
The customers love the knowledge of the staff and the ‘history’ of the business. The stalls are always changing. So employees will gladly help and advise them to find the correct item. Due to the strong identity of the company, tourists come here on a guided tour to buy beer as a souvenir. As for the locals, they visit the shop to get updated on what’s new and taste the latest beer in stock.
Competitive Analysis
The shop could use its expertise to stand out from its competitors.
During the interview, the stakeholder mentioned some competitors. After further research, we found out that most of these companies focus on the number of products to sell to their clients. We consider that De Bierkoning could easily position itself on the market by providing what the customer loves the most about the shop: its expertise.
Take away
Based on our research and interviews, we decided to help the shop build a modular website, easy to maintain and able to grow over time.
Ideation
How might we help the stakeholder to start a webshop?
The shop has shown a strong interest in starting an online store. According to the manager, the main difficulty for starting an online shop is to know the exact number of items sold in the physical store and know their availability for the potential online store.
After writing down several issues the store faces, we decided to focus on finding a way to help the business start an online store that will be easily manageable.
Solution
Modular design is easy to maintain
In order to make it easy for the shop to start an online store, we will at first limit the number of items to be sold. The customer can choose between different beer packs prepared by the expert team of De Bierkoning. In the future, the website could expand its beer selection with more categories, such as single beers and glasses.
Each pack will be accompanied by a description. Here the shop can show its expertise with consumption advice or information about the brewery.
Implementing the Results
Information architecture
Evaluating the information architecture of the new site with different users.
We have referenced all the possible articles that can be found on an online craft beer shop. We have ordered them by groups until seeing a structure emerging for our website.
Use cases
We made scenarios to tell a complete story about the ideal user experience. These scenarios describe how personas interact with the interface.
Happy flow
The flow chart displays the ideal scenario when the user succeeds in accomplishing every task. In our example, our persona, Dennis, buys successfully a beer pack and gets information about the shop and its events.
The solution
Wireframes
We did some low-fidelity wireframes in order to test rapidly our interface. We applied a heuristic evaluation in order to review this prototype.
Heuristic evaluation
The heuristic principles provide us a checklist to measure the usability of our digital interfaces. By using these recognized usability laws, we were able to identify and solve several problems in the early stage of our design.
Mid-fidelity prototype
We created a mid-fidelity prototype in order to evaluate the most interactive aspects, including navigation, content, layout, and terminology.
Usability testing
In-person testing
We did in-person testing to get more feedback. Our tester usually buys clothes and groceries online and sometimes wine as a gift to his friends.
After a brief introduction to the website, we asked our participants to accomplish a series of tasks.
Usability testing report
To summarise, our tester could accomplish most of the tasks in a relatively short amount of time. He was generally happy about the check out procedure and information he could find on the website. He made a few comments on the layout of the landing page and he wishes to find in the future more items on the website. He was very excited about finding information and recommendations on the product page.
High Fidelity Prototype
Following the feedback we received from the usability testing session, we made a high fidelity prototype.
Conclusion
This project was a great challenge to produce a number of prototypes and test them in a limited amount of time. The heuristic evaluation has been an effective means of eliminating most of the usability problems at an early stage. The in-person testing helped us to identify further problems that may not have been obvious otherwise. However, the results of the usability testing must be put into perspective. Testing is always an artificial situation, the participants are rarely fully representative of the target population. In that case, we would need a broader testing audience to confirm our results.
Learnings
This project was rich in learning. We realized that:
- Users come to a platform with their own ideas and expectations. This comes from their previous experience with similar platforms or their expertise on the information.
- Scenarios are critical both for designing an interface and for usability testing.
- It is important to focus on users and their tasks rather than on your site’s organization and structure.
- Prototypes are created for testing purposes. Creating a prototype without running tests on it makes no sense. Prototype fast and fail early!
- A usability test reports focus on problems, but also positive findings. What is working well should, of course, be retained.
- Usability testing is a great way to get feedback from users on the usability of the interface.