MKoBi Website Redesign & Development
Role
Product Designer
Timeline
May-Oct 2025
Skills & Tools
Figma, Wireframing, High-Fidelity Prototyping, Interaction Design
Overview
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.
Purpose
Increase visibility, improve UI/UX consistencey, and communicate the club's identity and values
Tools, Methods & Skills
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
Context / Background
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.
Problem Statement
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.
Research & Insights
I conducted a light comparative study of three similar professional club websites and gathered informal feedback from five current members.
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.
Personas
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.
Design Process
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.
Final Design / Outcome
The finished website presents MKoBi as a polished, credible organization.
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
Reflection / Impact
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.