Stash&Store — 보관소 찾기 및 대여가 더 쉬워졌습니다

May 10 2023

소개 안녕하세요 미디엄 독자 여러분! 이 UI UX 사례 연구에서는 제 모바일 앱 디자인을 선보일 예정입니다. "Stash&Store"는 제 두 번째 모바일 애플리케이션의 이름입니다.

소개

안녕하세요 미디엄 독자 여러분! 이 UI UX 사례 연구에서는 제 모바일 앱 디자인을 선보일 예정입니다. "Stash&Store"는 제 두 번째 모바일 애플리케이션의 이름입니다. 사용자가 항목에 대한 적절한 저장 공간을 찾거나 자신의 초과 공간에서 수익을 창출하는 데 도움이 되는 다양한 기능으로 구성됩니다. 저는 혁신적이고 창의적이며 이 앱을 가능한 한 사용자 친화적이고 직관적이며 기능적이며 독특하게 만들고자 했습니다.

씌우다

문제

프로젝트를 시작할 때, 저는 제가 해결하고자 하는 특정 문제를 염두에 두었습니다. 그러나 조금 더 생각한 끝에 "Stash&Store"가 다양한 유형의 사람들을 위해 다소 다른 문제를 해결하는 다기능 앱이 될 수 있다는 것을 깨달았습니다. 다음은 내가 어떤 식으로든 해결하고자 했던 문제들입니다.

사람들의 집에 있는 저장 공간 부족
현대 사회에서 사람들은 저장 공간은 말할 것도 없고 생활 공간도 부족합니다.
창고 및 창고의 높은 가격
창고 임대를 생각하는 사람들은 높은 임대 가격으로 인해 매우 낙담하는 경우가 많습니다. 전문 창고는 종종 매우 비쌀 수 있습니다.
사용하지 않고 남겨진 잉여 공간
초과 공간을 소유한 사람들은 때때로 사용하지 않은 공간에 대한 비용만 남게 됩니다.

위에서 언급한 문제를 인식하고 연구를 시작했습니다. 제가 가장 먼저 한 일은 늘 그렇듯이 경쟁 애플리케이션과 제품을 분석하는 것이었습니다. 이렇게 함으로써 나는 내 앱에 무엇을 추가할 수 있는지에 대한 몇 가지 아이디어를 얻었지만 더 중요한 것은 경쟁 앱에서 결점과 결점을 발견했다는 것입니다. 제 최종 목표는 이러한 목적을 위한 최고의 가장 독특한 앱을 만드는 것이었습니다! 경쟁 앱을 살펴보는 것 외에도 사용자를 알고 싶었습니다. 전체 디자인 과정에서 사용자와 그/그녀의 필요를 생각하는 것이 저의 최우선 과제였습니다.

사용자 페르소나

내 앱이 해결할 핵심 문제를 철저히 해결하고 잠재 사용자의 요구에 대한 광범위한 조사를 수행한 후 다음 단계는 이상적인 사용자 페르소나를 식별하는 것이었습니다.

Stash&Store의 사용자 페르소나

브레인스토밍

사용자 페르소나를 확인한 후 몇 가지 브레인스토밍 세션에 참여했습니다. 이 단계에서 나는 내 마음에 떠오르는 거의 모든 아이디어를 기록했습니다. 저는 FigJam에서 이러한 메모를 작성하고 나중에 이러한 아이디어를 위해 특별히 지정된 특별 Figma 페이지로 옮겼습니다.

"Brainstorming" Figma 페이지의 스크린샷

위의 스크린샷에서 볼 수 있듯이 순수한 브레인스토밍을 위한 섹션이 있는 반면 앱의 특정 주요 부분에 대한 섹션도 있습니다.

UX 지도

다양한 아이디어를 떠올리며 UX Map을 구축했습니다. 각각 앱의 고유한 부분을 나타내는 세 가지 프레임 색상이 있습니다.

UX 맵 — 범례

UX 지도

영감을 주는 보드

내 앱의 UI 요소와 관련하여 다양한 앱의 다양한 화면과 샷으로 구성된 큰 영감을 주는 보드를 만들었습니다. 다소 직관에 어긋나긴 하지만 여행 앱, 소셜 미디어 앱, 요리 앱, 내비게이션 앱 등에서 영감을 얻었습니다. 색상, 입력 필드, 메뉴, 아이콘, 버튼, 글꼴, 일러스트레이션 등 모든 UI 요소에 주의를 기울였습니다. 카드 등. 본질적으로 모든 앱은 많은 양의 동일한 UI 요소를 공유합니다.

