- CLIENT
- 베르티스 (BERTIS Inc.) · PASS 센터
- INDUSTRY
- 바이오 · 질량분석 기반 단백체(오믹스) 분석
- PROJECT
- 분석 서비스 홈페이지 구축
- PERIOD
- 2025. 09 ~ 2025. 11
프릭스 수행범위
IA 설계, 서비스 탐색, 메인/서브 GUI, 웹표준 마크업부터 반응형 대응까지 단일 팀이 수행했습니다.
BACKGROUND
구축이 필요했던 세 가지 이유
-
01
최상위 인프라가 서비스로 읽히지 않았다
베르티스 PASS 센터는 Orbitrap Astral, timsTOF SCP 등 국내에서 보기 드문 최상위 질량분석 장비와 십수 년의 분석 경험을 갖추고 있습니다. 그러나 장비와 기술은 '무엇을 의뢰할 수 있는가'로 번역되지 않으면 연구자에게 서비스로 인식되지 않았습니다.
-
02
연구자의 목적이 서로 달랐다
바이오마커를 찾는 기초 연구자, 특정 단백질을 정량하려는 연구자, TPD·ADC·HCP 같은 신약 개발 분석이 필요한 기업이 각기 다른 질문을 안고 들어옵니다. 하나의 서비스 소개로는 각자 필요한 분석을 찾기 어려웠습니다.
-
03
의뢰 전 확인할 것이 많았다
분석 의뢰 전에는 시료 종류, 전처리 방식, 분석 방법, 결과물 형태를 확인해야 합니다. 이 과정이 보이지 않으면 문의가 반복되고 의뢰 결정이 늦어지는 구조였습니다. 영문 문의 대응도 필요했습니다.
다섯 집단, 다섯 개의 목적지
| 방문자 유형 | 방문 목적 | 도달해야 할 영역 |
|---|---|---|
| 기초·임상 연구자 | 시료 전체의 단백질 변화를 폭넓게 보고 싶다 | PASS Discover·Profiling (Blood/Tissue/Cell) |
| 표적 정량 연구자 | 특정 단백질을 정확히 측정하고 싶다 | PASS Discover·Targeted Proteomics |
| 신약 개발 기업 | TPD · ADC · HCP 등 개발 단계 분석이 필요하다 | PASS Developer·TPD·Exosome·HCP·ADC |
| 의뢰를 검토하는 담당자 | 어떤 결과물을 받게 되는가 | PASS Report·리포트 샘플·FAQ |
| 의뢰 결정자 | 바로 견적과 의뢰를 진행하고 싶다 | 신청하기·CONTACT US·서비스 신청 |
SOLUTION
정보구조를 처음부터 세운 세 가지 원칙
-
01
장비가 아니라 연구 목적으로 묶는다
서비스를 'PASS Discover(탐색·정량 연구)'와 'PASS Developer(신약 개발 분석)' 두 축으로 나눴습니다. 연구자는 장비 이름을 몰라도 자신의 연구 목적에서 출발해 필요한 분석에 닿습니다.
-
02
과정을 숨기지 않고 한 화면에 펼친다
샘플 확보 → 샘플 준비 → LC-MS/MS 분석 → 결과 해석 → 데이터 해석의 5단계를 메인에 그대로 보여줬습니다. 의뢰 전 궁금한 시료·방법·결과물이 한 번에 확인됩니다.
-
03
결과물을 먼저 보여주고 의뢰로 잇는다
PASS Report 샘플과 FAQ를 독립 메뉴로 두고, 모든 페이지에서 CONTACT US와 서비스 신청으로 바로 이어지게 했습니다. 확인을 마친 연구자는 그 자리에서 의뢰를 남깁니다.
정보구조 (Information Architecture)
- 회사소개회사소개
- 서비스PASS DiscoverProfiling (Blood/Tissue/Cell) · Targeted ProteomicsPASS DeveloperTPD · Exosome · HCP · ADCPASS ReportReport Sample
- 신청하기서비스 신청 (CONTACT US)
- FAQ자주 묻는 질문
CONTACT US(서비스 신청) 상설 버튼, KOR / ENG 전환, 문의 pass@bertis.com, 서비스+ 바로가기 — 전 페이지 상설 노출
FEATURES
무엇을 개발했는가
보이는 기능
01
메시지 중심 메인 비주얼
'Unlocking Insights, Advancing Discovery'와 'PASS Pan-Omics Analysis Service & Solution'을 첫 화면에 배치했습니다. 회사 소개보다 서비스의 정체가 먼저 읽히도록 설계했습니다.
02
핵심 역량 5종 카드
최신 질량분석 기기·단백체 분석 컨설팅·폭넓은 분석 대상·신약 개발 지원·바이오인포매틱스를 카드로 정리해, 연구자가 따져볼 기준을 한눈에 보여줍니다.
03
5단계 분석 프로세스
샘플 확보부터 데이터 해석까지 STEP 01~05를 시료·전처리·장비·방식·결과물 키워드와 함께 보여줘, 의뢰 전 확인할 내용을 한 화면에서 해결합니다.
04
CONTACT US · KOR / ENG
헤더에 CONTACT US와 국·영문 전환을 상설 배치해, 국내외 연구자 누구나 어느 화면에서든 바로 분석 의뢰로 이동합니다.
보이지 않는 기능
01
서비스 신청 폼
분석 의뢰를 게시판형 신청 폼(bo_table=Request)으로 접수해, 시료·목적 정보를 구조화된 형태로 받습니다.
02
FAQ 게시판
시료 준비, 분석 기간, 결과물 형태 등 반복 문의를 FAQ 게시판으로 운영해 응대 부담을 줄입니다.
03
서비스 페이지 체계
Profiling·Targeted·TPD·Exosome·HCP·ADC를 동일 구조의 서비스 상세 페이지로 구성해, 새 분석 서비스를 빠르게 추가합니다.
04
리포트 샘플 제공
PASS Report 페이지에서 실제 결과 리포트 형식을 미리 보여줘, 의뢰 전 결과물에 대한 기대치를 맞춥니다.
05
국 · 영문 운영
국문(/)과 영문(index_en) 페이지를 분리 운영해 해외 연구기관·제약사 문의에 대응합니다.
06
웹표준 · 접근성
웹표준 마크업과 크로스브라우징 대응.
DESIGN
설명하지 않고,
과정을 보여준다
연구자는 화려한 수사보다 정확한 정보를 원합니다.
과학 서비스의 신뢰감을 지키면서도, 분석 과정과 결과물이 화면의 중심이 되도록 시각 언어를 정리했습니다.
과정이 주인공인 화면
5단계 분석 프로세스를 메인의 중심에 두었습니다. 장비 사진보다 '내 시료가 어떻게 분석되는가'가 먼저 보이게 하는 것이 목표였습니다.
영문 키 메시지 · 대형 타이포
국제적인 연구 커뮤니티의 언어인 영문 헤드라인을 대형 타이포로 배치하고, 국문 설명을 함께 붙여 전문성과 이해도를 동시에 잡았습니다.
정제된 과학 톤
흰 배경과 차분한 포인트 컬러로 실험실의 정밀함을 표현하고, 강조색은 서비스 신청 버튼에만 집중시켰습니다.
역량 카드 · 아이콘 체계
다섯 가지 핵심 역량을 같은 규격의 아이콘 카드로 정리해, 전문 용어가 많은 내용을 가볍게 훑어볼 수 있게 했습니다.
전문 용어의 정확한 표기
DDA, DIA, MRM, PRM 같은 분석 용어를 원어 그대로 표기해, 연구자가 익숙한 언어로 정보를 확인하게 했습니다.
반응형 재배치
데스크톱의 가로형 프로세스와 카드 그리드는 모바일에서 세로 스텝과 스택으로 전환돼, 이동 중에도 분석 흐름을 확인할 수 있습니다.
주요 화면
RESULT
무엇이 달라졌는가
| 구분 | BEFORE | AFTER | 의미 |
|---|---|---|---|
| 구조 | 서비스 체계 부재 | Discover / Developer 2축 | 연구자가 목적에서 출발해 필요한 분석을 찾습니다. |
| 동선 | 문의 경로 불명확 | CONTACT US 상설 + 신청 폼 | 어느 화면에서든 바로 분석 의뢰로 이어집니다. |
| 정보 | 의뢰 전 확인 어려움 | 5단계 프로세스 · 리포트 샘플 | 시료·방법·결과물을 의뢰 전에 스스로 확인합니다. |
| 운영 | 개별 문의 응대 | 신청 폼 · FAQ 게시판 운영 | 반복 문의를 줄이고 의뢰 정보를 구조화해 받습니다. |
