One Good Card
One Good Card
Collaborated directly with One Good Card developer and design team, creating a comprehensive design system from scratch to guide the development of the company's mobile site and app, with a focus on seamless and intuitive user experience.
Collaborated directly with One Good Card developer and design team, creating a comprehensive design system from scratch to guide the development of the company's mobile site and app, with a focus on seamless and intuitive user experience.
Project:
Project:
Design System & App Design
Design System &
App Design
Design System & App Design
Role:
Role:
UX Researcher
UX Researcher
Product Designer
Product Designer
Team:
Team:
Jermin, Gracey
Jermin, Gracey
Year:
Year:
2023
2023
![](https://framerusercontent.com/images/d9bdpEXRJmiW3xXlJqliXbFSQ.png)
![](https://framerusercontent.com/images/d9bdpEXRJmiW3xXlJqliXbFSQ.png)
![](https://framerusercontent.com/images/nlTKU0ZxtKcw33GjCnXPzrZ6NwI.png)
![](https://framerusercontent.com/images/nlTKU0ZxtKcw33GjCnXPzrZ6NwI.png)
![](https://framerusercontent.com/images/nlTKU0ZxtKcw33GjCnXPzrZ6NwI.png)
![](https://framerusercontent.com/images/53HgilbGrtLOKWCUSGzi2e2nOw.png)
![](https://framerusercontent.com/images/53HgilbGrtLOKWCUSGzi2e2nOw.png)
![](https://framerusercontent.com/images/53HgilbGrtLOKWCUSGzi2e2nOw.png)
![](https://framerusercontent.com/images/mHfC70iHWcpbRxvsJlIqQY9I.png)
![](https://framerusercontent.com/images/mHfC70iHWcpbRxvsJlIqQY9I.png)
![](https://framerusercontent.com/images/TZgup0IhXP6fHN8VgySaZhmhB3w.png)
![](https://framerusercontent.com/images/TZgup0IhXP6fHN8VgySaZhmhB3w.png)
![](https://framerusercontent.com/images/q2pxzLlPyCi5aT96LrXCTPJhEg.png)
![](https://framerusercontent.com/images/q2pxzLlPyCi5aT96LrXCTPJhEg.png)
![](https://framerusercontent.com/images/signaXM5TMBmj6dXuqG2hGryVT0.png)
![](https://framerusercontent.com/images/signaXM5TMBmj6dXuqG2hGryVT0.png)
![](https://framerusercontent.com/images/signaXM5TMBmj6dXuqG2hGryVT0.png)
![](https://framerusercontent.com/images/aSGzOHHYsEzPIE5VXpB6i0IRsek.png)
![](https://framerusercontent.com/images/aSGzOHHYsEzPIE5VXpB6i0IRsek.png)
![](https://framerusercontent.com/images/aSGzOHHYsEzPIE5VXpB6i0IRsek.png)
Context
Context
One Good Card provides digital alternatives to paper business cards, trusted by 120k+ users and 2000+ companies worldwide.
As the service expands, the developer team planned to establish a design system and enhance their digital name card customization platform to be more user-friendly and functional.
One Good Card provides digital alternatives to paper business cards, trusted by 120k+ users and 2000+ companies worldwide.
As the service expands, the developer team planned to establish a design system and enhance their digital name card customization platform to be more user-friendly and functional.
What OGC Users Talked about the Current Platform
What OGC Users Talked about the Current Platform
"I want to have more flexibility to design the look & customize content priority to control how my contacts view my card."
"I want to have more flexibility to design the look & customize content priority to control how my contacts view my card."
"I want to have more flexibility to design the look & customize content priority to control how my contacts view my card."
"I want to organise the contacts added conveniently so that it’s easier to search and maintain the connection."
"I want to organise the contacts added conveniently so that it’s easier to search and maintain the connection."
"I want to organise the contacts added conveniently so that it’s easier to search and maintain the connection."
"I'd like to gain insights into my contact's background to develop a deeper personal understanding of them."
"I'd like to gain insights into my contact's background to develop a deeper personal understanding of them."
"I'd like to gain insights into my contact's background to develop a deeper personal understanding of them."
Customer Journey Map
Customer Journey Map
ACTION
ACTION
ACTION
Determine the layout and information displayed
Determine the layout and information displayed
Determine the layout and information displayed
Determine the layout and information displayed
Create a design that reflects brand identity and personality
Create a design that reflects brand identity and personality
Create a design that reflects brand identity and personality
Create a design that reflects brand identity and personality
Presents her OGC name card to new acquaintances
Presents her OGC name card to new acquaintances
Presents her OGC name card to new acquaintances
Presents her OGC name card to new acquaintances
Receive name cards
Receive name cards
Receive name cards
Receive name cards
Tracks down name card to contacts
Tracks down name card to contacts
Tracks down name card to contacts
Tracks down name card to contacts
GOALS &
EXPERIENCE
GOALS &
EXPERIENCE
GOALS &
EXPERIENCE
To prioritize certain features to be shown on top of the name card
To prioritize certain features to be shown on top of the name card
To prioritize certain features to be shown on top of the name card
To prioritize certain features to be shown on top of the name card
To be selective about the information she shares with different people
To be selective about the information she shares with different people
To be selective about the information she shares with different people
To be selective about the information she shares with different people
To bring over personal/corporate branding to One Good Card
To bring over personal/corporate branding to One Good Card
To bring over personal/corporate branding to One Good Card
To bring over personal/corporate branding to One Good Card
To make a lasting impact by revealing unique characters
To make a lasting impact by revealing unique characters
To make a lasting impact by revealing unique characters
To make a lasting impact by revealing unique characters
To share OGC efficiently & ensure the receivers know how to save her contact
To share OGC efficiently & ensure the receivers know how to save her contact
To share OGC efficiently & ensure the receivers know how to save her contact
To share OGC efficiently & ensure the receivers know how to save her contact
To capture info on where they met, common interests, etc to establish rapport in future meetings
To capture info on where they met, common interests, etc to establish rapport in future meetings
To capture info on where they met, common interests, etc to establish rapport in future meetings
To capture info on where they met, common interests, etc to establish rapport in future meetings
To reconnect in a personal and/or professional capacity
To reconnect in a personal and/or professional capacity
To reconnect in a personal and/or professional capacity
To reconnect in a personal and/or professional capacity
CUSTOMIZING CONTENT
🤨
CUSTOMIZING CONTENT
🤨
CUSTOMIZING CONTENT
🤨
CUSTOMIZING CONTENT
🤨
CUSTOMIZING DESIGN
🤔
CUSTOMIZING DESIGN
🤔
CUSTOMIZING DESIGN
🤔
CUSTOMIZING DESIGN
🤔
EXCHANGING CONTACTS
😎
EXCHANGING CONTACTS
😎
EXCHANGING CONTACTS
😎
EXCHANGING CONTACTS
😎
CONSOLIDATING AFTER NETWORKING
😫
CONSOLIDATING AFTER NETWORKING
😫
CONSOLIDATING AFTER NETWORKING
😫
CONSOLIDATING AFTER NETWORKING
😫
PAINPOINTS
PAINPOINTS
PAINPOINTS
Unable to customize card to present multiple titles and roles
Unable to customize card to present multiple titles and roles
Unable to customize card to present multiple titles and roles
Unable to customize card to present multiple titles and roles
Unable to tailor specific info to display for chosen groups of connections
Unable to tailor specific info to display for chosen groups of connections
Unable to tailor specific info to display for chosen groups of connections
Unable to tailor specific info to display for chosen groups of connections
Unable to intuitively rearrange the widgets
Unable to intuitively rearrange the widgets
Unable to intuitively rearrange the widgets
Unable to intuitively rearrange the widgets
Dislikes not having templates/suggested color palettes to choose from
Dislikes not having templates/suggested color palettes to choose from
Dislikes not having templates/suggested color palettes to choose from
Dislikes not having templates/suggested color palettes to choose from
Unable to customize card to fully present personal/business branding
Unable to customize card to fully present personal/business branding
Unable to customize card to fully present personal/business branding
Unable to customize card to fully present personal/business branding
Currently unable to capture such information
Currently unable to capture such information
Currently unable to capture such information
Currently unable to capture such information
Can’t manage to organise the cards received
Can’t manage to organise the cards received
Can’t manage to organise the cards received
Can’t manage to organise the cards received
Finds it hard to recall whom exchanged cards with
Finds it hard to recall whom exchanged cards with
Finds it hard to recall whom exchanged cards with
Finds it hard to recall whom exchanged cards with
Cannot tell who saved contact card successfully
Cannot tell who saved contact card successfully
Cannot tell who saved contact card successfully
Cannot tell who saved contact card successfully
Cannot find out more context about new contacts
Cannot find out more context about new contacts
Cannot find out more context about new contacts
Cannot find out more context about new contacts
IMPROVEMENT
OPPORTUNITIES
IMPROVE-MENT
OPPORTU-NITIES
IMPROVEMENT
OPPORTUNITIES
To have a number of different, fully customizable cards she can show others.
To have a number of different, fully customizable cards she can show others.
To have a number of different, fully customizable cards she can show others.
To have a number of different, fully customizable cards she can show others.
Design interface/icons to be more intuitive
Design interface/icons to be more intuitive
Design interface/icons to be more intuitive
Design interface/icons to be more intuitive
Provide help & documentation in ‘i’ info buttons
Provide help & documentation in ‘i’ info buttons
Provide help & documentation in ‘i’ info buttons
Provide help & documentation in ‘i’ info buttons
Include suggested templates and tips on color combinations
Include suggested templates and tips on color combinations
Include suggested templates and tips on color combinations
Include suggested templates and tips on color combinations
Allow users to save their previously customized palettes
Allow users to save their previously customized palettes
Allow users to save their previously customized palettes
Allow users to save their previously customized palettes
A tagging feature to note down characters of the name card owner (background, interests etc)
A tagging feature to note down characters of the name card owner (background, interests etc)
A tagging feature to note down characters of the name card owner (background, interests etc)
A tagging feature to note down characters of the name card owner (background, interests etc)
Options to choose from a preset group of tags (suggested by OGC), or a customizable set of tags
Options to choose from a preset group of tags (suggested by OGC), or a customizable set of tags
Options to choose from a preset group of tags (suggested by OGC), or a customizable set of tags
Options to choose from a preset group of tags (suggested by OGC), or a customizable set of tags
A digital name card holder that categorizes the name cards for easy searching
A digital name card holder that categorizes the name cards for easy searching
A digital name card holder that categorizes the name cards for easy searching
A digital name card holder that categorizes the name cards for easy searching
Notifications to alert her to organise cards
Notifications to alert her to organise cards
Notifications to alert her to organise cards
Notifications to alert her to organise cards
Notifications that update her when her contacts edit their info
Notifications that update her when her contacts edit their info
Notifications that update her when her contacts edit their info
Notifications that update her when her contacts edit their info
Establish the OGC Design System
Establish the OGC Design System
![](https://framerusercontent.com/images/yRk0VwgBe9xgDyR89W5stpAY91M.png)
![](https://framerusercontent.com/images/yRk0VwgBe9xgDyR89W5stpAY91M.png)
![](https://framerusercontent.com/images/yRk0VwgBe9xgDyR89W5stpAY91M.png)
![](https://framerusercontent.com/images/B3PJDZZbzMJZpzVQqEviUuBacc.gif)
Customise Card Content
Allows to customize section headers and section orders. Users get to decide the content priorities.
Links such as Instagram, company official website
Uploads could include sales brochures, portfolios, etc.
Images for building personal branding or show card owner's unique characterisitics
![](https://framerusercontent.com/images/B3PJDZZbzMJZpzVQqEviUuBacc.gif)
Customise Card Content
Allows to customize section headers and section orders. Users get to decide the content priorities.
Links such as Instagram, company official website
Uploads could include sales brochures, portfolios, etc.
Images for building personal branding or show card owner's unique characterisitics
![](https://framerusercontent.com/images/B3PJDZZbzMJZpzVQqEviUuBacc.gif)
Customise Card Content
Allows to customize section headers and section orders. Users get to decide the content priorities.
Links such as Instagram, company official website
Uploads could include sales brochures, portfolios, etc.
Images for building personal branding or show card owner's unique characterisitics
![](https://framerusercontent.com/images/B3PJDZZbzMJZpzVQqEviUuBacc.gif)
Customise Card Content
Allows to customize section headers and section orders. Users get to decide the content priorities.
Links such as Instagram, company official website
Uploads could include sales brochures, portfolios, etc.
Images for building personal branding or show card owner's unique characterisitics
![](https://framerusercontent.com/images/A2K3dwLNHEmN4lHL7llw9SDQ0.gif)
Customise Card Design
Carry over the branding color scheme from your physical name card to your digital version.
Swap the colors among the banner, background, and icons.
Opt for image uploads instead of solid colors for banners and backgrounds.
![](https://framerusercontent.com/images/A2K3dwLNHEmN4lHL7llw9SDQ0.gif)
Customise Card Design
Carry over the branding color scheme from your physical name card to your digital version.
Swap the colors among the banner, background, and icons.
Opt for image uploads instead of solid colors for banners and backgrounds.
![](https://framerusercontent.com/images/A2K3dwLNHEmN4lHL7llw9SDQ0.gif)
Customise Card Design
Carry over the branding color scheme from your physical name card to your digital version.
Swap the colors among the banner, background, and icons.
Opt for image uploads instead of solid colors for banners and backgrounds.
![](https://framerusercontent.com/images/A2K3dwLNHEmN4lHL7llw9SDQ0.gif)
Customise Card Design
Carry over the branding color scheme from your physical name card to your digital version.
Swap the colors among the banner, background, and icons.
Opt for image uploads instead of solid colors for banners and backgrounds.
![](https://framerusercontent.com/images/hTsFngx5Vigf1A2ND77PQ0IJneA.gif)
![](https://framerusercontent.com/images/tnxBnd5lvWVbuVLVVJkA2qs8G0.gif)
Customise Card Design
Easily apply preset color templates with a single click.
Or select any color from the wheel for card design customization.
Compatible colors can be recommended based on the color of your preference.
![](https://framerusercontent.com/images/hTsFngx5Vigf1A2ND77PQ0IJneA.gif)
![](https://framerusercontent.com/images/tnxBnd5lvWVbuVLVVJkA2qs8G0.gif)
Customise Card Design
Easily apply preset color templates with a single click.
Or select any color from the wheel for card design customization.
Compatible colors can be recommended based on the color of your preference.
![](https://framerusercontent.com/images/hTsFngx5Vigf1A2ND77PQ0IJneA.gif)
![](https://framerusercontent.com/images/tnxBnd5lvWVbuVLVVJkA2qs8G0.gif)
Customise Card Design
Easily apply preset color templates with a single click.
Or select any color from the wheel for card design customization.
Compatible colors can be recommended based on the color of your preference.
![](https://framerusercontent.com/images/hTsFngx5Vigf1A2ND77PQ0IJneA.gif)
![](https://framerusercontent.com/images/tnxBnd5lvWVbuVLVVJkA2qs8G0.gif)
Customise Card Design
Easily apply preset color templates with a single click.
Or select any color from the wheel for card design customization.
Compatible colors can be recommended based on the color of your preference.
![](https://framerusercontent.com/images/4vtvFZ3PbAOWp0nmyTO5sBAHAVE.gif)
Organise Contacts
After adding contacts, the option to add tags and descriptions is readily accessible.
Organize your contacts by their tags or create custom tags for various groups.
Edit the info of where & when you meet the contact at any time.
![](https://framerusercontent.com/images/4vtvFZ3PbAOWp0nmyTO5sBAHAVE.gif)
Organise Contacts
After adding contacts, the option to add tags and descriptions is readily accessible.
Organize your contacts by their tags or create custom tags for various groups.
Edit the info of where & when you meet the contact at any time.
![](https://framerusercontent.com/images/4vtvFZ3PbAOWp0nmyTO5sBAHAVE.gif)
Organise Contacts
After adding contacts, the option to add tags and descriptions is readily accessible.
Organize your contacts by their tags or create custom tags for various groups.
Edit the info of where & when you meet the contact at any time.
![](https://framerusercontent.com/images/4vtvFZ3PbAOWp0nmyTO5sBAHAVE.gif)
Organise Contacts
After adding contacts, the option to add tags and descriptions is readily accessible.
Organize your contacts by their tags or create custom tags for various groups.
Edit the info of where & when you meet the contact at any time.
![](https://framerusercontent.com/images/bltIyjWjqhNeUMrzgo9xWPSFo0M.gif)
Track Analytics
Keep track of who has viewed your cards and where the click counts come from.
Track data of your interactions during socialising events.
![](https://framerusercontent.com/images/bltIyjWjqhNeUMrzgo9xWPSFo0M.gif)
Track Analytics
Keep track of who has viewed your cards and where the click counts come from.
Track data of your interactions during socialising events.
![](https://framerusercontent.com/images/bltIyjWjqhNeUMrzgo9xWPSFo0M.gif)
Track Analytics
Keep track of who has viewed your cards and where the click counts come from.
Track data of your interactions during socialising events.
![](https://framerusercontent.com/images/bltIyjWjqhNeUMrzgo9xWPSFo0M.gif)
Track Analytics
Keep track of who has viewed your cards and where the click counts come from.
Track data of your interactions during socialising events.
What our clients said
What our clients said
"It was a joy to work with Zhi Qing on the project given her abilities and her inquisitive nature which makes her a great UX Designer."
"It was a joy to work with Zhi Qing on the project given her abilities and her inquisitive nature which makes her a great UX Designer."
"… She was also quick to grasp what we needed for the project and was able to solve our problem with her design skills and useful insight that she and her group drew from her research. "
"… She was also quick to grasp what we needed for the project and was able to solve our problem with her design skills and useful insight that she and her group drew from her research. "
"…Overall, given her background and her experience, Zhi Qing is a great UX designer and anyone would be lucky to have her as part of the team."
"…Overall, given her background and her experience, Zhi Qing is a great UX designer and anyone would be lucky to have her as part of the team."
"It was a joy to work with Zhi Qing on the project given her abilities and her inquisitive nature which makes her a great UX Designer."
"… She was also quick to grasp what we needed for the project and was able to solve our problem with her design skills and useful insight that she and her group drew from her research. "
"…Overall, given her background and her experience, Zhi Qing is a great UX designer and anyone would be lucky to have her as part of the team."
"It was a joy to work with Zhi Qing on the project given her abilities and her inquisitive nature which makes her a great UX Designer."
"… She was also quick to grasp what we needed for the project and was able to solve our problem with her design skills and useful insight that she and her group drew from her research. "
"…Overall, given her background and her experience, Zhi Qing is a great UX designer and anyone would be lucky to have her as part of the team."
Proposed Future Steps
Proposed Future Steps
Proposed Future Steps
Proposed Future Steps
![](https://framerusercontent.com/images/lFQUbyvCTzqMs74rjRYdlo1isU.jpg)
Interactivity
Explore possibilities adding animated features such as videos and gifs to name card content, so the card is more visually engaging.
![](https://framerusercontent.com/images/sVBMQRY6D3ntUNmp3FA26dtk.jpg)
Design System Instructions
Develop the instructions & annotations on design system to further elaborate on the specs, dos & don’ts for the design components.
![](https://framerusercontent.com/images/6gctHPSd4luM1PjI9WIcmXL25k.jpg)
Track & Improve
Track and measure the conversion rate of the current design for further improvements.
More Projects
More Projects
Noah Garden Centre
A proposed redesign of an ecommerce website to improve the information architecture and the purchasing experience for the target users.
Role:
Project:
Year:Product Designer
Website Redesign
202303
Gallery Explorer
Gallery Explorer App redesign to provide accessible exhibition information & introduce a way-finding system to enhance the exploration of National Gallery of Singapore.
Role:
Project:
Year:Product Designer
Mobile App Redesign
2023
Noah Garden Centre
A proposed redesign of an ecommerce website to improve the information architecture and the purchasing experience for the target users.
Role:
Project:
Year:
Product Designer
Website Redesign
2023
03
![](https://framerusercontent.com/images/bBO8N2CzlpJZMy68H720wAcsFx4.png)
![](https://framerusercontent.com/images/CcdB1gDF8u0vNcD8POZjlojQ.png)
![](https://framerusercontent.com/images/BynZNKpSecs1235GpxuPm3zeVKs.png)
03
![](https://framerusercontent.com/images/bBO8N2CzlpJZMy68H720wAcsFx4.png)
![](https://framerusercontent.com/images/CcdB1gDF8u0vNcD8POZjlojQ.png)
![](https://framerusercontent.com/images/BynZNKpSecs1235GpxuPm3zeVKs.png)
Gallery Explorer
Gallery Explorer App redesign to provide accessible exhibition information & introduce a way-finding system to enhance the exploration of National Gallery of Singapore.
Role:
Project:
Year:
Product Designer
Mobile App Redesign
2023
zhiqing | porfolio