LOYAL Chrome Extension

LOYAL AI is an exciting suite of tools for writers, journalists and bloggers. It’s flagship product is a Google Chrome Extension that works with Google Docs to provide inspiration, research and insights into what the user is writing about.

I was tasked with designing the extension with the aim of creating an all-in-one solution for writers, bloggers and journalists.

Below documents the journey of the product.

UI Design

UX Design

1. PROJECT BACKGROUND

I was given the opportunity to work on this project through an agency I work with. The agency works with small to medium size business’ to help create and publish content on their behalf across digital and print platforms. With a team of editors and journalists, the agency understood the ‘pain points’ they go through when writing and publishing an article, these included;

  • Alleviating the grind of repetitive research
  • Minimising the fear that a piece could be stronger, more well informed, more engaging
  • A faster, more accurate way to scour the internet for highly-relevant trustworthy sources

To try and solve these problems the agency had an idea to create a tool which would speed up a writers workflow and features to make their articles more engaging. After pitching the idea to Innovate UK and Google Digital News Initiative the project was awarded funding to develop the tool.

2. USER RESEARCH

We started the design process by performing a series of interviews and surveys, both internally and externally, through our client base of publishers. We interviewed editors, staff writers, freelance journalists and heads of departments. The interviews helped provide further insights into a writer’s work flow and ‘pain points’. The results were sorted into three categories, Gathering, Production and Distribution.

KEY FINDINGS

The results of the interviews and surveys revealed the following;

  • Most writers use Google Docs or Microsoft Word to write a first draft of an article
  • The main ‘pain points’ when writing an article are;
    • The time spent researching a story
    • The pressure of publishing an article on time
    • Hitting the volume of articles they need to publish on a daily basis
    • Inspiration on what to write about
    • Finding reputable sources for fact checking

UNDERSTANDING THE USER

In tandem with the interviews and surveys we created a group of personas to help us understand the goals and challenges of our users. This helped us empathise with our users and aid better design and decision making.

RESEARCH OUTCOMES

The findings reinforced many of our own revealing that accuracy, quality and speed are the most important factors when writing and publishing an article. With this in mind we began to think about finding solutions to some of these problems.

3. COMPETITOR RESEARCH & ANALYSIS

To get a better understanding of the product offering as well as how a user was going to interact with it we researched existing tools that we felt were within the same ecosystem. These included:

  • Echobox, a social media publishing tool
  • Sprout Social, a media management platform (browser extension)
  • Grammarly, a grammar checking tool (browser extension)
  • Trint, a transcription software
  • Factmata, automated content scoring
  • Moz, SEO and inbound marketing

We tested each of these products to see if it solved any of the ‘pain points’ we identified above. Although some helped in certain aspects like accuracy of information (Factmata) none of the products provided an all-in-one solution.

4. IDEATION

As a team we discussed possible solutions based on the outcomes of the user research and prioritised them.

We knew that we wanted a tool which would provide users a quick and simple way to view articles from credible news sources within their existing word processor.

User research revealed that the writers tools of choice are Google Docs or Microsoft Word. We decided that our tool would work with Google Docs as its browser based, where writers spend most of their time finding inspiration for a story or researching/fact checking information. Rather than build a Google Doc add-on the decision was made to create a Chrome Extension that worked with Google Docs, as this would possibly lead to other opportunities in the future as the product develops. We decided on Google Chrome as the browser of choice as it’s the most popular, holding 65% of the market share.

During the product testing we took the opportunity to assess user flows and interactions. One observation was that certain administrative tasks were separate from the tool itself, such as making payments or updating personal details. Grammarly is a good example of this. As a team we agreed that this made sense and was the logical approach to make.

POTENTIAL SOLUTIONS

I worked on some low fidelity wireframes to try and visualise how the product might look and function.

Low fidelity wireframes of potential solutions

Each idea was discussed as a team where we covered;

  • The pros and cons
  • Feasibility
  • Expectations in terms of a MVP

5. USER FLOWS

We created UX flows to help us understand the whole user journey from signing up to installing the extension.

Website User Flow

 

Chrome Store User Flow

 

6. WIREFRAMING & PROTOTYPING

I worked on a set of interactive wireframes that were tested by some of our publishing partners under observation of myself and the PM. We recorded the users journeys and requested feedback for the participant in the form of a questionnaire.

The results of testing were mostly positive and provided valuable feedback on how to improve the designs, these included;

  • Having a close button somewhere on the extension
  • Not having the extension go over areas of the article but rather push the document to the left
  • Having the option to save articles to a board so you can view them all in one place

The testing also revealed some positives we didn’t initially think of;

  • “I really like the fact that LOYAL produced clean copy without the adverts or distractions I would usually see on a webpage”
  • “I like that everything is now in one place, you don’t have to constantly open new tabs to read snippets of pieces”

7. VISUAL DESIGNS

The designs were based off components from Material UI which was the agreed framework to use before development began.

All designs were created in Figma.

Chrome Extension Visuals

8. USER TESTING

We ran a beta test of the product with three publishing partners which consisted of a 4-step process;

  1. Onboarding
  2. Support
  3. Interview
  4. Survey

The results of beta test were generally positive in terms of workflow efficiencies and speed however mixed in terms of what feature delivered the most value. Two publishers found the archive search feature of the web application more useful than the Chrome Extension.

RESULTS & TAKEAWAYS

The feedback from the user testing revealed improvements to the Chrome Extension including;

  • More accurate search results (NLP analysis)
  • Extending the default date range
  • Filters to help refine search results
  • Being able to log in and register via the extension rather than the web app

These improvements are now in the development roadmap.

The next steps for the product will involve further testing to find where the product delivers the most value.

Some key takeaways I’ve found from this project are:

  • Try to involve as many potential users in the research phase as possible. This might sound obvious but as a small team we only had a certain amount of resource and time on gathering user feedback to validate the product.
  • Involve engineering upfront. This helps to reduce any rework later on as an understanding of the technical limitations upfront will help to inform your design strategy.
  • Communication is key. Everyone in the team including the project manager must be involved in all conversations across design and development in order to communicate effectively, hit deadlines and improve the overall product.