Concept idea Index page and checkout for Sayurbox

Introduction

Bunda Ratna, 28 years old, is a working mom who works as a legal team at a well-known property company in Jakarta. He got married 3 years ago and is now blessed with a daughter aged 1+ years. In the midst of her busy schedule, Mother Ratna must always make time to prepare food for her husband and also food for her toddler, especially since her hobby is cooking so she never misses this.

Since the pandemic, Bunda Ratna’s office has worked to implement work from home so that she has more time with her family, especially she gets the opportunity to prepare food intake for her husband and children, whether it’s breakfast, lunch, snacks, or dinner. But since the PPKM Darurat and because the state of the Covid-19 case is getting higher, Bunda Ratna is afraid to go out, to the vegetable seller or to the market to look for basic needed.

Starting from the IG story of some of her friends, Bunda Ratna got information about the Sayurbox website. “Eh Bund, kamu beli dimana tuh? cakep ya dianternya pake box-box gitu” “Coba jeng, di sayurbox.com, lumayan ini, gausah keluar rumah, nanti sampe rumah dianterinya” That conversation brought Bunda Ratna to the Sayurbox website and tried to use the services of Sayurbox.

Because Bunda Ratna is still trying it for the first time, she has not dared to buy many things. So for the first time, Bunda Ratna will only buy some basic needed and instant kitchen spices. “Coba-coba dulu ah, siapatau zonk”

Impression Bunda Ratna

After trying to order using the Sayurbox website, Mother Ratna felt several things were blocking her ordering process.

Why when I have selected the product and set the address, do I return to the homepage? It makes me forget the product I have chosen.

Why can’t I choose the date myself?

I want to change the address at checkout? How come the link is not very visible huh?

Why I can’t change the date?

I will pay using OVO, I’m quite confused because after choosing there are no further instructions, it turns out that I have to check directly on the application.

Even though it’s a bit difficult, Bunda Ratna still uses Sayurbox because right now her need is to stay at home and want to shop virtually.

But based on Mother Ratna’s experience, I got the inspiration to do research about Sayurbox hopefully my research can improve Sayurbox user experience.

To-Do List

An improvement process will be started to assess the services that Sayurbox currently has. The assessment is carried out using the Usability Heuristic method popularized by Norman Nielsen. It is hoped that after this process it will be clearer which parts of Sayurbox can be improved to make it easier for users to use Sayurbox products.

1. UX Audit
2. Improvement list and priorities
3. Improvement sketch, wireframe, hi-fidelity and prototype
4. Conclusion

UX Audit

Location and date for sending the package

Visibility of system status, user control & freedom

When I first saw this page, I didn’t realize that the user had to choose a location and date to make it easier to ship orders.

Moreover, this is also like what Bunda Ratna said, when she tries to buy a product, she will be taken to the address selection and the date after that will return to the main page. This makes the user quite difficult.

Then for the date section, it is unfortunate that users cannot choose the date they want, the user can only determine the date according to what is available.

What we can improve?

In this part, I will improve the search bar for location and date, especially from the old design, I don’t understand about the function of the empty box beside the Tanggal pengiriman.

So with new search bar, users can choose either lokasi or tanggal pengiriman. Also for the modal location, I made improvements, put the search outside the map, and also users can choose the date based on what they want

Product card

Aesthetic and minimalist design

This is the card currently used by Sayurbox. Functionally, this card has carried out its function as information, price and discount instructions, available quantities, and product photos.

However, in some ways, I feel that this section can still be improved by Sayurbox, such as the use of fonts, size, and composition, white space, especially now that Sayurbox hides the CTA Beli and will change it to a quantity order. So that the card part can be improved to increase the card’s visibility level.

What we can improve?

For now, I’m trying to improve card size, card position, and also improve the white space inside the card. Just in case in the future if Sayurbox wants to add more content inside it, like label discount, stock information, and others, so there’s more space for them Sayurbox to put it inside.

Product card rows and promotion position

Consistency and standard

This point will be related to the previous point regarding the product card. In this section I feel, in 1 line, with quite a lot of information, the number of 6–7 cards is too much for 1 page. With the improvements that have been made to the card and the size, there will be a reduction in the number of cards per line.

Also, we can see in line 2, the promotional poster takes up almost 1 page of the product line, I think this part can be simplified so that the number of cards and products can be maximized.

Apart of that. Do we need big banner promotion like what Sayurbox has now?

What we can improve?

I wanna improve the card size, banner promotion in every row and also adjust the size of the promotion banner and place it into 1 specific row for promotion.

Giving row for promotion not only gives visibility more looks simple but also can save space to add more product row inside the page.

Checkout

Error prevention, Recognition rather than recall

On this page there are several interesting sections to discuss, the first is according to what Bunda Ratna has discussed previously, where it is quite difficult to change the shipping address and delivery date for each product.

Then in order, I think it can be developed again, because right now it looks quite irregular, for example, Address and delivery time should be in close order, but now the order looks far apart and next regarding the selection of delivery times, I think the button to select the slot not very familiar to the user.

What we can improve?

In this section I will reorganize the payment order, starting with order details, address, delivery date, delivery time, notes, and payment summary.

Then for each part, the user can change and I try to use text links so that the readability of each part will be higher

Time for sending the order

Visibility of system status

Just like in the previous section, the essence of this page is that the user can change the delivery date according to his wishes. Because currently, on the page that Sayurbox has, the user cannot change the date when it has been set at the beginning.

Another improvement

Onboarding for new user

I added this section to give information to users about what can they do with this site, and a bit to do and step by step information for them.

Add section introduction for mobile apps

I got a reference from another site, that in their site, they add 1 section to introduce and lead users to download their apps, so I tried to put it also on Sayurbox index page.

Consistency in language and give detailed instruction

This part same as Bunda Ratna faced, when wants to pay with OVO, the instruction is not clear for her. Need to add clear instruction and use consistent language on the whole page.

High fidelity design

Prototype

Prototype and scenario

I made several scenarios to find out the improvement in Sayurbox. Some of these scenarios are expected to make it easier for users to process their transactions.

The designing process is done with Sketch and the prototyping process will be done with Marvelapp.

Scenario

1. As a user, I want to see instructions when coming to the site
2. As a user, I want to set up my location and date
3. As a user, I want to order strawberry sweet
4. As a user, I want to order sayurbox telur Ayam
5. As a user, I want to pay orders from shopping cart

Prototype link

You can try and play the prototype on the link below

Conclusion

This is a concept idea, further user testing is needed to find out the use of this idea and whether the solution provided is in accordance with the user’s needs.

It is hoped that what is made now can make it easier for users to use the Sayurbox products.