LS엠트론

User Experience would
be more consistent

LS엠트론

  • PC / Mobile web
  • 2023.06.30
https://www.lsmtron.com/kr/ko
 User Experience would be more consistent  User Experience would be more consistent 
LS엠트론 홈페이지는 지난 2013년 제작된 이래로 추가 개편 없이 제작 당시에 머물러 있어
영업 및 홍보 활동에 제약이 있었습니다. 또한, PC 중심의 홈페이지로 모바일 환경에서는 쉽게 접근하기 어려워 최신 트렌드와 동떨어진 환경에 처해있었습니다. 이에 LS엠트론은 기업을 홍보하는 매체로서 그 기능을 강화하고 접근성을 개선하고자 대대적인 홈페이지 개편을 시작했습니다. 

Goal

기업 홈페이지 리뉴얼과 함께
전사적으로 적용될 웹 스타일 가이드를 제작하고,

홈페이지를 누구나 쉽게 관리할 수 있는
관리자 포털을 구축했습니다. 

LS Mtron - Homepage, Web style guide, Administrator LS Mtron - Homepage, Web style guide, Administrator
  • Branding
  • Responsive Web
  • Web Style guide
  • Trendy
  • PR

Keyword

오랜시간 정체되어있던 리뉴얼인만큼
현재상태를 확인하고 앞으로 가야할
주요 키워드를 선정하여 전체적인 가이드를
설계하여 진행하였습니다.

담당자 및 각 사업부 인터뷰를 통한
전략을수립했습니다.

현업의 업무요건에 따라
목표를 달성하기 위해 업무 프로세스를
세부적으로 정의했습니다.

  • 현업 담당자, 사업부별 임원 인터뷰를 통한 니즈 파악
  • 기업이미지에 대한 분석, 자료서치
  • 대표 홈페이지 사용성에 대한 분석, 콘텐츠 개발
  • 그룹브랜드에 대한 벤치마킹
  • 국내, 해외 사업부 홈페이지 디자인 스타일 분석
  • 통합 디자인 가이드, 기본 와이어프레임 도출

LS MTRON

Design

Renewal

Homepage

과거에는 PC 중심의 화면이었다면, 지금은 모바일이 우선으로 되고 있어
PC와 모바일 다양한 디바이스 환경에서 접근이 편하도록
반응형 웹으로 국문/영문/중문 홈페이지를 구축했습니다

Desktop Design

Desktop Design Page

Design Page

Mobile Design

Mobile

Design

Page

첨단 기계 및 부품사업의
Identity를 녹이고,
다양한
이미지 및 모션을 활용
하였습니다.

첨단 기계 및 부품 사업을 운영하는 기업의 아이덴티티를
보여 주고자 사업군의 다양한
영상과 이미지를 배치하고,
CI와 슬로건을 이용한 기업 홍보 영상을 제작해
LS엠트론만의 이미지를 전달했습니다.

콘텐츠 재구성과 메뉴 구조를
개편하여
사용자 유입을 늘리고, 집중도를 높였습니다

기존에 찾기어려웠던 핵심 서비스를 한눈에 쉽고 빠르게 이해할 수 있도록 정보를
그룹핑하고 콘텐츠를 재구성해 메뉴 구조를 개편 하였습니다.

Social Media

국가별로 다양한 소셜미디어 채널을
연결해 사업부 소식과 활동, 제품 등을
홍보할 수 있도록 구성했습니다. 

Total Design GUIDE

기존 국내사업부 및 해외 사업부는 제각각의 디자인과 내용으로 구성 되어있었습니다.
사업부 및 해외 법인 홈페이지를 분석하여, 공통으로 사용할 요소를 가이드화하고 반영하여
LS그룹의 일관된 UI/UX를 제공 할수 있도록 합니다.

이에 LS엠트론 디자인은,
고객의 니즈를 기반으로 3가지의 디자인 공통 3원칙을 수립 하였습니다.

