About Me

I recently embarked on a new journey with Source.One as a UI/UX Designer. Upon joining, my first challenge was to reimagine their Polymer Buyer App with an enriched user experience and improved UI.

Every intern has a journey. A journey of passion, curiosity, ambition, and courage. A story of how they seized an opportunity that would transform their lives. And how they became part of a company that would challenge them, inspire them, and empower them.

About Source.One

Source.One is a pioneering Commodity Distribution company that specializes in streamlining the Trading & Logistics of Petrochemicals. Acting as an aggregator, the company offers a platform for polymer buyers and suppliers to trade effortlessly. By optimizing polymer procurement processes, Source.One enables clients to achieve substantial cost savings through strategic sourcing initiatives.

Introduction

In the ever-evolving world of user experience design, it is crucial to constantly refine and enhance the usability of digital applications. In this case study, we explore the journey of reimagining Source.One’s Polymer Buyer App to provide an enriched user experience and improve the app’s user interface (UI). Our goal was to encourage increased adoption of the mobile app and streamline the purchasing process for polymer buyers.

In this case study, I’ll illuminate our journey to enhance the user experience of our mobile app, leading to increased adoption.

This is how a typical journey of a buyer who wants to buy polymer from Source.One looks like:

And this is what we are changing it to:

Identifying the Problem Area

The initial design of the Polymer Buyer App aimed to provide a comprehensive solution for buyers, reducing their reliance on WhatsApp for ordering polymers. However, the app did not meet user expectations, resulting in low engagement rates. 

Our analysis revealed several key user experience issues:

1. Lack of a holistic buying solution within the app, leading users to complete orders through WhatsApp.
2. Difficulty in navigating and finding the required polymer grade among 1000+ options.
3. Limited engagement with other app features, indicating a lack of interest in exploring them.
4. Insufficient details in the orders section, causing confusion and dissatisfaction.
5. Scaling and legibility problems in the app’s UI, posing challenges for users with visual impairments.
6. Inadequate incentives for users to migrate from WhatsApp to the app.

Our Objectives

To address these issues and improve key metrics, we established the following objectives for the app redesign:

1. Boost app orders: Simplify the ordering process to reduce the need for human resources.
2. Improve app retention: Encourage users to engage with the app beyond placing orders by providing access to news and industry insights.
3. Offer a comprehensive solution: Equip users with all relevant information, from grade prices and order details to tracking and financials.
4. Provide superior customer support: Enhance the customer support system through a dedicated help section and in-app chat.
5. Revamp User Interface: Improve the app’s interface to cater to a broader demographic.

Design Process and Challenges

To achieve our objectives, we followed a meticulous design process that addressed the challenges faced by users.

1. Finding a Polymer

Previously, users had to scroll through an extensive list to find the right polymer, resulting in a cumbersome experience.

Old homepage layout

To streamline this process, we introduced a dropdown menu for selecting polymer types, allowing users to narrow down their search. Additionally, a bookmark button was introduced for users to save their frequently purchased grades.

New homepage layout

Search section is also enhanced and it now show user’s recent searches and shows a list of their frequently visited polymer types.

Polymer grade selection in action

1. Price Calculation

The price calculation screen plays a critical role in any order. To ensure clarity and informed decision-making, we clustered related data and provided additional context through ‘i’ (information) buttons.

Old price calculator layout

The app offered various cost-reducing options to users, but these were not adequately highlighted. We leveraged appropriate copy, subtext, and accent colors to draw attention to these features.

New price calculator screen in action

III. Post-Order Placement

After an order is placed, several backend processes are initiated that are-

1. Buyer reference verification
2. Available limit calculation
3. Supplier stock availability check
4. Payment collection for the placed order

To enhance transparency, we introduced an order request confirmation screen that offers live updates until the order details are verified. This feature reduces the need for human intervention and provides clear order status updates.

New order request confirmation in action

This feature reduced the need for human intervention and provided clear order status updates.

1. Proceed Without Sign-Up

Our user research indicated some resistance towards signing up. Users were reluctant to share their business details without exploring the app first. However, our business structure necessitates login before access.

