Learning through experience: How I optimized the ad submission process as a junior UX/UI designer

In this blog, I will share my experience working on optimizing the ad submission process at Njuškalo as a junior UX designer. Through this project, I encountered a series of challenges in communication, justifying design decisions, and understanding the product development process from idea to final solution.

“The roots of education are bitter, but the fruit is sweet.” ~ Aristotle

Overview

Taking into account the conducted user research, the results of which you can find in the published article, key issues in the user experience during the ad submission process on the Njuškalo platform were identified. Through the analysis of specific user needs, we gained a better understanding of which aspects we needed to improve in order to reduce the drop off rate and to enable a smooth ad submission.

The responsibility for optimizing the user experience in the ad submission process was taken on by an interdisciplinary team working on the mobile app. Through iterative design and defined business requirements, we selected the solution that best aligns with our goals. Subsequent measurements revealed some very interesting results.

Problem description

Results of the usability test revealed that the automatic activation of the camera at the beginning of the ad submission process was neither natural nor intuitive for users. This led to a significant drop off right at the first step, as the then-current ad submission flow did not align with user expectations. This was clearly reflected in the high drop off rates, which were 33% for Android and 44% for iOS.

The analysis of metrics shows that users are more likely to open the gallery on the initial screen than to take a photo directly, as illustrated in Figure 1. Conversations with users further confirmed that most of them prefer to add photos they have previously taken.

Figure 1. Shows the percentage of clicks on individual screen elements during the year 2023.

Additionally, the usability task of selecting the desired category during the ad submission process was not easy for users. They either already knew which category they wanted to place the ad in, or they had difficulty finding the appropriate category.

By creating a problem statement, the issues that this project aims to solve were precisely defined:

Problem statement:

As a user, I require a more intuitive and engaging initial screen in the ad submission process because the current interface causes significant drop-offs, especially on mobile devices, with 33% on Android and 44% on iOS, leading to a loss of potential listings and user engagement.

As a user, I need a way to easily upload pre-existing images from my gallery when starting the ad submission process, as most users prefer this method over taking new photos, as revealed by 89% of clicks.

I need clearer guidance and intuitive options for selecting the category during the ad submission process because the current screen causes confusion, resulting in a 44% drop-off for Android and 42% for iOS users. Users are frequently toggling between suggested categories and manual selection, with 77% ultimately choosing the suggested category, indicating a need for a smoother and more straightforward category selection experience.

Figure 2. Displays the screens in the order they appeared during the ad submission process before optimization.

Designer in an interdisciplinary team

Throughout this project, I was the only designer in an interdisciplinary team consisting of a Product Manager/Product Owner, Team Lead, QA tester, and iOS and Android developers. The advantages of working in such a team include the diversity of perspectives, which enriches the creation of a better final solution, better understanding of the platform we are working on, and teamwork. The challenges were definitely communication and knowledge transfer skills, as well as justifying or advocating for design principles.

Improving the ad submission process on the mobile platform was certainly not an easy task for me.

Design process challenges

Based on the previously mentioned user research, I started creating user flow diagrams and high-fidelity wireframes. Through insights into user needs, we became aware of the shortcomings in the ad submission process and concluded that there are several opportunities for future improvement. Therefore, I explored different strategies for the order of steps that users should follow. I posed questions such as whether the user should first enter the title, price, and photos, and what type and how much information should be offered for input. It was important to consider when to provide certain information to the user in order to avoid excessive cognitive load, with the goal of making the ad submission process easier and faster.

Given the technical limitations we faced, such as the inability to fill out additional fields if the user hadn’t selected a category, it was clear that we needed to find an innovative solution. We are proud to have implemented a machine learning algorithm that suggests a category to users based on the uploaded photos and/or the ad title, narrowing down the options from a wide range of categories in which an ad can be submitted. It is important to note that the user always has the freedom to choose the category independently, adhering to the principle of safe and autonomous navigation through the interface.

Given these options, the focus was on adapting the interface for entering the desired category.

Battle / Opportunities and challenges in defining the design

Design work is often not easy, as we face various challenges and expectations. After considering three different wireflows, a discussion arose between the developers, who expressed concerns about technical challenges, while the managers were skeptical of the proposed solutions. The high-fidelity wireframes I developed, with the expectation that the design would communicate itself, were not met with approval. My assumption did not hold up. Arguing design decisions that seemed logical to me, based on my knowledge of the field, was not easy to communicate with the rest of the team. Disagreements and lack of understanding did not promise success. After persuading and attempting to articulate design decisions, which I tried to verbalize as much as I could at that moment, a decision was made, and the user flow deemed most suitable for further software development was selected.