Universal design 보편적인 디자인 LS Mtron은 보편성에더 충실한 사용자가 학습할 필요 없는 이해하기 쉬운 디자인을 할 수있도록 합니다. Universal design 보편적인 디자인 LS Mtron은 보편성에더 충실한 사용자가 학습할 필요 없는 이해하기 쉬운 디자인을 할 수있도록 합니다.
Basics design 기본에 충실한 디자인 대부분의 사용자는 기본설정을 그대로 사용 하기 때문에, 그대로 사용하기 좋은 기본에 충실한 디자인에 집중합니다. Basics design 기본에 충실한 디자인 대부분의 사용자는 기본설정을 그대로 사용 하기 때문에, 그대로 사용하기 좋은 기본에 충실한 디자인에 집중합니다.
Consistent design 일관성 있는 디자인 디자인 시스템의 요소를 일관성 있게 사용하여 비전문가라 하더라도 누구나 쉽게 이해할 수 있도록 합니다. Consistent design 일관성 있는 디자인 디자인 시스템의 요소를 일관성 있게 사용하여 비전문가라 하더라도 누구나 쉽게 이해할 수 있도록 합니다.

그리고, 국내외 법인 사업부의 홈페이지를 모두 분석하여 총 36개의
UIUX 요소의 디자인 가이드를 제공합니다.

  • Foundation Foundation
  • Components Components
  • Wireframe Wireframe

Typeface

Aa

Pretendard
bold medium regular

가

Pretendard
bold medium regular

Icon

Grid System

Grid System desktop 예시 Grid System desktop 예시
Grid System mobile 예시 Grid System mobile 예시

Color

  • LS Blue 1
  • LS Red
  • Gray 1
  • Gray 2
  • LS Blue 2
  • Gray 3
  • Black

LS그룹의 Identity가 담긴
통합 웹스타일 가이드를 통해 일관된
사용자 경험을 반영합니다.

각각의 홈페이지를 분석해 기능을 정의하고,
공통으로 사용하는 UI 요소를 제작했습니다. 이 과정에서
플립 디자인 시스템(PDS)을 활용해 기업 아이덴티티를 디자인에
반영했으며, 일관된 UI/UX를 구축했습니다.

이렇게 제작된 웹 스타일 가이드는
추후 사업부 및 해외 법인 홈페이지 개편 시
활용 될 예정입니다.

그룹 전체가 일관된 홈페이지로 제작될 수 있도록
Wireframe을 만들어 시각적인 가이드를 제공합니다.

제 각각이었던 국내외 및 해외 법인 사업부 홈페이지는 추후 일괄된 사용자 경험을 반영하기 위해
기본적인 와이어프레임을 만들고 비전문가 또한 손쉽게 구현 가능하도록 합니다.

  • Administrator Portal 구글 애널리틱스를 확용해 방문자 수, 메뉴별 일간 페이지 뷰, 고객문의 접수 및 처리현황 등의 정보를 제공합니다. Administrator Portal 구글 애널리틱스를 확용해 방문자 수, 메뉴별 일간 페이지 뷰, 고객문의 접수 및 처리현황 등의 정보를 제공합니다.
  • 콘텐츠 등록 에디터를 활용해 보도자료, 사진, 영상, IR 자료 등 다양한 콘텐츠를 쉽게 업로드하고 편집 할 수 있습니다. 콘텐츠 등록 에디터를 활용해 보도자료, 사진, 영상, IR 자료 등 다양한 콘텐츠를 쉽게 업로드하고 편집 할 수 있습니다.
  • 고객문의 & 알림 고객문의 접수 시, 상담 종류에 따라 담당자에게 알림 메일이 발송되어 고객이 빠른 답변을 받을 수 있도록 개선했습니다. 고객문의 & 알림 고객문의 접수 시, 상담 종류에 따라 담당자에게 알림 메일이 발송되어 고객이 빠른 답변을 받을 수 있도록 개선했습니다.
Back to list
next 마음AI 플랫폼 이노베이션 마음AI
플랫폼 이노베이션
Blend It
© PULIP COMMUNICATIONS Co., Ltd