Background

Noteables is a “negativity-free” social media app aimed at curating important memories and evoking a feeling of nostalgia for its users. In our discovery workshop, we learned their “MemorySpark” feature was resonating with users, but needed to be more prominent. As with our other major goals, we wanted to streamline their onboarding experience and update their basic look and feel.

Services

 

Product definition workshop

Mobile application audit

User interface design

Mobile app design (iOS/Android)

Onboarding


Challenges

Noteables’ initial onboarding sequence was too long and did not evoke feelings of nostalgia. A key usability problem was that we wanted users to connect their other social media accounts to show the value of curating with Noteables, but users could only do that through the “settings” menu rather than during onboarding itself.

[foogallery id=”1588″]

Solution

We replaced the prominent Noteables branding with photos that would allow users to imagine how their own experiences would display in the app. We focused the copy and reduced the sequence from 5 screens to 3, while still explaining what makes Noteables unique. We also integrated social features into the onboarding flow itself.

[foogallery id=”1590″]

Primary Screen


Challenges

The original interface contained redundant actions and complicated nested tabs, making it confusing and difficult to navigate. The colors and UI design were also too “heavy” and didn’t leave space for users to represent their own personality.

[foogallery id=”1593″]

Solution

We reorganized the screens to make “Activity” the default tab, eliminated unnecessary interactions, and overhauled the MemorySpark interface, placing it in a prominent central position.We refreshed the visual design with a lighter color palette and placed more emphasis on the imagery.

[foogallery id=”1595″]

Adding a Note/Memory


Challenges

Users initially launched “New Note!” from the navigation tabs, which aside from being inconsistent with how other tabs behaved, made it unclear where the note would actually appear once created.

The information hierarchy within the new note interface was not clear. Users were not aware that they could interact with the date and location elements.

[foogallery id=”1597″]

Solution

We removed “Add a Memory” from the navigation tabs and placed it as an action on both the “Activity” and “My Life” pages so that users were able see their note as soon as it was added.

To resolve the hierarchy confusion, we used inline editing on the note interface, increased the space available for writing, and divided the screen into text on top, pictures on the bottom.

[foogallery id=”1599″]

Results


With an updated mobile interface, Noteables is now better positioned to make a name for itself in the crowded social media space. After some market research, the company is in talks with universities, private K-12 schools, and other organizations trying to add value to their alumni networks to boost the Noteables’ userbase and show everyone that social media can be fun rather than frustrating.

We can take your product from idea to existence. Get in touch with our designers to address a critical need or to collaborate on a great idea.