스터디 카페 사이트 리뉴얼 프로젝트입니다. 취업 프로그램을 추가하는 목표로 시작했지만, 개선을 위해 UI/UX를 부터 DB 설계와 웹 페이지 개발까지 완전히 새로운 사이트를 제작했습니다.


어떤 것들이 변했나요?🧐

디자인 개선

이전 디자인

이전 디자인

종로점1룸 상세.jpg

종로점1홍대점.jpg

무엇보다 변화가 필요하다고 느낀 건 디자인이였습니다. 이용자의 니즈는 “공간 정보”라고 생각했습니다. 이전 디자인은 앞선 첫 번째 니즈를 충족하는 데 있어 적합하지 않다고 생각했습니다.

첫째, 사용자는 공간의 ‘인원'을 가장 먼저 확인하지만, 인원에 따라 세로로 길게 나열된 구조는필요한 정보를 효과적으로 파악하기에 좋지 않았습니다. 즉, 인원이 많은 공간을 보기 위해서는 사용자가 스크롤을 몇 번이고 내려야만 정보를 얻을 수 있습니다.

둘째, 여러 개의 공간이 Slider로 구성하여 다른 공간과 한눈에 비교해서 보기에 효율적이지 못한 방식이었습니다.

더빅스터디 종로점 카페 2차 리뉴얼 pc대지 1.jpg

더빅스터디 종로점 카페 2차 리뉴얼 pc대지 3.jpg

더빅스터디 종로점 카페 2차 리뉴얼 pc대지 4.jpg

더빅스터디 종로점 카페 2차 리뉴얼 pc대지 5.jpg

더빅스터디 종로점 카페 2차 리뉴얼 pc대지 6.jpg

더빅스터디 종로점 카페 2차 리뉴얼 pc대지 2.jpg

더빅스터디 종로점 카페 2차 리뉴얼 pc대지 7.jpg

주 사용자의 니즈인 공간 정보를 효과적으로 제공하기 위해, 공간의 인원수를 탭으로 구현했습니다.

사이트 상단에 메뉴를 노출함으로써 사용자가 원하는 정보에 접근하기 쉽게 하였으며, 스티디룸 페이지와 오시는 길 페이지를 원 페이지 형식(페이지 내 이동)에서 개별 페이지를 분리함으로써 정보의 집중도를 향상했습니다.

취업 /공간 정보를 제공하는 페이지마다 테마 컬러를 나눠 구분되게 했습니다.

더빅스터디 종로점 카페 2차 리뉴얼 모바일대지 1.jpg

더빅스터디 종로점 카페 2차 리뉴얼 모바일대지 2.jpg

더빅스터디 종로점 카페 2차 리뉴얼 모바일대지 3.jpg

더빅스터디 종로점 카페 2차 리뉴얼 모바일대지 4.jpg

더빅스터디 종로점 카페 2차 리뉴얼 모바일대지 5.jpg

작은 화면으로 페이지의 모든 정보를 파악하기 힘든 모바일의 특성상, 메인화면부터 많은 정보를 노출하지 않고 버튼으로 상세페이지로 유도해 정보의 집중도를 향상했습니다.


DB 이용