Web Clipper 2.0 — I-Chieh Pan

Web Clipper 2.0

Role

Workshop facilitation
UX design
UI design

Team
Product manager, QA, Front-end & Back-end developers, Product designer(me)

Year
2020

Context

ITONICS Web clipper is a browser extension that helps users quickly capture web content and save it to ITONICS Cloud. Some users use web clipper everyday, especially those with executive roles, it is an essential way to add content into the system.

Below shows the current web clipper that is being used. User can click the clipper icon on the web browser, a window wiil appear where the page's title, description, and image will be captured. Edit the information if needed and then hit save. The content will be uploaded to the Suite platform, where this clip will then become one of the “post” in their feed. The extension is available for Chrome, IE and Firefox.

How current web clipper works

Clipped content will be added into ITONICS Suite content feed

Problems & Goals

The clipping process requires a lot of manual work including specifying the data storage destination for each entry which is time-consuming and inefficient. We want to improve the clipping process so that we increase the app usage and user engagement.

Users
The primary users are content creators, content managers, or similar executive roles. They are responsible for creating, editing, and publishing content on the platform. And the secondary users are project managers and employees within the client’s organization, normally they are not as active as the primary users.

User research
To learn how users use the clipper and understand their pain points, I conducted user interviews involving three internal and two external users. I gathered qualitative data and analysed their motivation and expectations when using the clipper tool, and their behaviours regarding collaboration, etc.

Here are some key findings that I concluded from the interview:

Users want easy and quick clipping process
Clear indication of the clipping result can avoid errors
Users want uncomplicated way to share the content, while maintain privacy
Users find it difficult to organise the content when clipping in high volume

Ideation

Stakeholder workshop

I facilitated a design workshop with the key stakeholders, including CTO, consultant, content manager, technical lead and product manager. The ‘How might we’ (HMW) technique allows us to reframe insights into opportunity areas and innovate on problems found during user research.

These are some examples of our HMW statements:

How might we give the users confidence during the clipping process?
How might we make the clipping process more swift? or fun?
How might we provide a quick way to share the clips?
How might we allow users with different permissions can access the clips?
How might we leverage clip status to enable sharing between users?

We use the dot voting technique to prioritize our ideas and make decisions

Crazy-8's ideation practice

Known constraints
Some technical constraints were communicated before we start the design process.

The Clip quality relies highly on the web page structure
Clipped but unsaved data will be lost when the browser session ends
A file storage destination is required for every clipping
Extension update may be difficult with some browsers

Design suggestions

Clear navigation and interactiont that provide users better orientation
Clip out more content from the webpage, gain more flexibility for later editing
Remember users previous action as a pre-fill, save time on tedious configuration process
Optimise the workflow by introducing bulk action
Extensive functions to help users dealing with a massive amount of entries

Design & prototype

User Task Flow
With the decisions made during the workshop and the constraints in mind, I drafted a task flow (happy path) to illustrate the user's primary steps to accomplish the clipping process.

Wireframe
In the wire-framing stage, I tried to define how this web clipper page should look. There are two challenges that I tried to solve. The first is the position of the configuration panel, which is required to save the clips. The second challenge is how to help users quickly navigate through the clips that they want to edit.

Wireframe Explorations

Prototype
After deciding on the general layout and interaction approach, I start to add visual attributes and detail interactions to the design.

Low to High-Fidelity Prototype

Validation

We tested the usability on five users to test the improved clipper workflow. Some insights of the test result are as follow:

4 out of 5 users find the clipping process is straightforward and comprehensible
3 out of 5 users find the “Publish” and “Add as Draft” feature can be helpful when sharing clips with teammates
3 out of 5 users are not sure if the clips will remain accessible after they close the browser

The improved Web Clipper design received positive feedback from the team and the users. It is currently in the implementation stage and aims to release on Google Chrome and Firefox in the future. For the next step, I would like to further explore ways to minimize the number of actions a user must undertake throughout the clipping process.