Case study: Redesign of Stuff — personal assistant application

My role

I led the Product Design — User Experience (UX) and User Interface (UI) — of this project as part of the Augmented Intelligence (AUI™) team. As a sole designer, I was involved in all application processes and features. My work was coordinated with a Product Manager who provided constructive feedback so that I could improve and obtain more business-oriented perspectives.

Context: what is Stuff?

The Stuff app was built as an on-demand personal assistant service powered by a combination of humans and AI technology. The main concept is to match users with individual experts who use machine-learning algorithms to complete users’ tasks.

Problem statement

To determine when users leave the app and where it takes them a long time to complete an action, I analyzed over 50 Logrocket sessions (viewed detailed users’ session replays). After analyzing the statistics from the Metabase and reviewing users’ feedback, I came up with four main problems that needed to be addressed:

1. Users had to spend considerable time learning how to use the app. It’s critical to ensure that software is as intuitive as it can be, especially when talking about mobile apps. Everything about the user interface should be natural and quick to learn. The onboarding process and CTA were unclear in my case, consequently leading to a lack of understanding of the app’s core functionality.
2. The conversion rate was low and needed to increase.
3. The user’s perception was cluttered because of inconsistencies in the design and the lack of a design system.
4. The user interface required major improvements.

(Statistics from the Metabase display the reasons for account cancellation by users, the main reason being that users do not use the application enough)

(This is how the homepage of the app looked before. On the left is the process of submitting a task, and on the right is the “my tasks” section)

The challenge

Having said that the flow was unclear for the existing users due to the unidentified call to action, the amount of visual noise created an even greater cognitive load, and new users were very unlikely to convert (they simply didn’t understand what they would get from the app: the subscription cost was quite high — 40$ per month; users were hesitant to commit to the cost, and they left the signup process as soon as the payment screen appeared). Based on the above, I formulated my 2 high-level goals:

1. Improve product understanding and make it more appealing, thereby reducing cognitive load for users.
2. Significantly increase the conversion rate.

User research

As a result of reviewing the Logrocket sessions, analyzing Metabase statistics, examining competitors’ patterns, and having brainstorming sessions with my Product Manager, I realized that I needed to get more user perspectives to confirm or refute my hypotheses about the main problems of the existing application, and to reveal more details.

This was achieved through secondary and primary research methods such as surveys, in-depth interviews with focus group participants, and usability testing to observe user behavior.

(Survey questions we sent to our users as part of the research)

JTBD

“When I come from work, I want to be able to spend more time on what I actually enjoy doing to feel happier”.

“When I plan my day in the morning, I want to avoid daily chores to be able to spend some quality time with my family”.

“When I think about my daily routine, I want to transfer my household responsibilities to someone else to have more time for myself”.

Finding solutions

Based on the research results, I came up with the following design solutions:

1. Redesign the homepage to create a better perception by the user;
2. Create a clear CTA;
3. Create an onboarding that will allow the user to understand the application in 10 seconds;
4. Build a design system;
5. Create a clean and consistent design throughout the app.

Homepage

We started with the homepage. Firstly, I built a prototype in Figma and tested it with 5 users to validate the main hypotheses before moving to development. We asked our users to complete certain tasks such as:

• Create a task (type a request)
• Create a task (record audio)
• Create a task using the catalog (find a dog walker, schedule a SPA procedure, send a gift, book a house cleaning service, make a hotel reservation)

After, I evaluated the number of tasks that had been completed. We got great results: with a new layout, clear call to action, and clean design, users were able to navigate easily and complete all tasks within a few seconds. Hence, I approved qualitatively that 2 problems discovered during the previous research were solved with this solution.

(Drag the slider to view the Home page screen — the “before” and “after”)

(Redesign of the homepage with a catalog on the left and task creation on the right)

Onboarding

To achieve the second goal (increase the conversion rate) we started building an onboarding process. A well-constructed onboarding process boosts engagement, improves product adoption, increases conversion rates, and educates users about a product.

We identified possible flow breaks. I created a prototype in Figma and tested it with two groups: the first group consisted of 5 existing users, and the second group consisted of 5 users who didn’t complete the signup process but agreed to participate in the research. The core interest was in the second group. The research was moderated since it was important for us to see participants’ reactions and emotions.

In creating an onboarding design, I followed the following points:

• Keep it short and simple;
• In a few sentences, together with the clean and minimalistic animations, give the user an understanding of why he might want to use this application;
• While collecting user information, ask 1 question at a time to avoid possible overload;
• Essential was the “Plan” screen because this is where most users leave the app. We wanted to minimize the percentage of users who leave this page, increase the level of trust by offering a 7-day free trial, and add a Q&A section where users could find all the necessary answers before making any decisions.

(Drag the slider to view the plan screen — the “before” and “after”)

(Plan and Q&A screens)

We received positive feedback from participants in both groups. Users from the second group verified that they felt more confident about finishing the signup process, firstly, because of the free trial offer, and secondly, because of the Q&A page which helped them to find answers to additional questions they had before moving to the payment screen. Also, participants from both groups mentioned that the app feels more professional, yet personalized and friendly.

(Onboarding — user flow)

We pushed this version of onboarding into production and within two months saw an increase in engagement metrics and the number of monthly active users, along with a significant increase in conversion rate (from 1.1% to 9.86%). This indicates that the new onboarding process was successful in improving the user experience and giving users the right information and tools to engage with the product.

This resulted in more people signing up, more people engaging with the product, and more people converting to paying users. Thus, another problem discovered during the previous research was solved with this solution.

Design system and final user interface

Without a solid design system, the product team was unable to communicate clear design requirements to the development team in a unified format, causing confusion and delays in the product development process. Additionally, the lack of a design system meant that components were not reusable and had to be built from scratch every time, resulting in extra effort and additional costs. This also created visual noise, as components were not consistent across the product.

I created a style guide (which contains a color system, typography, layout, effects, and icons) and a component library (which contains all components + notes that serve as an additional educational resource for the front-end developers).

As a result, a unified language within and across teams was created, and the efficiency of work has increased. Teams can continue to use the same elements, reducing the need to reinvent the wheel and thus risking unintended inconsistency.

(Design system elements preview)

In order to create a simple, consistent, easy-to-use, and accessible user interface, I replaced the old components with new ones once the design system was built. Using a design system allowed me to create a unified framework that enabled a high degree of consistency and scalability while keeping the user interface clear and easy to use. Additionally, it offers accessibility features that are essential for creating an inclusive user experience.

(Drag the slider to view the final interface — the “before” and “after”)

Results & takeaways

Following the release of the new homepage and onboarding, the user interface was updated. As a result, there was a significant increase in engagement metrics & NPS (by 32%), the number of monthly active users, and the conversion rate (an increase from 1.1% to 9.86%). This suggests that the strategies implemented were successful in driving user engagement, satisfaction, and loyalty.

To determine if further changes were necessary, we conducted quick UX testing with the newly released features as part of an iterative approach. As a result, we have proven that we have addressed all of the problems listed.

Moreover, we discovered that users wanted to use the desktop to send tasks and communicate with experts; to send task completion feedback more efficiently and not via email; to shorten the initial communication time with an individual expert (agent). Therefore, for future releases, we’ve built a Webapp version of the application and developed a simple feedback flow that allowed us to communicate more effectively with users and hear their pain points.

Also, we improved prediction and extraction models to reduce the number of data requests that agents had to make personally. This significantly improved the efficiency of the agents and allowed them to work more quickly, as the models were able to provide the data they needed without having to make the requests manually.

(Final interface)