Improve UX score of onboarding issues by up to 80% to increase user retention
Overview
TreeDots is a social e-commerce platform that connects suppliers with businesses and customers by selling surplus or faulty food supplies at lower prices without compromising quality.
My Role
Sr. UIUX Designer
My Team
Maria Popravko (PM), Naomi Abano (APM), Diana Eddie (Lead Designer), Michele (UIUX Designer)
Background
According to the data that provided by our PM, the number of "Downloads" of applications on Google Play and Playstore is relatively high, however more than +30% of users who download and sign up do not continue to purchase or do not use the app again within 3-6 months.

One noteworthy finding from our data is that many users abandon the app when they reach the checkout page or wish to make a payment. Where a large number of users shop at inactive Collection Points. This demonstrates that users do not fully comprehend the Group Buy process. Group Buy operates differently from standard e-commerce. There are rules that you must follow in order to shop in-group. For example, you can only shop at active Collection Points.

We believe this issue arises from the app's failure to provide the user with a thorough orientation to the onboarding process. This is significant because our purchasing flow is quite complex, and the app contains many unfamiliar terms. Furthermore, the majority of our user are a range of 30-45 and non tech savvy. The smallest impediment will influence their decision to continue using the app or not.

To validate our assumptions above, we created several lightweight prototypes and evaluated them using Maze to obtain more accurate input. There are at least three major flaws that we believe are causing many users to abandon the app after logging in and this is align with the assumption we thought before. According to the 12 testers that took the test following are the issues:
  • A lack of an enjoyable new user onboarding experience
  • A lack of explanation of the app's terminology
  • The purchase flow is quite complicated
The onboarding experience influences basic application knowledge, it is critical to emphasize the most important aspects of the app in an onboarding, such as how to utilize it and certain other important points/features. A poor onboarding experience will reduce the user's interest in the application, causing the information that will be communicated to the user to be incorrectly delivered, which will have consequences for business.

In our situation, the potential outcome of a poor onboarding experience is that many users will become disoriented when using our app. This is due to the fact that our app's Group Buy process differs from those of other ecommerce apps. There is a considerable learning curve that does not appear to be reducible, thus we are relying on how we construct UX/UI on this onboarding.
Onboarding Solution
This project's primary goal is to ensure that all new users are properly onboarded. New user orientation is becoming increasingly important, which has the potential to lead to a worse user experience. Onboarding can be made better by anticipating what the user will do next based on his or her impulsive actions, such as skipping over or not reading enough of the onboarding part. Plans B and C must be in place in the case of a disaster. So here are our solutions:
1. Information Grouping
We can't possibly present all of this information in a short period of time on a 6inch screen. As a result, we categorize information based on its importance.
2. Product Walkthrough
Guides customers to key elements and emphasizes key features. The goal is for consumers to immediately and exactly understand every feature/element function that exists.
3. Learning Section
There is always time to relearn. We acknowledge that our two preceding solutions may not be optimal, therefore we devised a third solution, namely the learning portion. Where users may quickly read/learn more about our app.
Final Design
In addition to improving the buying flow, we also update the app's aesthetic. We chose to try a more fresh and modern style, but we didn't have to start from scratch because we were using Ionic UI Frameworks. This, in my opinion, is one approach to avoid having to construct something from scratch. However, you must consider your design requirements. Because it employs a ready-to-use UI, you must make do with the constraints of the available styles. In our situation, we chose the Ionic Framework because it also fulfills the engineer side's requirements.

We focused on 3 things that we had to solve. Specifically, during the onboarding process. We focus designing on the onboarding page and the homepage, where our users will first arrive - the most crucial place to begin making in-group purchasing. On this page we are considering shaping a clear path of action. Where users can do each activity on each page successively.

The essential and the first thing customers need to choose is the Collection Point (CP) so that they may successfully select the Group Buy and the products they want to add to the cart to proceed with the payment. Logically, we also talked with our Back-End team displaying only active CP to avoid occurrences of users failing to complete payments. If the user has chosen CP for shopping, the next steps will go smoothly. Because all of the components (Group Buy and Products) presented on the Homepage are derived from CP.

But is the problem only in the selection of CP? the answer is no. There is one more important thing, namely regarding the minimum requirements for the accumulation of total purchases from each Group Buy, we called it Minimum Order Value (MOV). Group Buy will only be completed or processed by the system if it meets the minimum order value requirements within Group Buy's opening time. If for example Group Buy does not meet the minimum requirements, Group Buy will be canceled and all items that have been added to the cart cannot be processed (even though the buyer has paid). In this case, the user will get a notification to select an option; Cancel, Join the next Group Buy (Same Collection Point) or Move to another Group Buy (different Collection Point). Complicated enough? Of course. Because Group Buy actually encourages users to invite other people (friends, family or community) to join the group shopping. For the minimum requirement, we use a progress bar for each Group Buy in active CP and place it in the top position, so that users always have the opportunity to choose a Group Buy which will definitely be processed.
Validating the Design Concept
We recruited 12 people (Buyer and Host) to test the revamped design concept using Maze to validate whether the design addressed the issues, particularly the confusion of using the app for the first time. There were 2 goals to be achieved from this testing:
  • How impactful onboarding is in providing guidance on how to use the app to new users. It is important to underline that what we are aiming for is that users understand the process of using our app (Group Buy) and not just providing information on what Group Buy is and what it includes. We have learnt that by making users know the process of how to use the app, they will eventually get to know the features it includes.
  • How well users understand the steps that need to be taken when using our app. We want users to quickly know what to tap (select) when on the homepage. The flow is simple: Select CP > Select Active Group Buy > Select Product > Checkout.
We were eventually able find out that the design we had built was sufficient to tackle the existing concerns; uncomfortable onboarding, unclear terminology, and not knowing how to use the app. The third testing result we received was quite good, with a score of >80% (out of 12 testers).
These results are helped by the Onboarding support that we have modified in a simple way. And we believe that onboarding plays a critical role in educating users to understand the process of using an app.
Conclusions
I can't say much more after the basic design and a few iterations because I regretfully departed the company before the product was released. However, I am delighted to be a part of this project and to be working with with a capable and collaborative team. This is my first time working fully to tackle problems prompted by research and design, as well as data. The unstable business position during the pandemic era had a significant impact on the direction of business goals, and this project was unfortunately impacted by changes in business direction.
Next