Botbonnie's acquisition by Appier allowed the company to seamlessly integrate its strong social media capabilities and bridge the gap in marketing channels. My experience with the Botbonnie team in developing Journey Map, a marketing automation solution designed to optimize end-user experiences and streamline workflows for marketers, has given me a comprehensive understanding of a product's lifecycle, from conception to market launch. In this process, I played a pivotal role in shaping the product vision, crafting prototypes, carrying out user testing, and continually refining the product.
The information presented in this case study is for job application purposes and has been modified to comply with a non-disclosure agreement. The views and opinions expressed are solely those of the author and not of any entity. This case study is not intended for commercial use.
%20-%20Light%201.png)
Designing for Web3 isn’t just about fixing usability issues — it’s about making complexity feel safe, understandable, and within the user’s control. Across the TON ecosystem, the real challenge wasn’t features themselves, but the trust gaps that emerge when concepts are unclear, flows feel risky, and journeys become overwhelming. Addressing these gaps became the focus of my work across products.
As a lead UX designer in charge of this project, I worked closely with the PM to define the product positioning and scope of development. In addition, regular design reviews were conducted with the engineering team to ensure feasibility while ensuring a team-wide understanding of the developed features' overall flow and business context. I also regularly engaged in design peer reviews with other product line designers to maintain consistency across products.
Journey Map is Appier's first cross-product, cross-channel product, making it a challenge to seamlessly integrate the workflows from other products into Journey Map. Therefore, ensuring a smooth implementation is a critical issue that requires attention.
I led the end-to-end product design for TONX API — an RPC infrastructure that supports developers building on the TON ecosystem — as well as Tonlend, a lending protocol, and KTON, a staking service providing liquidity for TON-based assets.
My work covered the full design process, including competitor research, UX flow design, UI execution, and hands-on collaboration with engineering and product teams to ensure smooth implementation and delivery.
I designed the user experience across multiple channels to ensure a unified and consistent experience. I created journey maps, wireframes, prototypes, and design specifications to bring the design to life.
Designed for multiple platforms in collaboration with UI designers, PMs, and tech writers, ensuring product features were translated effectively for each platform's context.
I prioritized the needs of the user and adhered to the Agile development philosophy. After defining the product's goals and direction, I quickly delivered a prototype for CMS validation. Through iteration and testing with actual users, I was able to refine the design and make informed recommendations based on the insights gathered from usability tests.
Before the project kick-off, I conducted a thorough competitive analysis, evaluating aspects such as interfaces, interactions, information architecture, and processes of our competitors. From a user experience perspective, I analyzed the designs and highlighted their strengths and weaknesses. Using these insights, I created a comprehensive E2E flow framework for the product and collaborated with the PM to determine the design direction and MVP scope.
After researching competitors, I compiled a list comparing their information architecture, flow, and user interface. I also noted each one's strengths and weaknesses as a basis for future design decisions and references.
After analyzing the previous steps, I created a simple user flow chart to identify potential problems and opportunities for improvement. By doing this, I was able to highlight the most important features that required attention and prioritize my efforts accordingly. This frame helped me have a clear understanding of the product's structure and allowed me to discuss necessary functionalities with the project manager and divide them into different phases.
After finalizing the overall structure, I started to brainstorm different design approaches. I explored as many possibilities as possible during this stage. Then, I conducted the first round of interviews with four Customer Success Managers (CSMs).
As we have limited opportunities to interact directly with customers in our 2B business, we usually rely on CSMs to understand our customers. They are the first touch point of our customers and often have valuable information about their needs and pain points. Therefore, in this stage, I collaborated with CSMs to understand the customer's requirements and collect their use cases. This helped me get an initial confirmation of the general direction and ensure that the product could meet the customer's needs.
With the feedback from the CSMs, I finalized a version of the design draft, which I then turned into a lo-fi wireframe and prototype. Using the prototype, I conducted user interviews with four real clients to gather further feedback and validate the design. This process gave me valuable insights into how users perceive the product and common marketing scenarios. Moreover, it helped validate my design assumptions through this process.
After conducting interviews with four CSMs and four clients, I have distilled several key design directions:
In the initial design proposal, there were differing suggestions regarding the addition of nodes in the journey map. The two proposals for adding nodes were a free-form approach and a fixed-framework approach. However, through initial interviews with CSMs, we discovered that although the free-form approach provides greater flexibility for users to accommodate complex marketing scenarios, it also increases the burden on users (for example, users have to determine if two different kinds of nodes can connect to each other, etc.).Therefore, through a fixed-framework approach, users can efficiently complete the journey setup with simple clicks. In addition, the interface can also be kept more concise.
In the interview process, it was discovered that Journey Maps, presented in a flow format, heavily rely on the interface for users to grasp the process and purpose of the entire journey. As a result, the design of the interface should enable users to easily comprehend the significance of the journey by simply reading the components on the interface. Additionally, the canvas should be arranged in a manner that allows users to have maximum visibility of the components.
In SaaS products, there are usually many complicated concepts that would be very difficult to understand if they were only described through text. Therefore, I try to use imagery or visualization in the design to imply the meaning of the function.
When adding a new journey, we provide a range of templates for reference to inspire the user's imagination and simplify the entry process. This addresses the challenge faced in other Appier products, where it was challenging for marketers to visualize business scenarios.
%20-%20Light%201-1.png)
When the user decides to start from scratch, there will be a clear visual guide on the screen to guide the user on how to start. At the same time, when the user hovers over the connecting lines, a "+" icon will appear, allowing the user to directly add and manage nodes by clicking.
In follow-up user interviews and testing, we found that this approach (hover and add) enables most users to easily add and complete their desired journeys, as shown in the following figure.
By utilizing the side panel approach in the editing process, users can be aware of the node they are currently editing and what the preceding and subsequent nodes are, thereby providing more context for content design and reducing the feeling of interruption caused by popup modals.
With the possibility of multiple status switches in the journey map, such as Active, Paused, or Stopped, different editing restrictions apply. To ensure a smooth and secure experience, I provide clear status indications and guidance through hints at the top of the screen. This keeps the user informed of their current status, the impending situation, and the available actions, promoting a clear understanding of the situation and providing appropriate calls to action to minimize any feelings of uncertainty.
I have continued the side panel approach in the report design to provide a seamless user experience. With this approach, users can easily view the location of nodes and related information simultaneously, preserving the overall journey. In addition, this allows users to quickly understand the flow of people in each node, such as the situation of message sending.
During the process, I also participated in the discussion and implementation of the revision of Appier Design System 2.0, regularly discussing with UI designers to iterate components and ensure that the Design System could meet the daily work needs of designers.
