Glossi was a digital publishing platform for users to create and share their own digital magazines, called Glossies. The core of the product was the editor, a WYSIWYG interface for the creation of Glossies, intended for ease of use regardless of technical or design proficiency. As UX Designer and Product Manager at Glossi, I drove multiple projects and initiatives within the company.

SUMMARY

Part One: Usability

Our editor, which should have been the strongest part of Glossi, tended to confuse and frustrate users more often than not. I pushed for and ended up leading two rounds of extensive user testing through remote usability video tests and quantitative surveys. After the first round of testing, I assessed problem areas and proposed dozens of changes. This led to massive usability improvements as evidenced by the second testing round, in which the success rate increased from 43% to 93%.

Part Two: Conversion

After a user signed up for Glossi, they were sent directly into the editor to create their first magazine. However, even after the improvements made to the editor's usability, we were still seeing a high drop-off rate for new users. I created a solution – a step-by-step introduction for users creating a Glossi for the first time – that ultimately resulted in an 857% increase in conversion.


Part One: Usability

The Glossi editor was where users would create their digital magazines — and despite being the core of the product, it tended to confuse and frustrate users more often than not.

I led two rounds of extensive user testing, utilizing three methods:

  1. Remote usability testing. We provided a list of tasks and their users would go through them, discussing their thoughts aloud as they went. I watched each of the resulting videos from these tests, keeping track of both quantitative and qualitative data.
  2. Qualitative survey. After the above testers had completed their tasks, they were asked a few short open-ended questions about their experience.
  3. Quantitative survey. In addition to the above, users in the second round filled out a survey adapted from the System Usability Scale.

After the first round of testing, I assessed problem areas and proposed dozens of changes to be implemented by both myself and the development team. This led to massive usability improvements as evidenced by the second testing round, in which the overall success rate increased by 50%.

First Click vs. First Action

FIRST CLICK indicates what stands out most to the user. FIRST ACTION discrepancies with First Click indicate confusion or indecision re: how to begin and/or proceed with initially intended action.

First Click vs. First Action, Round 2

Streamlining effect of clear and easy call to action in form of Edit Title on Cover

Error Rate Comparison (avg/action)

An ERROR is every time a user clicks on something that will not get them closer to their intended action.

Success Rate Comparison

A SUCCESS happens if a user is ever able to complete their intended action. GLOSSI COMPLETION is if the user was able to complete a Glossi about their chosen topic.

Thanks to the results from round one, we were able to make extremely effective improvements throughout the editor. The first click and first actions became far more consistent across the board. With that immediate call to action upon page landing, we all but eradicated that initial moment of confusion. For individual actions, error rates decreased and success rates increased. Finally, and most importantly, overall editor success shot up from 43% in the first round to 93% in the second.

Back to top

Part Two: Conversion

After a user signed up for digital magazine creator Glossi, they were dropped directly into the editor to create their first magazine. However, even after making improvements to the editor’s usability, we were still seeing a high number of inactive accounts and a low number of Glossies completed in that initial flow. 

The Goal: Decrease the drop-off rate of new users. Success would be determined by the percentage of Glossies published by users who have just created an account.

Market Research & Competitive Analysis

I researched how other apps had constructed introductions and on-boarding flows for their new users, examining the intentions behind their processes and utilizing the patterns that emerged.

COMPLETION INCENTIVE

Value is gained by indicating to a user their step-by-step movement through a process:

  • Gives the user a sense of accomplishment as every action on the list is completed.
  • Instills a desire to engage more in order to bring the process to completion.
  • Includes assurance of progress as well, letting the user know they’re on the right path.
  • Plays into the emotional and psychological reward of finishing, resulting in catharsis and a sense of accomplishment.
  • See also: game theory and gamification, specifically the emotion fiero and completionist psychology
Mint

Mint

REDUCE DISTRACTIONS AND EASE DECISION-MAKING

  • Filling up the whole page (versus a smaller modal window) and using large, attractive images and text catches attention and reduces distractions.
  • Use of fill in the blank text fields and multiple choice lists to guide the user through a few simple decisions that automatically customize their experience.
  • Natural, friendly language in copy and forms to make it fun and put the user at ease.
  • Don't drop the user into a new area with no direction - provide a clear first step that will lead naturally to another step in the intended flow
Wantful

Wantful

Nike

Nike

Typecast

Typecast

Storylane

Storylane

Feature Design

Design Goals

  • Split tasks into sequence of chunks (groups of operations, specific decision points)
  • Each task dealt with in a discrete mental space
  • Establish trust with visual & textual reassurance after each click
  • Prompt for title first to help user focus on what it is they want to make, then pre-populate relevant content so they get invested right away

iterations on flow and interaction

Wireframes

Prototype

I developed visual and functional prototypes implementing HTML, CSS3/LESS, and jQuery.

Results

We ran an A/B test, measuring how many users were successfully converted (defined as able to complete and publish their first Glossi right after account creation). We tested three variations over two weeks:

  1. Creation Flow: the new step-by-step process
  2. Welcome Lightbox: a modal window with text welcoming the user to Glossi
  3. Original: new users land directly in the editor as before

The new creation flow led to a 5.44% conversion rate, beating out the original by 857%.

It was immediately implemented for all users.