Role
Product Designer
Timeline
May - Oct 2025
Figma, Wireframing, High-Fidelity
Prototyping, Interaction Design
Skills & Tools
Link To Finished Website
The Michigan Korean Business Society (MKoBi) is a professional student organization at the University of Michigan that promotes global Korean business networks. As Co-President and lead designer, I rebuilt MKoBi’s website from the ground up using Figma, HTML, CSS, TypeScript, and Adobe Illustrator. The goal was to create a professional, accessible, and visually consistent website that reflects the club’s identity and helps attract new members.
Summary / Overview
Increase visibility, improve UX/UI consistency, and communicate the club’s identity and values
Purpose
Tools: Figma, HTML, CSS, TypeScript, Adobe Illustrator
Methods: User feedback sessions, competitor analysis, design system creation, iterative testing
Skills: Front-end development, responsive design, component libraries, accessibility, design documentation
Tools, Methods & Skills
MKoBi is a fast-growing organization connecting Korean business students and professionals. The previous website had visual inconsistencies, misaligned layouts, and unclear navigation. As the organization expanded, a more cohesive and professional online presence became essential for recruitment and credibility.
Context / Background
The old website suffered from:
Poor color consistency and layout alignment
Incorrect member titles and unprofessional visuals
Lack of clear application flow and storytelling about MKoBi’s mission
This led to confusion for visitors and frustration among members, making the site feel disorganized and incomplete.
Problem Statement
I conducted a light comparative study of three similar professional club websites and gathered informal feedback from five current members. Key findings:
Users valued a clean, modern, and consistent design
They wanted easy navigation and accurate, aligned member profiles
Applicants needed clear timelines and instructions for applying
These insights informed both the visual hierarchy and content structure.
Research & Insights
Prospective Members: Want to quickly understand MKoBi’s mission, culture, and how to apply.
Current Members: Want to see themselves represented professionally and use the site for credibility when networking.
Personas
1. Define
Reviewed MKoBi’s founding statement and values to set the tone: the site should express professionalism, community, and ambition.
2. Research
Benchmarked peer organizations and collected member feedback to shape the site’s goals and must-have features.
3. Analysis & Planning
Planned a four-page structure:
Home: Mission and visual overview
About: Founder’s message and three pillars
Members: Aligned headshots with hover interactions
Apply: Application process, timeline, and FAQs
4. Design Goals
Modern and minimal aesthetic
Consistent alignment and structure
Interactive features that communicate values
5. Wireframes & Iteration
Created one sketch and three Figma iterations — from low-fidelity rectangles to fully interactive high-fidelity prototypes with hover and click flows.
Design Process
Example: Members Page
hand-sketched
rough wireframe in Figma
more detailed draft in Figma
final draft
6. Development & Launch
Using HTML, CSS, and TypeScript, I engineered the live responsive website:
Built reusable UI components and structured design system
Implemented hover animations and dropdowns mirroring Figma prototypes
Ensured accessibility through alt text, proper color contrast, and semantic HTML
Recreated the club logo in Adobe Illustrator (SVG) to match the updated visual identity
7. Testing & Deployment
Conducted internal feedback testing with MKoBi members
Fixed image scaling and mobile responsiveness issues
Deployed final version publicly (September 2025)
Final Design / Outcome
The finished website presents MKoBi as a polished, credible organization.
Fully responsive design across devices
Clear navigation and consistent color hierarchy
Modern typography and minimal black-gray palette
Interactive hover effects and structured member showcase
Streamlined application page with embedded timeline and resources
Explore here: www.mkobi.org
Impact:
Stronger brand presence and credibility for MKoBi
Streamlined communication of core values and application process
Improved member satisfaction with accurate and aligned visuals
Lessons Learned:
Design clarity and developer documentation save time and reduce confusion
Figma should focus on user flow and visual intent, not excessive prototyping
Accessibility and scalability need to be integrated from the start
Responsive design is essential and will be prioritized in the next iteration
Through this project, I learned how to bridge UX design and front-end development effectively. Building the site from concept to launch helped me understand both the creative and technical sides of delivering a professional, functional product.
Reflection & Impact