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.
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.
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.
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.
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.
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.
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.