Dribbble, Mobbin, Behance 및 이와 유사한 플랫폼의 수많은 샷을 Figma의 "Inspiration Board" 페이지에 저장했습니다. 목적에 따라 모든 샷을 분류했습니다. 그런 식으로 다양한 유형의 샷을 포함하는 여러 개의 개별 섹션이 있습니다.

분할 영감 보드

나는 또한 내 관심을 끌었던 정확한 것을 상기시키기 위해 샷에 대한 Figma 댓글 형식으로 메모를 남겼습니다. 저는 제 앱이 멋지게 보이도록 하기 위해 다양한 다른 훌륭한 디자이너들의 작품을 재조정하고 모방하기만 하면 된다는 것을 알았습니다! 내가 영감을 얻은 앱은 대부분 전 세계적으로 사용되고 있었고 세계 최고의 전문가들이 디자인했습니다!

Lo-Fi 와이어프레임

세 개의 와이어프레임 섹션을 만들었습니다. 첫 번째는 보편적이며 온보딩 프로세스입니다. 다른 두 섹션은 서로 다른 앱 보기 의 와이어프레임으로 , 하나는 호스트 용 이고 다른 하나는 클라이언트 용입니다 . 앱을 다운로드하고 사용자가 등록한 후에는 둘 사이를 쉽게 변경할 수 있습니다. 아래 스크린샷에서 거의 모든 화면이 이 와이어프레임에 도입된 것을 볼 수 있습니다.

온보딩

클라이언트 보기 앱 버전

호스트 보기 앱 버전

와이어프레임을 완성하고 나니 프로젝트를 어떻게 계속할지 훨씬 더 명확하게 알 수 있었습니다. 또한 와이어프레임 작업을 하는 동안 내 생각을 잊지 않기 위해 특정 디자인 요소에 대한 내 계획을 상기시키기 위해 화면의 특정 영역에 Figma 댓글을 남겼습니다.

디자인 시스템

서체 및 색상

테마 색상과 조합하여 사용한 서체가 최고의 솔루션으로 입증되었습니다. 이 녹색 톤은 사용자의 마음에 신뢰, 낙천주의 및 전반적인 긍정성을 불러일으킵니다. 반면 서체로서의 DM Sans는 현대성, 전문성 및 명확성을 전달합니다. 깔끔한 선과 둥근 모서리는 앱에 친근하고 접근하기 쉬운 느낌을 주고 날카로운 모서리는 정밀함을 암시합니다.

디자인 과정에서 생산성을 높이기 위해 텍스트와 색상 스타일을 만들었습니다. 그런 식으로 특정 UI 요소의 색상을 결정하고 특정 위치에서 사용할 글꼴을 결정하는 것이 더 쉽고 빠릅니다. 스타일을 만드는 것은 나중에 디자인을 수정하는 데에도 큰 도움이 되었습니다.

유형 스케일 — 텍스트 스타일

아이콘은 앱 전반에 걸쳐 일관된 디자인을 유지하기 위해 하나의 아이콘 팩과 한 종류의 아이콘을 사용했습니다. 아이콘 팩의 이름은 "Heroicons"이며 SVG(벡터) 형식에 필요한 거의 모든 아이콘이 포함되어 있습니다. 찾지 못한 아이콘은 Figma에서 펜툴로 그렸습니다. 이전에 언급한 아이콘 팩의 아이콘과 크기 및 획이 일치하는지 확인했습니다.

아이콘 팩 출처:
https://heroicons.com/

제가 사용한 일러스트도 같은 일러스트 소스에서 가져왔습니다. 다시 말하지만 UI의 일관성은 매우 중요합니다!

일러스트 출처:
https://storyset.com/time

최종 디자인

"Lo-Fi 와이어프레임" 장에서 언급했듯이 "Stash&Store"는 두 개의 앱 보기 로 구성됩니다 . 첫 번째는 클라이언트 에 초점을 맞추고 있으며 클라이언트는 앱을 통해 스토리지를 임대할 스토리지를 찾는 사용자 유형입니다. 이 앱 보기는 클라이언트가 스토리지 거래를 쉽게 찾을 수 있도록 도와줍니다. 두 번째 앱 보기는 공간을 임대하려는 호스트를 위해 지정되었습니다. 이 경우 "Stash&Store"는 오퍼를 보다 쉽게 관리할 수 있는 특정 방식으로 사용자에게 서비스를 제공합니다.

