To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of TreeDots Enterprise Pte Ltd.

This case study will take around 3 mins to read.

Hi, my name is Diana and I am the Design Lead for our UIUX team in TreeDots Enterprise.

In this case study, I will be sharing:

4. Results - Playback Session


To view a collection of pointers on managing a Design Team and deliverables in a Start-up, check out F&B Supply Dashboard Management case study. 😄

TreeDots is an all-in-one Food Ecosystem Management. TreeDots put food surplus from farm to table by optimizing the food supply chain, and connecting suppliers to F&B businesses (Merchants). 

TreeDots envision a world without food loss and aims to be the region's catalyst for a modern-day food supply chain and efficient distribution channel of food to make achieving sustainability easier & more accessible for all.

The TreeDots for Merchants is an app built in iOS and Android for F&B business owners (Merchants) to order products from suppliers such as meat, poultry, seafood and etc. The app also allows merchants to manage, track and make payment on orders made for multiple branches. 

In the initial phase of the Merchant app, the developers started the development for a few months without any prior design wireframes or references. This is due to the lack of design resources at the beginning before we were able to start hiring more designers to join our team.

It caused a few issues.

1. Base of the app was not built on components and any changes to the design will require a big developmental effort.

2. App was visually not attractive, which negatively stirred the Aesthetic-Usability Effect of the app. (Aesthetic-Usability Effect: Users often perceive aesthetically pleasing design as design that’s more usable.)

3. There were multiple types of users who are using the app (Merchants/ Sales/ Admin) who all have different views and functionality. So the lack of documentation made it difficult for everyone to be clear on who what why when and how?.

However! the app was built on the ionic framework, which helped on the front-end side to make the features "work".

I organized a few sessions for discussion between the design and engineering teams. 

The business goal at that time was to push out a working MVP asap with basic expected flows and necessary UI. So to align with this, we have agreed on a few details to ensure swift development while also managing improvements on the visual design and attractiveness of the overall app. 

Here is what we've agreed on:

Communication between designers and developers is crucial in the initial stage of building a design system. We need to consider the developmental effort needed for our designs to reach end users. Additionally, we were lucky enough that a design system for that framework was already available online for purchase.

Merchants are usually busy and they tend to only interact with the app to place order before the cut-off time. They also usually have a list of products that they need to quickly add to cart and place order, hence they do not have tend to explore products unless it is out of stock. When a product is out of stock they would want to order a product that is exactly the same or as similar as possible. 

Therefore, we assume that they need a very simple & quick search UI as well as showing the product details clearly so as to add to cart quickly.

Before

After

As we still need to consider the development effort needed, our first design proposal follows the same structure, but with additional changes to improve product visibility, visual hierarchy, and cleaner interface. 

1. Product card instead of list of products

2. Visible filters

3. Highlight on search 

4. Search recommendations

5. Price ($) per unit (kg) detail for better price value comparison

6. Weight detail in product card

7. Buy Now button to quickly add product to card

This is planned and reviewed by the Merchant app's UX Designer (Nuwiya Amal), a UX Research (Annetta), and also me.

After the usability test through Maze, we were able to gather great insights from the Missions that was set for the testers to complete. 

The testers were able to interact with the prototype, answer qualitative questions and also give honest feedback based on their interaction. 

Below is an excerpt of the UT report that is shared during a playback session with the Product Manager, Design Lead, UX Designers and Primary stakeholders.

After the playback session, we did another design iteration with consideration to the feedback given and another round of testing is planned - hoping to achieve improvements in:

- Usability Score 

- Bounce Rate

- Misclick Rate/ Mission

- Avg Duration / Mission

- Avg Success / Mission

- Visual Appeal 

______ end of case study.

Thank you for reading this far! I hope that the points and information presented in this case study have been useful to you. The design team that I have worked and collaborated with has helped me through my journey as a UIUX Designer and as a Lead.

Nasrulloh, Senior UIUX Designer - Jakarta

Nuwiya Amal, Senior UIUX Designer - Bandung

Harry (Myat Hein Kaung), UIUX Designer - Myanmar

AP (Aye Aye Phyu), UIUX Designer - Myanmar

Michele, UIUX Designer - Bali

Annetta, UX Researcher - Jakarta

Contact me at

Email: hello@dianaeddie.com

Mobile: +61 455101015

😊