Case study - B2C and UX
In this B2C case study we'll look at a South African online kitchen and homeware store, Yuppiechef. Yuppiechef is well known in South Africa for their quality products, aesthetically pleasing UI, and personalized user experience. The online store offers a wide variety of products, from low-priced sale goods to exclusive appliances in higher price ranges.
Even though similar type products can be bought from several other websites online, Yuppiechef's products are always high quality and have a certain level of exclusivity to them such as unique colors and product design.
The UI of the website is minimalistic with no excess colors, visual elements, or content to distract the user from the products. The color palette consists of different shades of gray and white and this palette functions as a blank canvas to allow the products to be clearly and stylishly presented.
There is no complicated pricing structure, but the use of red as a positive reinforcement to make a purchase is debatable. Although red can be associated with danger, it's also an active color that promotes movement. Subtle visual elements to promote valuable content, such as the four colors available for the kettle and the case of six bottles of beer, assist the B2C user in their decision-making progress by giving the information up front and letting the user search for the additional information.
The main banner on the home page gives the user the option to browse all products by high-level categories based on the user's interests, instead of just displaying a list of the product categories as most websites do.
When the user views the full details of a product, a call to action (CTA) block is displayed with all the available options the user has for this particular product in one place. The user can change the product's color or the quantity in one click. The Add to Cart button is clear, but not overwhelming. At the bottom of the CTA block there's a security promise to reinforce the trust and credibility of the website; this message is visible in the footer at all times as well as during the checkout flow.
During the checkout there's a step indicator at the top of the page to show the user where they are in the process; this helps improve the perception of the user when checking out on an e-commerce website. If the user it not aware of the amount of steps or information required to reach the end goal it might have a negative impact. Imagine walking in a dark tunnel blindfolded, if you just have to take one step at a time and concentrate on not falling over obstacles, the distance will feel a lot further than if you were not blindfolded and could see the light at the end of the tunnel. The knowledge of knowing where you're going and what's expected makes the journey easier. It's the same with a checkout flow. Making the step indicators clickable is another way of allowing the user to manage their own journey so they'll be able to go back and edit each step.
Also notice that at the top of the page the user has the option to require help through the customer service or check on shipping information. The user is not expected to leave the checkout flow for this content as it's easily accessible.