Improving the flonnect capture extension usability : Case study

Overview

Flonnect Capture, now Step Recorder, is a browser-based tool for creating step-by-step guides. The current Chrome extension faced usability issues, requiring a redesign to seamlessly integrate it into the Flonnect ecosystem while ensuring a consistent brand experience and enhancing user interaction.

Role

Product Designer

 

Responsibilities

UI design

Prototyping

Interaction design

Team

Gautam – Product lead

Anosh pinto – Product designer

Khaleel – Developer Frontend

Sai kiran – Developer Frontend

Problem

The existing extension had brand identity and UI inconsistencies, leading to user confusion and disengagement, resulting in low utilization. Redesigning was imperative to create a cohesive experience for Flonnect users and increase user engagement within the ecosystem.

Challenges:

Brand and UI Discrepancies: The extension’s visual design did not align with Flonnect’s established branding, causing confusion among users.

User Understanding and Utilization: Users found it challenging to comprehend the extension’s functionality, resulting in drop-offs and minimal usage.

Confusion Leading to Drop-offs: Lack of clarity in design elements and actions led to user abandonment during the process.

Research:

Having an existing version already live, we gathered valuable feedback through a comprehensive analysis of user behavior during extension use. Additionally, users directly reported their insights through our feedback form. To gain further insights, I conducted a thorough examination of similar extensions, aiming to glean a clearer understanding of their functionalities and user interactions.

Flow and information architecture:

After gathering insights from studying competitor extensions, I proceeded to create a flow and information architecture. I shared these plans with the team, and upon approval, I moved forward with creating the screens.

Solution:

Popup (Non-signed-in screen):

Icon Selection: Incorporated recognizable icons (notification, home) to encourage user engagement and prompt sign-in/sign-up buttons. These icons serve as familiar cues within the Flonnect ecosystem.

Button Design Consistency: Adopted a clean button design similar to Flonnect’s successful style, ensuring intuitive interactions for users.

Guidance with “How does it work?”: Included a user-friendly guide section to aid users uncertain about the process, encouraging them to sign up/login confidently.

Popup (After sign in):

Tab Integration: Implemented tabs mirroring Flonnect’s layout to ensure seamless navigation and familiarity.

Simplified Action: Utilized a single, prominent CTA button to reduce decision fatigue and encourage immediate engagement.

Access to Previous Guides: Included an option to access previously created guides, catering to returning users seeking quick access to their work.

Popup (While recording is active):

Clear Progress Feedback: Displayed the total recorded steps for users to track their progress, ensuring transparency in the process.

Emphasis on Crucial Actions: Highlighted critical functions such as finishing the guide and pause/resume to guide user attention appropriately.

Discard Confirmation: Introduced a clear discard option with a confirmation module to prevent accidental guide deletion, providing a safety net for users experimenting with the tool.

Quick Edit Accessibility: Side panel for step-by-step review and quick delete option for easy corrections, aligning with user behavior patterns.

Consistent Design for Settings: Ensured consistency in design elements for settings (div and pointer) to maintain familiarity within Flonnect’s visual language.

Additional screens:

I chose to integrate recent guides, notifications, and account options within the pop-up, aligning with the Flonnect style. Despite being independent extensions, sharing the same dashboard makes these features beneficial. Recent guides facilitate easy navigation of the last three guides, serving as a gateway to explore more dashboard features. Notifications play a similar role, providing occasional engagement through alerts. The account option offers a convenient logout feature, facilitating a seamless transition for users who wish to log in with a different account. Also helpful in the future, as we plan to display more details like plan details and usage statistics.

Visual cue and feedback:

Implemented a 3-second timer when initiating a new guide to avoid unintentional clicks. This enhancement not only minimizes accidental actions but also contributes to an overall improved user experience. Additionally, the cursor dynamically changes, providing a clear visual cue that the extension is active. Users can now precisely identify the click location and understand the currently selected highlight option, enhancing usability.

Quick Control Menu:

Maintaining a quick control menu for easy access is important, so I kept it in the new design. It shows up when you put your cursor over it. The buttons and options in the menu have a similar look, except for ‘Show Steps,’ which I decided to avoid here as it is an secondary feature here.

In the old design, the small icons made it hard to use, so I switched to clear buttons in the new one for a better user experience. Instead of the usual “X” icon, I used a ‘Delete’ button to make it clear that it deletes the guide. Now, when you click on the delete button, a pop-up message appears, telling you clearly that it’s a permanent action.

Other buttons in the quick control menu let you switch between div and pointer, important during recording. There’s also a button to move the menu to the right or left of the screen if it covers something you need to see. This design is meant to make things easy and clear for users.

Exploration:

For this kind of interface, I checked out different options. The most common ones used by Chrome extensions are:

– Pop-up: Appears when you click and disappears when clicked outside.

– Side panel overlay: Opens a side panel on the visible tab, stays unless closed

– Open as window: Opens the extension interface in a separate window..

I found the pop-up to be the best fit because our function is to take screenshots, so it makes sense for the pop-up to disappear after choosing an option. 

I initially designed a pop-up version closely matching Flonnect’s visual style. However, after discussing with the team, I decided not to go ahead with it. Unlike Flonnect, our highlight options are secondary and can be changed later. It makes sense to keep it simple for Step Recorder, reducing options for users to make decisions easily without feeling overwhelmed.

Lastly what helped me is the iterations. I iterated a lot to reach the final design. Once I was happy with the final iteration , I showed it to the team and once they were also happy with it we moved forward.

Results Analysis:

Given that the redesign aimed primarily at aligning with the branding of Flonnect, the impact metrics primarily revolved around brand consistency and usability improvements. Here are the key findings:

1) Guide Completion Increase: Following the redesign, there was a 6% rise in users successfully completing the guide after installing the extension, increasing from 45% to 51%.

2) Decrease in Uninstall Rates: The integration of branding elements led to a decrease in uninstall rates, indicating improved trust among existing Flonnect users.

Home