Uizard

Uizard is an AI-powered design tool that simplifies the design of user interfaces. It allows users to quickly generate, iterate, and collaborate on app and web designs using simple text prompts, sketches, or screenshots.

Background

In February 2024, I joined the Platform team with the mission of increasing the number of creators and boosting collaboration among teams using Uizard.

Project goal

Given that we wanted to boost team collaboration, improving comments was the reason we focused on this feature. The comment functionality was implemented about 2 years ago, and no significant improvements have been made to its core functionality since then. This was reflected in the low adoption and usage of the feature.

PROBLEM STATEMENT

“Low comment engagement harms team collaboration. Addressing usability challenges is vital to boost adoption rates and promote collaboration.”

Research

As part of my research, I watched Hotjar videos to observe user interactions with comments, conducted a series of usability tests, and gathered feedback from support complaints about the feature.

Key Findings are listed below:

When writing a new comment, the text form and the actual pin are separated, causing confusion for users.
In files with many comments, it's difficult to understand which is selected or differentiate new comments from existing ones.
Pins are missing avatars, making it hard for users to remember who is associated with each comment.
Notifications lack context, making it difficult for users to prioritize which comments to review.
Managing and writing comments may need to be separated for clarity.
Enhancements such as using avatars or initials instead of numbers for comments could improve usability.
Emoji functionality should be more visible.
Users expect a preview mode for comments to understand their content before diving in.
The count for new comments increments before the comment is published, leading to confusion.
Shortcut functionality for commenting is missing, which could streamline the process.
Missing ability to react to comments.
Complaints about the quality of the comment cursor.
Desire for up-voting comments and threads.
Request for comment pins to have different colors per user.
Difficulty in editing long comments.
Inability to leave comments on mobile phones and tablets.
Request for the ability to leave comments on all the time, regardless of mode.

Brainstorming
session

I facilitated a workshop with the Platform team to brainstorm strategies for improving the comment feature. Utilizing the 'How Might We framework, we generated ideas collectively and conducted a voting process to identify the most promising ideas. Subsequently, we prioritized these ideas based on their potential impact and the required effort. Here are some snapshots of the workshop activities.

Screenshot 2024-05-17 at 16.12_edited.jp

Screenshot 2024-05-17 at 16.13_edited.jp

Screenshot 2024-05-17 at 16.16_edited.jp

Competitors

I analyzed both our direct and indirect competitors as well as their products for gaining inspiration and understanding how they present information. The competitors I examined were Figma, Miro, Google Docs, and Visily.

Visily:

To activate the comment feature, click the comment icon in the top navigation.
Ability to preview comments or open the sidebar to see all comments.
Ability to expand or collapse the comment sidebar.
The comment sidebar includes the possibility to customize notifications.
Tagging people works only if the person is part of your organization.
Provides a shortcut for comments (C).

Figma:

The comment feature is located in the top navigation bar.
A shortcut for comments is available.
New comments are highlighted with a red dot in the comment side menu.
All comments are listed chronologically on the left sidebar, with the most recent on top.
Nearby comments are merged into bubbles with a counter when zoomed out.
Read and unread comments are differentiated by color
Resolved comments are faded out.
Searching and managing comments is available.

Miro:

To activate the comment feature, click the comment icon in the top navigation.
This feature opens a sidebar, which can be collapsed without affecting its usage.
You can add comments in various ways.
Comments can be customized with specific colors
Read and unread comments are easily distinguishable by their color.
The sidebar allows filtering threads and marking all comments as read.
Preview mode is available.

Google docs:

The chat feature is located at the top right-hand side.
A shortcut is available.
Options to filter comments
Options for comment modification are available
It provides auto-reply suggestions.
It supports reactions.
It allows you to assign action items directly to a comment. If someone is out of the office and you have access to their calendar, it will notify you.

Before

After analyzing user insights, ideation workshop outcomes and competitor investigation, I dove into redesigning Uizard’s comments experience. Below, you can see how Uizard comments were before.

All pins look the same just having numbers

Hard to associate comment text and pin location

After

My changes include relocating comments to the top navigation, near other collaboration tools. I've also introduced a shortcut for fasten commenting. Users can now directly add comments on the canvas, filter/sort, hide, or mark them as read. Additionally, users can preview comments before further engagement and more...