Skip to main content
Memoory logo
Memoory

Memoory: Social Mobile App

I redesigned how people discover, record and share stories, bringing Memoory's navigation, screens and visual identity into one system.

  • Mobile App
  • UX/UI
  • Brand Identity
  • User Research

Project overview

  • Overview

    Navigation, recording and sharing in one social app

    Redesigned the seed-funded social app Zipstrr as Memoory, connecting onboarding, recording, and collaborative video creation.

  • Role

    Lead Product Designer

    User research, wireframing, logo and brand, UI design, and the design system.

    Team: CEO, CTO, lead developer, volunteer testers

  • Problem

    Too much to learn before recording

    Zipstrr combined recording, group projects, messaging, editing, and publishing. New users struggled to understand these features before recording a clip.

  • Solution

    Start with a clip, grow into projects

    Use familiar social navigation, introduce features gradually, and distinguish recording from collaborative projects. A new brand system connected the experience.
Memoory app overview: crowdsourced video creation for millennials
Memoory connects video contributions around shared events.

Auditing the existing app

I reviewed the app, stakeholder questions, data model, and specifications to identify unclear flows.
Side-by-side comparison of v1 UI and relaunched Memoory design
The original app and the Memoory redesign.

People creating videos around shared events

Primary persona for the event-anchored social creator
Market research demographics for core user groups
Primary persona and supporting audience research.

Four changes from testing

Seven participants reviewed the core flows. The findings changed onboarding, projects, recording states and social navigation3, 5.

Study setup and supporting material

Testing focused on goal clarity, navigation recall, and capture states.
respondents
7
test screens
23
prompts per screen
5
median response window
1h 30m

Supporting archive: 131 final UI exports, 45 wireframe states, 23 test screens and 10 flow maps.

Testing the core flows

  • Memoory wireframe: first-run start screen

    Start

  • Memoory wireframe: topic selection

    Topics

  • Memoory wireframe: social mobile feed

    Feed

  • Memoory wireframe: projects list

    Projects

  • Memoory wireframe: project edit screen

    Project edit

  • Memoory wireframe: recorder done screen

    Recorder

  • Memoory wireframe: inbox list

    Inbox

  • Memoory wireframe: group message thread

    Messages

  • Memoory wireframe: player screen

    Player

  • Memoory wireframe: user profile screen

    Profile

Three design principles

  • First action

    Make the first action useful

    Show relevant content before introducing projects, profiles, and publishing.

  • Capture clarity

    Separate recording, review, and done

    Show whether a clip is recording, ready for review, being edited, or ready to share.

  • Social grammar

    Use familiar navigation

    Keep feed, messaging, profile, and follow patterns recognizable while introducing collaborative projects.
Glossy 3D Memoory design-principles visual with chat bubbles, film strips, video cards, and recording controls

From research to implementation

  1. 01

    Review the existing app

    Review research notes, wireframes, flow maps, and test results.

  2. 02

    Identify unclear interactions

    Identify comprehension issues in onboarding, projects, recording, and chat.

  3. 03

    Resequence onboarding

    Move through welcome, verification, interests, and follows into a populated feed.

  4. 04

    Prepare the handoff

    Document screens, motion, component states, icons, and brand assets.

Map discovery, recording and collaboration

The flow map links each tab to viewing, recording, editing, publishing, and notifications.
Memoory app-wide user flow map showing onboarding, main navigation, feed, projects, recorder, editor, player, profile, messaging, notifications, and return loops.
Scroll to follow onboarding, capture, publishing, and return paths.

A guided path into the feed

Onboarding introduces one step at a time: welcome, verification, interests, follows, then a populated feed2. Recording stays one tap away1.

Memoory final UI: welcome slide one
Welcome 01
Memoory final UI: welcome slide two
Welcome 02
Memoory final UI: first-run start screen
Start
Memoory final UI: code entry screen
Code entry
Memoory final UI: selected interests
Topics
Memoory final UI: selected follow suggestions
Follow
First-run motion through setup and feed entry.

The final mobile experience

Memoory final UI: welcome screen
Screen 1 of 12

01. Welcome

Introduce the app and start setup.

The visual system and handoff

The handoff included component specifications, icons, the app mark, loading motion, and launch materials.
UI specs documenting typography, color, and component states
Component specifications for handoff.
Memoory onboarding animation sequence
First-run onboarding.
Memoory app screen set seven
Mobile app overview.
Memoory app screen set six
Sharing experience
Memoory app screen set five
Recording and editing
Final mobile screens and onboarding states.
Memoory app icon on device home screen
Finalized Memoory logo mark
App icon and final mark.
Logo hand-sketching animation
Logo mark loader animation
Logo sketch and animated loading mark.
Branded mugs mockup
Branded t-shirt mockup
Launch applications: mugs and T-shirt.

I would measure how long it takes a new user to find a relevant story and record a first clip, then use those results to refine onboarding.

Shipped with

  • CEO & CTO

    Product vision and technical direction

  • Lead developer

    Built iOS, Android, the feed, and the contributor flow

  • Volunteer testers

    Diary studies and usability sessions

Sources

5 references
  1. developer.apple.com
    Apple Human Interface Guidelines: keep onboarding brief and teach through actions people can try in context.
  2. andrewchen.com
    Andrew Chen on the cold start problem for social products: make the app useful to one user before the network arrives, so the first session is not an empty feed.
  3. nngroup.com
    Nielsen Norman Group's formative usability-testing guidance supports small iterative rounds for finding behavior patterns early, before design decisions become expensive to change.
  4. nngroup.com
    Nielsen Norman Group's usability heuristics framed the synthesis: visibility of system status, match to real-world mental models, consistency, recognition over recall, and error recovery.
  5. akendi.com
    Akendi’s Experience Thinking framework considers product, content, brand and service touchpoints in user research.

More work