當三維重建封面的.png

360-degree 3D Capture App

My Contribution(2019 Aug.- 2019 Nov.)

 

Lead 2 junior visual designers

Project Planning

Lead User Research

UX Flow Design & Wireframes Solution

Lead Visual & Motion Design(for Android & iOS)

Prototype Making

Overview

For the collection of spatial data of the 3D reconstruction project, it involves the acquisition personnel to control the acquisition equipment through the handheld control device, the interaction between the acquisition device and the collector, the interaction between the acquisition device and the server, etc. This app is mainly used as the system design to achieve the purpose of improving the collection efficiency.

Design Process

1

Research

2

Information Architecture

3

User Flow

Design

4

Wireframes

5

Visual & Motion

Design

6

Interactive Prototype

Research

帶兩個設計師1.jpg.jpg
帶兩個設計師1.jpg

I led two junior visual designers to start the research work. First, we searched the Internet for information about 3D reconstruction and found the benchmark enterprise/product research of 3D reconstruction. We also bought products to learn how to shoot, and then we interviewed users (colleagues) who had used them to learn how to use them.

Our Competitors

Our Users

  • Matterport

  • 白犀牛

  • 鼎尖3D

  • 360-degree 3D Camera Capture Engineers

  • Owners who need to present the business scene with 3D / VR.

Our goals

  • For Business :

Improve collection efficiency

Save development time

  • For User:

Easy to use and easy to learn

Pleasant operation experience

information architecture

According to the required function points, converged into information architecture, and the app page is further formed

Required function points

Information sorting and stratification

Formed the app page

User Flow Design

The interaction between collector, acquisition equipment and server, and control the application process of app

邏輯手稿2.jpg
userFlow_paper1.jpg

I did the hand-writing user flow design.

userFlow.png

I did the User flow

design in Sketch.

Wireframes for the app

Hand-writing wireframes design.

wireFrame_paper1.jpg
wireFrame_paper2.jpg

After completing the user process design, I drew the wireframes by hand, so that the two visual designers could better understand the components in each picture and discuss the expected interaction events.

wireframes design in Sketch

wireFrame1.png

After finishing the hand-drawn wireframes, I made sketch files of wireframes for the two visual designers.

 

*Since the two visual designers have only done graphic design, I have taught them how to use the sketch and related UI cutaway markup plug-ins from scratch

Visual & Motion Design

0919-三维重建app-视觉交互稿及控件-small.png

Visual design

Make a unified specification for each page interface, icon design, component status, and control components of each module in-app.

Motion Design

Since the shooting process of 3D reconstruction is quite repetitive and boring, I hope that through interesting dynamic design, users can keep happy when using the app. So I asked two visual designers to spend a week creating the motion design part.

loading页.gif
删除.gif
上传.gif
上传-4.gif

Interactive Prototype

Finally, from the perspective of designers, how to combine the capability innovation of Alibaba group to improve the user experience of 3D reconstruction products, and solve the operation problems found in competitive products.

1.Logging & Connecting

1.登录和本地创建场景.gif

2.Creating a project

2.云端-共享项目创建.gif

3.Editing projects

3.云端项目编辑+删除项目.gif

4.Creating a scene

4.创建场景.gif

5.Editing scenarios

5.场景文件编辑+场景文件删除.gif

6.Shooting new scenes

6.拍摄新场景.gif

7.Delete Nodes

7.删除节点.gif

8.Upload

8.拍摄完成-上传云端.gif

9.Upload(local to cloud)

9.本地场景上传云端.gif

10.Sharing

10.重建项目+分享.gif