Amplenote

taking notes anytime, anywhere

Amplenote is a note-taking app built by productivity enthusiasts because notes and to-dos are better together. Founder Bill and lead architect Jordan began working on this product in 2017, with our internal team serving as the initial beta test group. As part of the launch team, I designed most of our landing pages and marketing collateral, the most impactful being the Amplenote homepage.

Defining the problem

Amplenote was born out of necessity — Bill and Jordan had grown frustrated with the note-taking solutions available, and wanted to create something simple, dependable, and informative. Here are some of the problems we identified:

• Unnecessary feature bloat. Many of Amplenote’s competitors had a long list of customization options, but Bill felt that these were distractions. He wanted the focus of his notes to be on the content, not the formatting.

• Cross-device syncing was not reliable. Many note-taking apps on the market were built before the mobile era, making their mobile solutions glitchy. Amplenote was built mobile-first to combat this widespread issue.

• Tangential information couldn’t be easily shared. Bill has a penchant for supplemental facts, and couldn’t find a way to share secondary information in a way that didn’t distract from the note’s main purpose.

Identifying desired outcomes

When I began designing the homepage, I wanted to make sure all major stakeholders were being considered. We needed the final product to align with Bill’s product vision, Jordan’s workflow, and our goals for the business as a whole. I also wanted to nail down the messaging, selling points, and information hierarchy. With that in mind, I crafted the following user stories:

• As a note-taker, I want my notes to be accessible, all-encompassing, and easily editable.

• As a potential client, I want to find out if this tool is right for me. I want to see it in action and learn about how it will help me.

• As a product owner, I want to communicate with potential clients that this tool makes productivity attainable.

Designing a Solution

I wanted to use organic texture to contrast with the abundance of technical screenshots and language we’d be using. Note-taking originated from ink and paper, so I wanted to use those elements as an homage to the art of taking notes. I wanted to include the larger team in this process, so we spent an afternoon creating patterns and paintings with watercolor sets. To go along with the organic textures and brush swipes we were using, I wanted to play with the container edges to create a less boxy homepage and give a feeling of congruence between page sections.

We needed the homepage to feature the tools that set us apart from our competitors. This included our minimalist text editor, data-driven to-do list, and supporting detail footnotes. I planned for a bite-sized carousel-style feature gallery to ease viewers into the product.

I stuck to an elevated and vibrant color palette that aligned to Amplenote’s UI styles. This included hues of blue and teal, with a few bright pops of aqua green and Caribbean red to add some contrast and intrigue.

I wanted the secondary section to focus on our offline syncing capabilities. This sets us apart from our competitors in a major way, and is a feature we wanted to call out on its own. To highlight our cross-device syncing feature, I created an animated gif that demonstrated a note being edited on a desktop device, and then immediately syncing with mobile devices. The goal was to make the section captivating and effective at communicating this keystone feature.

For our tertiary selling points, I used a 2x3 column layout to conserve vertical space and make it easy to adapt to mobile devices. I opted for simple icons and brief lines of copy to get the points across in a punchy way. This design drops to a single-column layout on mobile devices, and gets secondary information in front of the user without being verbose or boring.

Measuring the outcome

After a few final tweaks made by our senior programmer and CEO post-design and pre-development, our page was in place and we began to collect user email addresses. This product has not yet formally launched publicly, but we expect this page to get significant traffic once the publicity for this tool ramps up.

Back to projects