eGlobal Name Card
Overview
The Name Card Platform is a digital business card system that I
designed and developed from scratch. It allows professionals to
introduce themselves, share contact details, and even showcase
content modules like blogs and courses through a mobile-friendly
experience.
On the admin side, users can create their own name card, choose from seven templates, apply default or custom colors, and set up social links. Over time, I iterated from a simple initial flow into a more refined UX after observing real user feedback. The system also supports up to eight types of sections — from basic text, images, and videos to advanced modules such as blogs, landing pages, events, and courses.
On the frontend, name cards can be shared through QR code, direct link, or WhatsApp (customized with preset messages for the Hong Kong market). Users can also save a contact directly to their mobile device, and an additional blogs page is provided for sales use, displaying the profile alongside related content.
On the admin side, users can create their own name card, choose from seven templates, apply default or custom colors, and set up social links. Over time, I iterated from a simple initial flow into a more refined UX after observing real user feedback. The system also supports up to eight types of sections — from basic text, images, and videos to advanced modules such as blogs, landing pages, events, and courses.
On the frontend, name cards can be shared through QR code, direct link, or WhatsApp (customized with preset messages for the Hong Kong market). Users can also save a contact directly to their mobile device, and an additional blogs page is provided for sales use, displaying the profile alongside related content.
My Role
Requirement Translation
Starting only with a few reference images and minimal notes on information display, I defined the missing details and turned them into actionable requirements.
UI/UX Design
- Designed the interface layout and visual style to balance clarity with flexibility.
- After the first release, I analyzed real user feedback and restructured the flow to create a smoother and more intuitive experience.
Frontend Development
- Built the entire frontend using React and Tailwind Css, implementing responsive layouts and modular components.
- Used Next.js server-side rendering to generate dynamic meta tags for each name card profile, ensuring proper SEO indexing and accurate previews on social platforms.
- Created reusable section components that could handle diverse content needs, from simple text and media to complex modules.
Collaboration
Led communication with the backend developer, defining API data formats and discussing storage approaches. While I primarily drove decisions, I worked closely to address concerns and reach balanced solutions.
UI Highlights
Templates & Themes
Seven card templates with default theme colors and customizable palettes.
Preview of the seven name card templates available on the frontend
Admin panel interface for selecting templates and theme colors
Content Sections
Flexible blocks supporting text, media, files, and modules like blogs or courses.
Admin panel interface for adding new sections
Detailed editing view of different section types
Social & Contact Integration
Add social links and allow clients to save your card directly to contacts.
Admin panel view for adding social media links
Templates showing the option to save directly to phone contacts
Sharing Experience
Share via QR code, WhatsApp (with custom message), or direct link.
Frontend sharing options, including QR code scanning, WhatsApp with custom messages, and direct link copy
UX Refactor
Move Navigation to Sidebar
As the number of users grew, the original design—where the name card entry was hidden in the profile tab and dropdown—became harder to discover and inefficient. I redesigned the navigation by moving it into the sidebar menu, giving it higher visibility and reducing the number of clicks needed.
Before
After
Switch from Card View to Table View
The original card-based list hid many functions inside the "..." menu, making it harder to discover. I redesigned the layout into a
table view, surfacing all key actions in one list.
This reduced the learning curve, improved clarity, and made it easier for users to filter and manage multiple name cards.
This reduced the learning curve, improved clarity, and made it easier for users to filter and manage multiple name cards.
Before
After
Combine Steps and Add Live Preview
Originally, editing a name card required switching between two
separate tabs, making the process fragmented. I simplified the
flow by combining them into a single step and adding a preview
panel, so users can immediately see how their card will look as
they make changes.
Before
After
Add Avatar Crop Tool
When updating their profile photo, users often uploaded images that didn't fit the required 1:1 ratio. I added a built-in crop tool that lets users adjust and confirm their avatar before saving, ensuring consistent sizing and a cleaner presentation across templates.
Technical Highlights
Reusable React Components
Developed modular section components that can be reused across the platform.
Each section was designed to support style variations, allowing different templates to apply their own look and feel while keeping the codebase maintainable.
API Collaboration
Defined the API fields required for templates and sections, taking the lead in discussions with the backend developer to ensure that the data structures matched the frontend's needs.
As the project grew from a few basic section types to more complex ones, I proposed new requirements and worked through implementation trade-offs, making sure both sides stayed aligned while keeping the integration flexible and maintainable.
Next.js Server Rendering
Implemented server-side rendering with Next.js's metadata API to dynamically generate meta tags based on each card's settings.
If the card is set to corporate mode, metadata is pulled from company details. If set to personal mode, metadata comes from the individual's profile.
This approach improves SEO and ensures accurate link previews on social platforms.
Challenges & Solutions
No Formal Requirements
The project started with no document, just a few reference images and a vague idea of showing personal info
Solution
I defined concrete user flows and UI designs from scratch, iterating with feedback until they matched both business needs and user expectations.
Template & Section Design from Zero
I had to design seven templates from scratch while ensuring that flexible sections could fit consistently across all layouts.
Solution
I built reusable section components, making it possible to apply the same content across multiple template styles without breaking the layout.
Evolving Scope & Backend Alignment
As the project grew, more section types were requested, and with only one backend developer, mismatched data structures could easily block progress.
Solution
I defined the API fields I needed and coordinated closely with the backend. When conflicts arose, we discussed trade-offs and aligned on practical storage approaches, ensuring smooth frontend-backend integration.
Impact
By building the Name Card system from scratch, I delivered a flexible and scalable solution that allowed professionals to create, customize, and share digital business cards with ease. The introduction of multiple templates, reusable section components, and user-focused UX refactors lowered the learning curve and improved adoption as the user base grew.
- This project demonstrates my ability to:
- Translate vague ideas into structured user flows and functional products.
- Design and implement modular systems that support multiple templates and evolving features.
- Simplify complex user journeys through iterative UX improvements.
- Collaborate effectively with backend developers to align APIs with frontend needs.
Get in Touch
I'm open to new opportunities and collaborations. Whether you're looking for a frontend developer or a product-minded engineer, feel free to reach out.