Memori
Build a basic Design System for Memori App – a business card storage application that a South Korean B2B company has acquired.
Final capstone project for Product Design course offered by Staylab.
Role
Product Designer
Project Timeline
Oct - Dec, 2023 (12 weeks)
Stakeholders
Memori’s parent company
Customers (Staylab’s mentors and students)
Skills
#Product Design #Design System #Mobile
About the company
Memori App is a native mobile application on iOS developed by a Vietnamese startup company. Its primary purpose is to allow users to capture business cards, with the app using this information to update personnel profiles.
After the launch of two versions of the app, a B2B company from South Korea acquired it to further develop it as part of their human resources management application ecosystem.
Consequently, at this stage, the entire app will be transferred to the parent company. This design is no exception.
The challenges…
Unexpected circumstances arise as I undertake this Design System: In a short timefreame (one sprint), I must hand over the current design of the app. This will enable the in-house product team of the parent company to continue the development of this product.
Therefore, the design needs to be detailed enough for the development team to thoroughly understand and efficiently implement it, ensuring both consistency and quality of the product. However, given that the design team only consists of one member, this demands I must form a deep understanding of both the current state of the application and the future development goals of the parent company.
The current stage of the Design System:
Components lack proper grouping and documentation. This would mean we would waste time setting up a components library every time we start a new project or a new phase in our project.
-> Therefore, we need to recreate old components as well as gather use cases for each component.
The solutions💡
Before redesigning, I carefully considered among 3 methodologies to building my Design System:
🌟 Adopt
Apply according to an existing Design System
Pros: Cost-effective as it utilizes an existing Design System.
Cons: Requires adjustments and updates to reflect real-world requirements in long-term design.
🌟 Adapt
Adjust from an existing Design System
Pros:
Suitable for specific organizational needs when an existing Design System falls short.
The least costly approach because the more adjustments and new designs are required, the more time and effort it takes to implement.
Cons: Requires adjustments and updates to reflect real-world requirements in long-term design.
🌟 Create
Create a completely new Design System
Pros: Fully meets specific requirements, allows for creative freedom.
Cons: Requires significant investment in time and effort, needs continuous maintenance and updates.
-> In the end, I choose ‘Adapt’ based on the current needs of the project.
Ideation
Under time constraints and limited resources, I determine that the focus will be on complete foundational components (including grid, colors, and typography), core components (including buttons, input fields, navigation tabs, indicators, etc.). These components will provide sufficient design for the human resources management system that the business is aiming for.
💪 What I will do
Analyze the UI components and interfaces of Memori + list the instances of each component on various pages and flows.
💪 What I will do
Evaluate the needs of the former and current companies.
Identify similarities in the businesses, thereby determining which components should be retained in the Design System.
💪 What I will do
Organize and create documentation for the Design System for an effective design handoff.
The stages I went through…
Stage 1: Testing the prototypes and analyzing the main components on each flow
Stage 2: Grouping the components according to their use cases I have observed from the prototypes. This was the most challenging stage as I went through 4+ iterations until I could organize the components according to their use cases. I created a components list based on the common components used within the projects and made any new variants that are needed in future.
Stage 3: Narrowing down on the components list that are most needed and sufficient for the quickest market release. Made documentation for the Design System.
As scaling up the product in the initial stages for a quicker market release is crucial, meticulous components may be challenging to meet the fast deployment requirements. Therefore, my focus is on foundational, easy-to-use components.
My takeaways from this project…
This is my first Design System project where I was the sole designer. If I had more time, I would have had done some more iterations of the components library. Regardless, I have learned and grown exponentially during the process. Here are some of the important things that I have noted along the way:
💎 What I learned…
Knowing + Doing: The project simulates unexpected circumstances in a company that we, as designers, cannot anticipate. It pushes me to be adaptable and flexible in handling situations.
→ This is crucial for me to gain recognition memory and critical reflection as I learned how to build a basic Design System suitable for a solo team in a short timeframe.
💪 Future improvement
Developing a more detailed Design System, such as adding more states to the buttons components.
💎 What I learned…
Understanding the mechanics of:
Business Goal: Analyzing the constantly changing environment of a business and realizing that the product (and on a smaller scale, the design) must adapt promptly to business changes.
Design Operations: Given the team's resources and the extremely tight timeline, we as a designer will have to choose what is essential to do, knowing that we may have to sacrifice other things.
Product Ownership: Understanding that technical and business constraints might lead to outcomes in which we must learn how to achieve "Low Cost, High Impact."
💪 Future improvement
Since it is my first time working with Design System, the work pace is still quite slow despite the requirement for a fast product release. Therefore, improvement is needed, especially when analyzing and organizing components.
💪 Future improvement
Doing solo work involves many tasks, and there is a tendency to get lost while planning. Therefore, better time management is needed.