Hey I’m Jessie, a Midwest made
designer sun ripened in California.

Evernote · Product Designer

Sep 2015 – Apr 2017




Overview

Evernote is a popular and widely loved note-taking app with over 200 million users around the world (myself included since 2012). I led and helped improve many parts of the holistic Evernote experience—from onboarding new users, to navigating and organizing content for current users, to completing checkout for new and existing customers. And now, I'm tackling the challenge of making Evernote Business the best product for teams. Brief, high-level case studies below:


Current project Evernote Business

Check back later :)

Hold up—this project is under wraps!

I'm currently leading design on core sharing improvements for Evernote Business. Excited to show more when the time comes.


Mobile · Web Evernote Subscription Renewals

As the lead designer on web, I worked closely with the commerce team to create a new variation to the existing checkout experience, which had not seen updates since its initial design 4 years ago.

New checkout design

For paying customers not opted into automatic subscription renewal, especially those with paid accounts through promotions (such as a free trial or similar incentive), how can we make the renewal step clear, quick, and painless?

↗  Increase overall, number of subscription renewals
     →  Measure effectiveness through A/B testing
↗  Improve the mobile responsive checkout view
↗  Minimize number of steps in renewal flow

Old design and new design

Through research and user testing, we discovered a couple of problems with the existing checkout page. The order of steps in the two column layout was sub-optimal; the payment form came before selecting the plan type. The purchase button was also buried "below the" mobile "fold".

Constraints

There was a desire to rethink the entire checkout experience, end to end, but this project was scoped to be an incremental step in validating our assumptions to make a larger case for prioritizing a redesign.

Wireframes

We investigated every flow involved with renewal via email. Because we wanted the renewal process to be "one" step from the email (the 2nd step as confirmation), we were especially careful of potential security vulnerabilities and worked closely with legal and security.

V1 Solution

For the new checkout screen design, I updated the UI and improved the checkout layout. My animation prototype of the plan selection toggle also shipped 😱. It's currently featured in the Framer gallery!


Protoyping with Framer

Premium and plus tier branding


Error states

Third party payments



Takeaways

Partnering closely with the PM and the engineer ensured successful delivery of the project and resulted in increased renewals too. 💪

Additional design opportunities include further exploration of the checkout flow (e.g. multi-step checkout).


Desktop · Web Evernote Checkout Incentives

With subscription prices going ↑, we wanted to help our users adjust to the changes and, hopefully, transition into paying customers. I led the design of an incentive system for our existing checkout flow.

Incentives on the tier selection screen

With Evernote's new pricing change, how can we make the purchasing decision easier for our users? Our hypothesis was incentives. We know that incentives are motivators for purchasing more than intended, but they can also lead to a faster purchasing decision.

↗  Increase overall number of subscription bookings
      →  Measured through existing instrumentation
↗  Handle at least 3 different incentive types initially
↗  Scalable UI for i18n support

Visual UI exploration

At the time of the pricing change, we didn't have incentives support built into checkout (prior incentives were one-off implementations). To test different types of incentives, we needed flexible UI that could scale on the existing checkout experience.

Constraints

Due to the timeline and scope of the project, we had to make the incentives design work with the existing checkout design, which had its own painpoints we couldn't solve for at the time.

Incentive types: Savings, Bonus, Trial

The PM and I agreed upon three different types of incentives to design for: discount savings, bonus time, and trial period. We worked with the legal team to express the terms; the localization team to cover i18n copy; and the marketing team to reflect discounts in email.

V1 Solution

I spent time working through i18n problems like text overflow in the UI, as well as error states. We determined the most approriate UI (ribbon) for incentives that could be re-used due to the flexible shape and noticeable contrast with the existing checkout UI.

Testing overflow

Offer expiration


Localization

Confirmation touchpoints



Takeaways

We saw positive results—an increase in bookings 📈! The growth team continues to reuse the incentives ribbon on commerce initiatives.

Additional opportunities for the next rev include exploring other variants of the incentives UI, as well as improving the existing checkout experience through research and testing


Mobile · Android Improving the notebook experience

Evernote has two ways of organizing notes: notebooks and tags. For hack week, a team of us looked at how we can add more personalization to the notebook on Android with covers.

Color picker for notebooks


Desktop · Web · Mac Quick Switching in Evernote

For hack week, I worked alongside an engineer to build a quick switching prototype on web. The "quick switcher" is a navigational shortcut that allows users to switch between notes and notebooks by title search. We shipped this feature and it's available on the Mac client.

Design mockup of web prototype

Evernote offers "shortcuts" and "recent notes" as quick navigation features in the sidebar, but are optimized for browsing. Given Evernote's heavier advanced search (OCR, saved searches, etc.), it made sense to build a lightweight title search that allows switching between notes and notebooks anywhere in the interface.