Understanding user resistance towards signing up, we introduced an option to proceed without signing up. This allows users to explore the app with limited functionality. Further actions prompt users to log in or sign up.

Proceed without signing up in action

1. Understanding the User

Our user demographic leans towards an older age group. Thus, we prioritized simplicity in the new version. Feedback from the earlier app version revealed users found difficulties with tasks generally perceived as simple and self-explanatory. To counter this:

1. We minimized dead ends in the app. Users are always presented with options to progress.
2. We retained significant similarities with the older version’s functions and user flow to minimize confusion.
3. A help button was added to every screen, offering FAQs, chat, and call options if users find themselves stuck.
4. We introduced an in-app chat feature reminiscent of Whatsapp to facilitate a familiar user experience.

At Source.One, we follow a structured framework to effectively manage our projects. Here is a detailed overview of how we handle project management:

• User Research:

• The business team conducts thorough user research to identify areas of improvement and shortcomings within the app.
• Insights and findings from the research are documented and shared with the product team and relevant stakeholders.
• Sprint Planning:

• Weekly sprints are initiated to facilitate collaborative discussions among the product team and stakeholders.
• Problem statements derived from user research are presented and thoroughly examined.
• Research outcomes and potential areas for improvement are discussed during these sprint sessions.
• Feature Definition:

• Based on the sprint discussions, a set of features is decided upon by the product team.
• A Product Requirements Document (PRD) is created, outlining the identified problem statements and proposing possible solutions.
• Iterative ideation and refinement take place during the sprint sessions, ensuring a comprehensive understanding of the features to be developed.
• User Flow Design:

• A user flow is created to visualize and ideate how users will interact with the app.
• This user flow serves as a guide for the subsequent design and development stages.
• Low-Fidelity Wireframes:

• UX designers work on low-fidelity wireframes to transform ideas into tangible visual representations.
• Collaborative discussions and feedback loops are established to iterate and improve the wireframes.
• The focus is on usability, functionality, and addressing any identified issues.
• High-Fidelity Screens:

• Once the wireframes are finalized, high-fidelity screens are developed, incorporating design elements such as color schemes and design themes.
• The visual aspects of the app are refined to ensure a cohesive and appealing user interface.
• Prototyping and User Testing:

• Prototypes are created based on the high-fidelity screens to conduct user testing.
• Both internal and external users participate in the testing process to gather valuable feedback.
• The feedback is carefully analyzed, and necessary improvements and refinements are made.
• Development:

• After the wireframes and prototypes are validated, they are handed over to the development team to begin the coding process.
• Edge cases and error/alert screens are discussed, and the code logic is reviewed to ensure a robust and functional application.
• Quality Assurance (QA) Testing:

• The QA team thoroughly tests the functionality of the app, covering various scenarios and edge cases.
• Bugs and issues are identified and rectified, and all possible loopholes are addressed to ensure a high-quality product.
• App Rollout:

• Once the QA process is successfully completed, the app is rolled out for users to access and utilize.
• Continuous monitoring and user feedback collection are maintained to gather insights for future improvements and updates.

By following this comprehensive framework, Source.One aims to deliver high-quality products that address user needs and enhance the overall user experience.

Impact

To visualize the larger thought process and demonstrate the network effects, we can introduce a backend image that illustrates the interconnected processes involved in the app, showcasing how each component contributes to a seamless user experience.

Impact and Future Considerations

As the redesigned app is still under development, we eagerly await its full impact. Preliminary user testing has yielded positive feedback, and we expect improved engagement and adoption rates. We will continue to monitor the app’s performance and update this case study with the final impact once it becomes available.

Wrapping Up!

This was my first major UX project. Through this journey, I discovered the intricate connection between business and UX, and how seemingly minor adjustments can drive significant changes. Design is a collaborative endeavor, melding the needs of various company departments to create a superior product for users. It’s a cycle of innovation, feedback, and iteration.

It remains to be seen how exactly these changes will play out on the vast canvas of the digital app ecosystem and what the network effects and first, second, and third-order consequences may end up being – but one thing that is guaranteed is we will continue to stay agile, and iterative, evolve, and optimize, always striving for excellence!