This was a project I started in September 2011 and launched in December 2011.

I wanted a way to search through my photos on my iPhone. More specifically, photos with my girlfriend, at the time. My plan was to focus on using keywords or phrases that reminded me of the photo, so that I had a higher chance of finding it.

Here’s how I went from idea to implementation.

Introduction

I came up with the name Love Notes because I was very focused on the couples/relationships market. “Love” represented the relationship and “Notes” represented taking notes to remember the moment.

I wanted my product to have these main features:

  • Browse my photos in a grid or full screen, not necessarily in chronological order
  • Search for specific photo(s) based on keywords or a phrase I write after uploading the photo to the library

I wasn’t an iOS engineer (still not) so I hired a freelancer on eLance (now known as UpWorks) to help me with this project.

I provided the engineer with the following wireframe and product requirements.

Wireframe

Love Notes iOS App

Product Requirements

Title Screen

  • This screen will be the main starting screen will just consist of the Title, Start Button, and some information.

Photo Album Screen

  • This screen will have thumbnails of pictures already taken. If empty, be filled with empty thumbnails.  Clicking on the thumbnails will lead to the Photo Page.
  • On top of the screen will be a Search Bar to search through photos that has notes. As the user starts typing in to the search box, the list should fill up with the thumbnails according to each letter typed in. They are then able to scroll through the thumbnails and select whichever thumbnail they would like. Search should be separate from the Notes Screen.
  • Should function the way the Camera Roll in the iPhone’s Photo Album does.
  • On the bottom of the screen will be two icons to switch between the Photo Screen and the Notes Screen.

Photo Page

  • This page will have the full image with a field below it to add notes.
  • The photos will have direction arrows on the side and when pressed will go to the previous or next photo.
  • On the bottom of the page should be four icons. The first should be the Previous Photo icon, followed by the Share icon, Trash/Delete icon, then Next Photo icon.

Notes Screen

  • This screen will have list of notes taken and will only show the Subject field of the Notes Page. Pressing the note will lead to the Notes Page.
  • On top of the screen will be a Search Bar to search through the Notes. As the user starts typing in to the search box, the list should fill up according to each letter typed in. They are then able to scroll through the notes and select whichever note they would like. Search should be separate from the Photo Screen.
  • Should function the way the Notes application on the iPhone does.
  • On the bottom of the screen will be two icons to switch between the Photo Screen and the Notes Screen.

Notes Page

  • This page will have two fields. The first field is the Subject field so users can label their notes.
  • The second field is for the notes to be written and edited.
  • On the bottom of the page should be four icons. The first should be the Previous Photo icon, followed by the Share icon, Trash/Delete icon, then Next Photo icon.
  • Should function the way the Notes application on the iPhone does.

Design

I quickly learned that the engineer I hired would not provide any support with design. So the first iteration, or prototype, of the app was bare bone but followed my wireframe.

I ended up doing all the design on my own using Adobe Photoshop.

I had to pay attention to the two formats, regular resolution and @2x resolution to support retina display and compatibility on the iPad. For perspective, the iPhone 4S was just released and iPad 2 was available.

I started with the logo first. The logo set the tone for the rest of the app.

I went through several iterations but I wanted two core visuals:

  • A camera to represent photos
  • A heart to represent love or being in a relationship (I know, kinda cheesy haha)

This was my final version:

Love Notes Logo and Icon

Here is the rest of the app and my thoughts on the design.

Home

At first, I wanted to emphasize adding new photos when users first started using the app.

Prototype Home Screen of Love Notes

Then I decided to consolidate the bottom navigation bar and replaced it all with a simple Add Photo button. It saved space and encouraged users to fill up the library.

Home Screen of Love Notes

Add Photo

Adding a Photo in Love Notes

Add Description or Keywords

The user had the option to write either. The goal was to write down as much as possible to provide a search result.

Adding Description or Keyword in Love Notes

I decided to use a fixed thumbnail parameter, visualized with the blue corner borders, to support horizontal, vertical, and squared photos. This allowed the option to type the Description or Keywords without scrolling and kept the entire step on one page.

Once saved, the photo would be visible in full screen.

Photo View

Photo View in Love Notes

I was Team Jacob.

The default view of the photo was full screen with the Description visible but tapping on the photo hid the Description and navigation bar.

A user could swipe left (to go back) or right (to go forward) when they browsed through their photo library. In addition, the bottom navigation bar provided left and right arrows that could be pressed to do the same.

Edit Description or Keywords

In Photo View, there was an option to Edit on the top right.

The Edit mode brought users back to the same screen as when they added the Description or Keywords.

Search

The Search bar was only visible on the Home page and in the Search results.

Search in Love Notes

Search in Love Notes

Results using the search parameter “chilly willy”.

Share

I included the Share feature to pick up organic growth when users shared it on Facebook. In 2011, sharing on Facebook meant visibility in their friends’ Feed.

Share and Shuffle on Love Notes

Shuffle

The Shuffle feature was a “nice to have” feature because I wanted a way to randomize the photo library when browsing.

Shuffle could not be used in complete full screen mode because the button needed to be visible to be pressed.

Product Screenshots

In the Apple App Store, I used the screenshots to highlight all the features of the app.

Loves Note in the App Store

Organize and Search

Loves Note in the App Store

Remember

Loves Note in the App Store

Share and Shuffle

Product Launch

Before submitting Love Notes to the Apple App Store, I created a website and Facebook page for the app.

After Love Notes was successfully submitted to the App Store and approved, I shared the good news on Facebook with a link to download the app.

Most of my downloads came from my original Facebook post. I also received organic downloads in the Photo & Video category in the App Store. For a US product, many of my organic downloads came from South East Asia.

Lessons Learned

  • I should have expanded the idea for a bigger audience. Presently, Google Photos does exactly what I created Love Notes for. Google has done an amazing job detecting all the details in photos and making it easier to search them with keywords or phrases.
  • I should have tested with paid user growth but I mostly relied on organic reach from friends and word of mouth.
  • I should have focused more time on the Facebook page because most of my users were referred through Facebook.
  • I should have communicated with my users and asked for feedback and suggestions for product improvement and feature ideas.
  • I should have been more patient.

Love Notes was live for one year before I decided to shut it down.