Initially, I estimated that it would take me a week to deliver five wireframes; however, I realized that this wouldn’t quite be the case. As I started drawing the high-fidelity wireframes, I had the impression that there wasn’t much work left to refine and finalize the already defined wireframes. Despite having the wireframes and wireflows defined, I quickly realized that I would face challenges in their implementation.

Delivering the final version of the interface within such a short timeframe created immense pressure, which I imposed on myself. It was necessary to thoroughly reorganize the drawn wireframes to achieve better visual communication, which involved designing the elements into meaningful units. It was challenging to create all the new elements, UX copy, define interactions and states, and simultaneously argue why this was necessary.

The final solution, with more than 30 drawn wireframes with detailed states, is presented in Figure 3. It was expected that I would exceed the deadline for completing the final solution, which I wasn’t aware of at the time of estimation. The development of the Android solution took 14 days, while I spent three days on the same iOS project, which needed to be drawn within iOS pattern.

Figure 3. Development handoff in Figma.

Victory / Team collaboration

Enough now with those beginner struggles. I definitely have to highlight my team, who excelled not only in constructive criticism but also in support, understanding, and collaboration! Every little thing I missed, they brought back to the table. There was room for improvement, but also for discarding ideas that didn’t align with the set goals. All the defined states were thoroughly reviewed multiple times. The development progressed with exceptional quality. We were all curious to see how the solution would perform in practice. Suggestions for improving technical solutions were very well received. All team members proactively contributed to achieving the best possible realization of this project!

End solution

The end solution brings improvements and the achievement of the goals we aimed to accomplish.

The first step guides the user through the process of adding photos. With contextual information indicating that they are in the process of submitting an ad, the user is given options for how to add the photos. By performing one action at a time, the cognitive load on the user is reduced, increasing the likelihood of completing the first step. Additionally, this screen includes a progress indicator, which, according to the goal gradient effect in the laws of UX, motivates users to be more inclined to complete the task. This approach on the first screen, compared to the previous version, better aligns with user expectations during the ad submission process.

The action of adding photos, according to the laws of heuristics, should show a reaction to the action. This allows the user to edit and add more photos.

With the updated machine learning algorithm, we will immediately suggest a category to the user based on the uploaded photo and/or title, which wasn’t the case before.

In the second step, we offer the user a choice. Thanks to better category suggestions, by entering the ad title, the algorithm will provide a more accurate suggestion. If the user is not satisfied with the suggestion, the option to manually select the category is immediately available. The visual representation of the screen has been redesigned into meaningful units.

The category picker has been improved with the addition of a search engine, which provides users with a wider range of options for searching through keywords and suggestions. The list of all main categories is not hidden, as it was found that users are accustomed to selecting categories on their own.

Figure 4. Shows the optimized entry flow into the ad submission form.

Results

The first user need was to create a much clearer first screen. By analyzing the number of clicks per screen, we see that the number of exits from the first screen decreased from 30% to 7%. The number of gallery opening actions increased from 42% to 70% of clicks, thereby fulfilling the second user need of adding photos through the gallery. Figure 5. shows the number of clicks on the screen in the previous and current version.

Figure 5. Displays the number of clicks on the new and old screen for entering the ad submission process.

The goal of the third user need is to enable users to easily transition in finding the desired category to proceed with filling out further information about the advertised item. The number of selections for suggested categories increased from 77% to 83%, while manual category selection decreased from 23% to 17%.

Conclusion

“Those who work, create; those who struggle, overcome.”

Through this project, I learned many important lessons. I realized how crucially important clear and efficient communication with team members is to avoid misunderstandings and achieve a common goal. I learned the importance of articulating and arguing design decisions so that other team members can better understand and accept them. I experienced the advantages and purpose of working in an interdisciplinary team. Additionally, I gained a deeper understanding of the product development process, from the initial idea to the end solution, including steps such as conceptualization, design, testing, and iteration. I also learned how to better estimate the time needed to complete tasks. I learned how to handle challenges that arise during the design process and how to stay motivated and persistent in finding solutions, as well as which skills I need to work on as a designer to ensure improvement. This experience has truly enriched my knowledge and skills and prepared me for further progress in my design career. It’s no wonder they say that learning comes through experience.

With the combined efforts of the interdisciplinary team, we successfully completed this key project. In the end, we are all proud because these improvements have significantly enhanced the user experience of one of the most important features on the Njuškalo platform.