Shipped feature in the Evernote Mac app

We know power users who primarily search to find their content might find the existing search functionality too advanced for the use case of pulling up notes by title instead of keyword.

Constraints

We built a prototype on web in one week for hack week.

Apps like Alfred and features like quick switcher in Slack inspired the UI for quick switching in Evernote.

Hackweek!


Takeaways

Feedback from users and the Evernote community was quite positive. They love the quick switcher and liken it to "Spotlight" for Evernote.

Additional opportunities to explore with quick switcher include consolidating the existing search experience with switcher, expanding the scope of what quick switcher pulls up, and including note previews in the results.


Desktop · Web Getting More Into Evernote

One of Evernote's most beloved "features" is the Web Clipper, which is a browser extention that captures text and images from web pages and saves them into Evernote. For hack week, an engineer and I created a clipping experience for the new/empty tab state on Chrome.

V1 working version of Super Clipper!

Dubbed, "Super Clipper", my design manager Chris Ploeg had this awesome idea of utilizing the empty tab state in Chrome for saving open tabs into Evernote. He asked an engineer and me to help him build it in a hack week.

↗  Provide an option to save open tabs into Evernote
↗  Provide a filter-by-text search on open tabs
↗  Provide an option to close tabs from that view

Whiteboard brainstorming

Just chatting with fellow co-workers revealed a common painpoint with the web…endless tabs. Tabs so over-crowded, they've become tiny triangles. What if we could help clear the tabs by saving them in Evernote? What if Evernote was smart enough to group the tabs based on meta data from the web page?

Constraints

We had one week to build the extension, so at minimum, we wanted to be able to save the tabs into Evernote.

I helped with the front-end work of styling the UI and even learning a litle bit of React.js to fix a layout bug. It was really interesting designing and coding at the same time and I found it to be quite difficult because they are two very different mindsets to be in.

Click-through prototype here.

Initial design mockup


Takeaways

We spent a lot of time ideating on use cases that we'd want Super Clipper to solve. In the end, we had to be realistic of what we could build with one engineer in one week.

Additional opportunities include making Super Clipper smarter—like avoiding duplicate saved tabs—as well as offering a feature that groups related tabs and testing usability.


Desktop · Mobile · Web Updating the note view on web

Evernote provides private and public URLs to Evernote note content on the web. In keeping alignment with the redesign of the Evernote web client, I updated the UI of the single note view on web.

Responsive note view on mobile

Note links have plenty of use cases which include general sharing, "publishing" (sharing links via social media), and presentation. Because these URL's can be viewed by non-Evernote users, we wanted to polish the note web view for its potential in new user acquisition based on internal #'s.

↗  Update UI to reflect visual language of the web client
↗  Provide a link to sign up for Evernote
↗  Measure appropriate metrics

Prototype of nav bar on scroll

Link to prototype of scrolling effect for the note title.

Wireframes

Previous design

New design



Takeaways

Updating the web note UI has allowed the growth team to test Premium features like Presentation Mode through this view.


Desktop · Web Onboarding New Evernote Users

As the design lead on web, I worked with the growth team to test ways of adding more value to the new user experience, starting with onboarding on web.

Onboarding selection screen

Given Evernote's many time saving features like web clipping, searchable OCR in images, annotation, and audio recording, how can we better educate new users about the ways Evernote can improve their workflows? Our hypothesis was sample notes.

↗  Increase one week retention for new users
     →  Measured through A/B testing
↗  Create 8 sample notes of features for new users

Qualitative research

New users who sign into Evernote web for the first time go through a tooltip led onboarding of how to create a note and save it in a notebook. While it is practical, it doesn't teach users about Evernote. We saw potential in using sample notes as the delivery vehicle for educating users about Evernote's powerful features.

Constraints

Due to implementation costs, we had to find workarounds for pre-populating sample notes in new user accounts while optimizing sample note performance to minimize storage size.

Wireframes

We investigated two primary testing variants against the control. One variant included a selection screen that allowed new users to choose the sample notes they want to see. The other variant skipped the selection screen and provided all sample notes in the user's account.

V1 Solution

After a lengthy research process that included several surveys, user testing sessions and iterations on the selection screen, the winning variant was simply providing all the sample notes upfront. 👏


Sample notes in an account

Exploration


Exploration

Exploration



Takeaways

Running a/b tests can be resource intensive since there are a lot of factors at play and requires patience in the process. There will be inconclusive results and waiting (statisitical confidence) on usable data that result in only incremental gains.

However, designing in such an iterative way allows you to understand user needs with more confidence than just intuition. We learned that new users on web wanted to know about all the features without deciding which ones upfront.


~ fin ~