MEMORI APP
OVERVIEW
Memori is an iOS application designed to help users capture, store, and manage business cards with ease. By converting photos into structured contact data, it supports professionals in updating and organizing their network more efficiently.
Recently, Memori was acquired by a South Korean tech company aiming to integrate it into their broader ecosystem of productivity apps. As part of the acquisition, our design team was tasked with finalizing the product and preparing a complete design handoff to their in-house team — all within a tight 2-weeks.
ROLE
UI Design
Design systeam, visual design, documentation
10/2023 - 12/2023
Team & Workflow
Our team consisted of 4 designers working collaboratively to redesign and document the Memori app’s design system within a tight two-week deadline. I was assigned specific responsibilities by our team lead, contributing as a core team member using Figma as our primary design tool.
Timeline & Challenge
Deadline: 2 weeks
Main challenge: Tight delivery timeline and need for high scalability and clarity for handoff
Goal: Redesign and document the full design system for handover to a Korean in-house team
How We Started
We kicked off the project with a clear mission: redesign and document Memori’s design system to ensure future scalability and maintainability for the in-house team in Korea. With only two weeks to deliver, we needed to move fast but think long-term.
Requirement Brief: Our team lead shared the project brief outlining existing UI issues and handoff expectations. We learned that the current UI components lacked consistency and scalability. Documentation was sparse, and token usage was either missing or inconsistent.
Initial Audit: As a team, we conducted a quick audit of the existing UI components to identify major issues: duplicated styles, inconsistent padding, and no shared design tokens. This helped us define our redesign priorities.
Goal Alignment: We aligned on deliverables early—focusing on building a structured, token-based component system with clear documentation to help the in-house team scale designs efficiently.
Workstream Planning: Tasks were broken down based on component groups. I was assigne interactive components like buttons and colours, and was responsible for designing, documenting, and ensuring consistency with the new system.
Brainstorm Session
To ensure we were designing something future-proof and not just a quick fix, we hosted a collaborative brainstorming session on the second day.
Here are the key problems we uncovered:
🔹 Issue #1: Inconsistent spacing and layout logic
Pain point: Some components had arbitrary padding/margin values that weren’t aligned with a grid or spacing system.
My proposal: I suggested a base spacing scale (e.g., 4/8/12/16px) that could be applied consistently across all components and nested elements.
Impact: This formed the basis for our spacing tokens, improving both visual rhythm and developer handoff clarity.
🔹 Issue #2: Inconsistent button styles across flows
Pain point: Primary, secondary, and tertiary buttons looked different in various screens, making it hard to maintain design consistency.
Team solution: We defined strict guidelines for button states (default, hover, disabled) and introduced a flexible variant system.
My role: I was responsible for documenting the usage rules and designing the button group in Figma using these new variants.
🔹 Issue #3: Missing or outdated color tokens
Pain point: Multiple shades of the same color were used without definition, creating inconsistency in brand appearance.
Solution: One team member introduced a structured color token system: color-primary, color-secondary, etc., with semantic names.
My input: I helped test and apply these tokens to my assigned components to ensure clarity and contrast accessibility.
🔹 Issue #4: Lack of documentation for developers
Pain point: Developers had difficulty knowing how and when to use each component.
Team agreement: We agreed to write simple, clear documentation right inside Figma using annotations and naming conventions.
My contribution: I documented interaction guidelines, such as hover/disabled states, spacing, and token usage for my components.
Design System Output
PRESENTATION
To ensure a smooth transition, we organized a handoff session with the in-house team. During this presentation, we:
- Walked through the entire design system, explaining our rationale behind key design decisions, such as the scalable spacing system and semantic color tokens.
- Demonstrated how to use Figma components and variants efficiently for rapid prototyping and consistent UI development.
- Provided detailed documentation embedded within Figma, including usage guidelines and best practices to maintain design consistency.
- Answered questions from the in-house team and addressed concerns about adapting the system to future needs.