Local e-Commerce | UX case study
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 with their purchase. You know: Think global, act local.
Chosen commerce
My team (Jane and Prateek) and I chose the convenience shops chain K Kiosk to develop a 5 day long UX case study project and try to create the first steps of its possible e-commerce website. Specifically we chose the Potsdamer Platz store, but we could extrapolate it to all other establishments.
But what is K Kiosk?
K Kiosk is a modern kiosk format that offers locations in shopping malls, department stores and busy locations. We could divide all of its products into 5 groups:
- Press: newspapers, magazines, tourist guides, postcards, etc.
- Smoking items: cigarettes, vaping stuff, lighters, etc.
- Food: beverage, candy, snacks, etc.
- Extras: souvenirs, umbrellas, backpacks, sunglasses, etc.
Trending GoBeyond.ai articles:
1. Best Practices for Managing E-Commerce Customer Service
2. Top 15 Magento 2 Extensions For Your E-Commerce Site
Competitive analysis
After knowing more things about the selected business, the first thing we did was to analyze and compare it with its closest competitors, which are two options: REWE, the big supermarket in the mall and Eckert, the other convenience store on the other side of the mall.
K Kiosk Strengths:
- It is small and easily accessible.
- Quick buying, no waiting at cashier.
K Kiosk weaknesses:
- Has higher prices than REWE.
- Has a restricted variety.
What features do the competitors have that our users will expect?
- REWE has much more quantity and variety of products, but, concerning our customers, REWE has more alcohol options which seems to be missing for our customers in specific.
- Eckert mainly has the same products that we have but the prices are higher.
What are their strengths?
- Eckert’s strengths may be in location (closer to Sony center and U-Bahn station).
- REWE: have more stock than K Kiosk and the prices are almost the half.
Note: We are going to focus on REWE here because the other convenience store does not have strengths compared to us.
What are their weaknesses?
REWE:
- Customers have to spend much more time searching and finding what they want.
- Customers have to spend more time at cashier.
- Customers end up buying more than they want.
- Location: they have to go inside the mall.
- If they are going with a purpose they get overwhelmed with all available options.
- Doesn’t open on Sundays.
Eckert:
- Has even higher prices than K Kiosk.
Them, in order to be able to define in a simply and visually way the characteristics of the three establishments, we made a brand map to know where could we add value to K Kiosk.
Our market share is mainly aimed at people who:
- Know what they want already.
- Want not more than 1–4 products.
- Want to buy quickly.
- Want quick access to store.
In short, they want something more convenient.
Some interviews
After comparing the three stores we had some assumptions that we wanted to verify if they were true or did not correspond to reality and we also wanted to know if would make any sense if K Kiosk have an online presence. For that reason we also did an interview.
Assumptions:
- Most of the K Kiosk customers are people who work in the buildings around.
- Working people want to be able to have quick and access to items.
- They prefer not to waste time and interrupt their workflow every time they want to go and buy something.
After the interviews we learned that most people spent a big quantity of hours at work and that if they go out is to buy something to eat between meals. A food delivery service would be really popular between this kind of people, even if the price becomes a little bit higher.
From commerce to e-commerce
The first thing we did to define how would be the K Kiosk’s e-commerce site was to define a first sitemap to check its structure and to organize all the information. But, to be sure that the possible users would understand the site in the best possible way, we go through a card sorting process, to know if our first site map was good enough and matched with the structure that the users think that has to have. We created a second sitemap changing the points that weren’t clear enough:
- “Beverages” don’t belong under “Food Items”→ Separation of “Food Items” and “Beverages”.
- “Check out” was a bit confusing because users thought of it more of a process→ leave it out of site map
- “Work with us” wasn’t really understood→ change the naming to “Jobs”
- Most users grouped “Contact Us”, “Opening hours”, “Locations”, and “Find Us”, “Social Media”, and “FAQ” under “About Us” because it all has to do with information about the company or place itself. And when doing that, they found “Find Us” and “Locations” kind of the same thing→ remove “Find Us”, and group “Contact US”, “Opening Hours”, “Locations”, “Social Media” and “FAQ” under “About Us”.
- Many found “Sign up Newsletter” and “Track delivery” a bit irrelevant for this kind of service→ remove “Sign up Newsletter” and “Track delivery”.
Once the structure of the page became clear, we focused on all the steps that the buyer had to follow in order to successfully complete the transaction. Apart from the user flow we also pointed out the basic elements that each screen of the route had to have.
Once at this point, it was time to start designing the screens of the web page. First we started drawing many screens without much detail, using the technique of crazy eight, and we evolved them until we got a low fidelity prototype. We opted to place some products on the main screen of the website so that they had more visibility, with a section related to more common offers or purchases. We also decided to opt for drop-down menus to browse through the site.
After taking a first test, we went from paper into Sketch to continue evolving our project into a middle fidelity prototype. At this time we started to consider what graphic elements had to have the wireframe so that the user could understand it in the best possible way.
We still keep testing to finish polishing details of the prototype and, after asking several people if they could use the wireframe, we made some quite significant changes:
- Switch “Offers” and “Recently bought items”: most of the K Kiosk clients always buy the same items, for that reason we put that section on the top in order to be the first section of the website.
- Change naming from “Summary” to “Shopping Cart”: people were more familiar to this term.
- Remove the “cart” icon next to quantity: it has no use and is misleading.
- Add quantity in shopping cart and enable user to change quantity there too: this way the user doesn’t have to go to the product screen to change the quantity.
- Add home button on all pages: better browse through the website.
- Address and Payment (give more options).
The final flow would consist of:
- Select the desired product screen, either through the drop-down menu or as a recently purchased product, if it is. The difference is that if we click on “recently bought item” it will appear already selected in the chart.
- Then, if we want to modify the quantity or add more products we can continue doing it.
- After that we press “Buy now”, in case we are not log in we will have to do it. That is important to save the location and the payment method, also is important to avoid minors to buy alcohol or cigarettes.
- Once this is done, we have to select the payment method and the address.
- Finally we only need to press “Pay” and we only have to wait for our order.