온보딩

온보딩 프로세스 자체는 모든 앱에서 비교적 동일합니다. 이 경우 사용자에게는 물론 등록 또는 로그인의 두 가지 주요 옵션이 제공됩니다. 계정을 만들 때 사용자는 "Stash&Store"에 대한 용도를 지정하라는 메시지가 표시됩니다. 이는 사용자가 하나의 앱 보기에만 관심이 있을 수 있기 때문에 포함됩니다. 그/그녀의 선택에 따라, 그/그녀는 가입 절차를 계속합니다. 호스트
로 진행하는 사람은 제안을 즉시 나열하거나 해당 부분을 건너뛰고 나중에 다시 오라는 메시지가 표시됩니다. 호스트는 또한 신원을 확인하기 위해 정부에서 발급한 신분증의 사진을 찍어야 합니다. 여전히 모든 사용자에게 필수인 유일한 확인 프로세스는 이메일 확인입니다.

지도, 검색 및 필터

클라이언트 등록 프로세스를 완료하면 사용자는 홈 탭 역할도 하는 탐색 화면으로 이동합니다. 여기에서 원하는 위치를 입력하여 스토리지를 검색하고 검색 결과를 필터링할 수 있습니다. 맵에 사용 가능한 스토리지의 위치 핀이 표시됩니다. 그 중 하나를 클릭하면 화면 하단에 해당 스토리지에 대한 일반 정보를 제공하는 카드가 나타납니다.
이 탭의 또 다른 중요한 기능은 "Place a point" 기능입니다. 오른쪽 하단 모서리에 있는 버튼을 클릭하면 화면 중앙에 작은 로케이터 핀이 나타납니다. 사용자가 지도를 스크롤하는 동안 중앙에 남아 있습니다. 사용자가 핀을 원하는 위치에 놓고 다시 오른쪽 하단 버튼을 누르면 핀이 놓인 주변의 모든 보관 장소가 화면에 나타납니다.

보관 예약

적합한 스토리지를 찾은 후 클라이언트는 온라인 가용성 요청을 보낼 수 있습니다. 위의 두 번째 화면에서 볼 수 있듯이 클라이언트는 원하는 시작 날짜를 선택하고 호스트에게 메모를 작성할 수도 있습니다. 클라이언트의 요청을 완전히 승인하는 것은 여전히 호스트에게 달려 있음을 언급하는 것이 중요합니다.
클라이언트가 스토리지를 결정하는 데 도움이 되도록 앱에 도입한 한 가지는 업적 칩 입니다 . 이 칩은 스토리지 화면에 나타나며 고객이 찾은 스토리지가 안전하고 신뢰할 수 있다는 일종의 보증을 클라이언트에게 나타냅니다. 호스트는 계정 확인과 특정 수의 거래를 통해 이러한 칩을 받는 사람들입니다.

예약 수정 및 취소

고객이 임대 공간을 예약하면 두 번째 탭인 내 임대에서 거래를 찾을 수 있습니다. 이 탭에는 그들이 만든 모든 제안에 대한 개요가 있습니다. 카드 중 하나를 클릭하면 거래를 볼 수 있지만 더 중요한 것은 예약을 수정 및/또는 취소할 수 있는 화면이 열립니다. 두 경우 모두 우발적 인 행동을하지 않도록 자신의 행동을 확인하라는 요청을받습니다.

메시지

"메시지"는 이 앱의 세 번째 탭입니다. 다소 보편적이기 때문에 호스트 앱 보기에도 표시됩니다. 사용자는 채팅을 검색하거나 대화를 삭제하거나 보관할 수 있습니다. 또한 클라이언트의 앱 보기의 경우 사용자는 미리 생성된 자주 묻는 질문을 보낼 수 있습니다(위 세 번째 샷 참조).

프로필 화면 — 첫 번째는 클라이언트의 앱 보기이고 두 번째는 호스트의 앱 보기입니다.

두 앱 보기의 프로필 화면은 비교적 비슷합니다. 두 화면 상단에는 앱 보기를 변경하는 버튼이 있습니다. 이 버튼은 쉽게 접근할 수 있도록 의도했습니다. 또한 호스트가 자신의 계정을 완전히 확인하지 않은 경우 확인을 완료하도록 알림 및 권장됩니다. 그것이 두 번째 화면 상단에 있는 녹색의 생생한 버튼의 목적입니다.