DesignLab|Reflection Point: Usability, Inclusivity, and Ethics
In this pandemic, as a house wife, I had to find the safest and fastest way to get ingredients for meals. After I moved to Korea, I was introduced by my friend to this online grocery market called “Market Kurly.”
The best two features about this market are:
- If you order before 11 p.m., your order will arrive before 7 a.m. the next morning (free delivery if you purchase more than $30).
- The quality of products on Kurly is proven by specialists hired by Market Kurly.
Let’s go and look at Kurly together!
Sign up Page
1. I love how their forms contain both labels and place holder text. It exactly directs users to what they need to do. Also, it shows whether users satisfy their standards for account or password with symbols and green and red coloring. For people who are colorblind, they can see check and cross marks instead of colors. This feature also indicates errors in real time before you submit the form. What a pleasant experience!
2. For the last step of the sign-up, it gathers your agreement to receive marketing information. Some websites don’t even show the list of agreements, but lead users to click “agree all”; however, Kurly shows specifically which sections are mandatory and optional. It also says if you agree to receive marketing information, they will give 5% credit on your purchases for a month and unlimited free delivery. No dark patterns here!
Main Page
As you can see at once, their brand color is bright purple. At first, I thought their color choice was interesting, considering it’s a food market platform. However, because it is a rare color choice for grocery market, now I think about “Market Kurly” when I see purple.
1. Their main page pictures are sliding every 3 seconds. Yes, it’s pretty fast comparing to other websites, but users can be exposed to what Kurly offers in a short time, and if they want to see the previous content, they can click the arrow buttons that appear when you hover your mouse over the pictures. I think it supports more affordance than those ways below:
It helps users to see what’s available. Of course, it helps business grow, too!
2. If you see the top right, there are:
- Search icon
- Location icon
- Cart icon
Those icons are a little bit bigger than the those on other websites, so they are easy to recognize. By the way why location icon? It’s an error prevention strategy, because it tells whether your location is available for an over night delivery or not. You won’t have to SIGH at the last step of purchasing items, discovering you won’t get it tomorrow morning!
3. We all have different learning methods. For example, I am a visual learner, and my husband is a verbal learner. Giving two styles of category labels (images and words) increases the accessibility of the user interface.
- Visual: Fun and realistic icons
- Writing: heavy weight with enough letter spacing
Also, around 1 in 160 people has an autistic spectrum disorder (according to DesignLab Article), and it’s easy for them to recognize categories with simple visual icons with enough spacing in between.
Product Listing Page
As you can see, I found yogurt. I see two interesting things here. Have you found them?
1. If you look carefully, you can see they display not only the outside appearance, but the content inside. One of the things that DesignLab suggested was to “Begin every project with an open mind.” I can definitely see that in Kurly’s pictures because users want to know what’s inside! It feels like I can even taste the food over the screen!
2. Beneath the price section, there are fun phrases that show the characteristics of products. For example, it says, from left to right “chewy yogurt that you can enjoy neatly,” “sticky textured enriched yogurt,” and “sweetness of tomatoes with heavy texture.” I like how they didn’t hide them because it almost feels like I am interviewing ingredients for tomorrow’s dinner!
Product Details Page
1. I love how the action buttons are big and recognizable! Kurly’s buttons are consistent! It is recommended to have at least 8px spacing in between touch elements, but here they instead sized the buttons differently, which ensures users click the right button. On the app, they only have the big purple button which is “add to cart.”
2. In every product on Kurly, there is a “Kurly’s Tip.” It shows how you can cook or use the product, and explains any possible misunderstandings such as “don’t worry even if the tomato sizes are different. They are organic, and the different shapes are normal.”
3. For those users who are not good with numbers (me!), it shows how big the product is. There were several times that I ordered online thinking “this is so cheap,” and it turned out to be so small! Also, the picture of the product details helps users match the system with the real world!
4. They placed categories for product details, images, reviews, and F&Q twice — on the very top and the bottom of the page. Users don’t need to scroll all the way down to check reviews!
Cart Page
1. The cart page is well-organized with white spacing and lines. If you see the right section, it shows your address and the price with details. As you add or remove products on the , you can easily see the price change. Great memorability!
My Page (order history)
1. This page reflects great information hierarchy in a clear visual hierarchy that takes users’ eyes on a natural journey through the content (exactly what DesignLab article mentions!).
2. Also, on the right side it shows what users recently view. This feature helps users recognize their past needs!
Two recommendations for Kurly’s notice page
One of the communication funnels of Kurly is through the Notice Page.
If there are any changes on the products or webpages, they upload the most-updated information in this page. There are two things I would recommend to Kurly:
- Adding a filter so that users can find relevant notices more efficiently.
- Distinguishing titles by font weight, so that users can discern different types of information quickly.
Now, it’s time for me to order before it’s 11 p.m. See you tomorrow, Kurly!
**All the photos I used here are from the Market Kurly Webpage