MAP SCIENCE
Redesigning a Responsive, Product-First Website
OVERVIEW
Map Science, a Korean biomedical diagnostics company, needed a redesigned website to reflect their expanded product lineup and discard their product (micro-organism detecting service).
As the sole designer and implementer, I led the entire process — from planning and visual design to building the site in Framer.
Role
UIUX Designer
Tools
Framer
Figma
Canva
Duration
June, 4, 2025 -
Aug, 28, 2025
Discover
Current Page Analysis
Low Quality Design
The background image reduced focus on both the product and the text, creating visual clutter and distracting from the core content
The product no longer exists, though the website is not up to date
Single Page Layout
The single-page layout, failed to convey professionalism. Most critically, it had an awkward mobile experience — users had to manually append “/m” to the URL to view it properly on phones.
Without “/m” URL
Without “/m” URL
How might we design an experience where users feel more welcomed, engage with the product, and easily access information?
Grid System
The flexible grid served as the foundation of my responsive design approach, ensuring a seamless user experience across devices. Using a grid system, I created tailored layouts for desktop, laptop, tablet, and mobile to maintain both clarity and consistency
Desktop
1920px / 12 Columns
200px
200px
Laptop
1024px / 6 Columns
36px
Tablet
768px / 4 Columns
Mobile
393px / 4 Columns
40px
40px
36px
36px
688px
360px
Style Guide
Fonts(English)
Fonts(korean)
Noto Sans
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
가 나 다 라 마 바 사 아 자 차 카 타 파 하
가 나 다 라 마 바 사 아 자 차 카 타 파 하
가 나 다 라 마 바 사 아 자 차 카 타 파 하
Liter
Company Logo
#D3DEE7
Colors
Primary Color
#5B84B4
#24233A
#FFFFFF
#4C6F8B
High Fidelity
I structured the layout by placing key content upfront to highlight essential information. This approach streamlined the main page, improving both accessibility and user convenience.
Desktop 1920px
Simplified Information into Pages
Division of page allowed clarity, credibility and a smoother user experience
Focus on Product
Removed visual clutter and distraction from the core content through slideshow and clear box formats, emphasizing the products
Expanded Product Categories
Informations seen in clear box formats
Organized Information
Company’s mission statement, core values and history are organized into a separate page
Redesign
Before
After
Responsive Design
I designed a responsive structure optimized for desktop, laptop, tablet, and mobile. By adapting font sizes, layouts, and other elements to each device, I ensured that content was delivered effectively and consistently to users across all platforms.
Laptop(1024px)
Tablet(768px)
Mobile(390px)
Takeaways
Seeing the redesigned mobile view for the first time without the “/m” — it finally felt like a professional, modern site. Building the entire site to be fully responsive led to a smooth mobile access, making me realize that a small technical fix can dramatically improve usability.
Moreover, I learned the importance of clear communication with the client and the need to approach design from their perspective. By considering their circumstances and priorities, I was able to create solutions that not only reflected my design skills but also aligned with their goals and expectations.
Other Projects
Bona Lee© 2025 All Rights Reserved.
Bona Lee
About