Benchmark Analysis, Usability Testing & Prototyping: Regenbogen Buchhandlung Case Study
Local e-Commerce Project
This article is intended to look at a local e-commerce website redesign project. Project aimed to practice the Benchmark Analysis, Usability Testing & Prototyping stages of UX design.
Credits: Alba Comenge, Silvia Ivanova, Dara Averina
Project Brief:
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. This can affect local economies and many families.
Nevertheless, we can identify a trend extended in many metropolitan areas: the middle class decides to acquire fewer items but would be happy to pay more for each of these. Customers want to support smaller businesses, making an impact on their purchase. You know: “Think global, act locally.”
We want to help local shops improve their online presence to be more competitive in the market.
Regenbogen Buchhandlung: A Bookstore, specialized in Turkish Literature
Regenbogen Bookstore that is located in the center of Berlin-Kreuzberg, was decided to be studied as a case for this project. Some highlights about Regenbogen Buchhandlung (Rainbow Bookstore):
Local bookshop specialised in Turkish books — 25 years of experience- Very personalised customer service - Online shop- Delivering all over Europe
Not to expand physically but rather online, because they make more revenue there.
To maintain the physical bookstore costs more money because the rent is quite high.
Overview of Project Steps:
1. Business & Competitive Analysis:
Business Analysis is the process of examining the business’s needs and goals. Understanding the business needs allows us to create solutions that will deliver value to stakeholders and trigger the development or improvement of concrete products and services. The stakeholder interviews as an essential tool in this stage are an opportunity to gather vital insight. The analysis will rely on the ability to translate stakeholder’s needs into actionable insights.
Problem findings after business analysis including stakeholder interviews:
- Global competitors: Regenbogen has an online bookstore called Kitap Berlin, Amazon sells Turkish books and delivers faster, less visibility/popularity as a local business
- Low usability: Users struggle with navigation, hard to seek for inspiration, no modularity and consistency in formatting (to many categories), 2 websites: one corporate and one online shop.
Market Positioning Map: A Market Positioning Map is used to understand where a product or service is located based on specific qualities in the market. It identifies where your product currently lies in the market versus where you want to be.
After business analysis and problem definitions, it was decided to ideate the solutions. Our goal is to improve the usability of the website highlighting the personal approach which Amazon doesn’t have.
What now? How are we going to organize the content we have, and create a smoother experience for the user within the system? Well, time to be architects, and rebuild the context of usability and the e-commerce experience of the user accordingly.
2. Information Architecture:
Information architecture is the organization of information within a system. Core components of information architecture: Organization Schemes and Structures, Labeling Systems, Navigation Systems, Search Systems.
To put it more into practice, Regenbogen Buchhandlung has a lot of book categories that don’t have a consistent formatting. There are around 60 categories without a consistent format, modular approach and smooth navigation. The team needed some input before starting to rebuild the site.
Card Sorting: The primary purpose of it is to help you organize items into logical groups.
In its most basic form, card sorting consists of giving users words or concepts on cards and allowing them to group them based on their own understanding of the topic. Before starting the card sorting, we defined 42 book categories out of 60 and ask the participants to group the related book categories.
Open card sorting (3 people) existent labels categories of the website — users find it hard.
Closed card sorting (2 people) after rearranging the cards.
Participant encouraged to sort the cards while interacting with the team, to understand their mental model.
Categories, content and basic navigation planned after challenging sessions! Time to start building the information creating the Sitemap.
The sitemap lists all the pages and shows hierarchy, structure and often page goals and content/functionality that happens to be on each page. The site map is the result of card sorting exercise.
3. Wireframing
UX Designers use wireframes to define and plan the information hierarchy of their design for a website, app, or product. This process focuses on how the designer or client wants the user to process the information on a site, based on the user research already performed by the UX design team.
Wireframing is an essential step in any design process. It allows to define the information hierarchy of design, making it easier to plan the layout according to how we want the user to process the information.
We started with Low-Fidelity wireframes that are sketches that we can draw by hand. These are just a black and white representation of the user interface.
4. Prototyping
Tested on 5 people — Average time to complete the task 1.5 min
Made the improvements from the user comments:
- Saved Address visibility
- Manage booking button — changed to go back home button
- Make logo clickable to link to the home page
- Improved Consistency of the pages
- To maintain the scroll position
- Clickable areas bigger
- Card Sorting is a very efficient tool for site map
Next Steps & Learnings
- Live chat feature to highlight the personal touch as a next step
- Paper Prototype is a great supportive tool for the digital product
- Test the screen size for invision before starting wireframing
