mastering the mess - ui mapping for a better world by marina grechko (delightex)
TRANSCRIPT
UI mapping for a better world
Mastering the mess
Marina GrechkoUX Manager @ Delightex
20. Okt 2016 @push.conference
@marinagrechkoUX Manager for Delightex
Type something
Share
Studio: Stage
Type something
!
2 / 5
Studio: Viewer
Type somethingExplore content in gyroscope mode or VR
by donwloading our app
Studio:Dashboard
My ProjectsGallery
Type something
or
View published space in Gallery
Download CoSpaces app to view VR
Share
Studio: Publish
Type something
Get Early Access
Early Access
Type something
Sign up/Login
Login
Type something
Sign up/Login
Signup
Type somethingGet started with CoSpaces
Welcome from CEO
Type something
Join Slack Team
Invitation from Slack
Type something
Okay
FaceebookType something
Learn more about Early Access
cospaces.io
Type something
View
itunes.apple.com
DESKTOP WEBSITE STUDIO
< back Project Name (Space)
Type something
DESKTOP VIEWER
!
Viewer
Type something
CoSpaces appDownload the
from App Store
Viewer: VR
Type something
Sign up
Blog
DELIGHTEX BLOG
Type something
View
facebook.com
Download CoSpaces app
Learn more Early Access
cospaces.io
Download CoSpaces app
Get Early Access
cospaces.io
Download CoSpaces app
Signup
Signup
Download CoSpaces app
or
Open it on desktop to
create your own
Download CoSpaces app
Message
MOBILE WEBSITE
It’s a temporary while we don’t have an app
SIGNUP
Signup
Download CoSpaces app
cospaces.io/blog
MOBILE BLOG
MOBILE FACEBOOK
Login
Login
Gallery My Projects
My Projects
Viewer
!
ViewerVR
Do you have a VR headset?
NoYes
Outdated device
The model is too heavy for your device and may not be rendered properly.
VR
What would you like to do next?
Find out more about Headsets
Continue without one
COSPACES VIEWER
No way to sign up
Create page which explains that you can create content yourself using desktop (tablet?) version
Create page that explains user how to explore content:1. download an app2. get headset3. explore
Gallery login
Gallery
Gallery My Projects
Gallery
NO
YES
Get
AppStore
APPSTORE/PLAYSTORE
VIEW
VIEW
Type something
Gallery
Gallery My Projects logout
DESKTOP GALLERY
Type something
Get Early Access
Gallery
Gallery
DESKTOP GALLERY
LOGOUT
DOWNLOAD AN APP
!
2 / 5
Viewer
MOBILE VIEWER
LOGINUI Map
Type something
Share
Studio: Stage
Type something
!
2 / 5
Studio: Viewer
Type somethingExplore content in gyroscope mode or VR
by donwloading our app
Studio:Dashboard
My ProjectsGallery
Type something
or
View published space in Gallery
Download CoSpaces app to view VR
Share
Studio: Publish
Type something
Get Early Access
Early Access
Type something
Sign up/Login
Login
Type something
Sign up/Login
Signup
Type somethingGet started with CoSpaces
Welcome from CEO
Type something
Join Slack Team
Invitation from Slack
Type something
Okay
FaceebookType something
Learn more about Early Access
cospaces.io
Type something
View
itunes.apple.com
DESKTOP WEBSITE STUDIO
< back Project Name (Space)
Type something
DESKTOP VIEWER
!
Viewer
Type something
CoSpaces appDownload the
from App Store
Viewer: VR
Type something
Sign up
Blog
DELIGHTEX BLOG
Type something
View
facebook.com
Download CoSpaces app
Learn more Early Access
cospaces.io
Download CoSpaces app
Get Early Access
cospaces.io
Download CoSpaces app
Signup
Signup
Download CoSpaces app
or
Open it on desktop to
create your own
Download CoSpaces app
Message
MOBILE WEBSITE
It’s a temporary while we don’t have an app
SIGNUP
Signup
Download CoSpaces app
cospaces.io/blog
MOBILE BLOG
MOBILE FACEBOOK
Login
Login
Gallery My Projects
My Projects
Viewer
!
ViewerVR
Do you have a VR headset?
NoYes
Outdated device
The model is too heavy for your device and may not be rendered properly.
VR
What would you like to do next?
Find out more about Headsets
Continue without one
COSPACES VIEWER
No way to sign up
Create page which explains that you can create content yourself using desktop (tablet?) version
Create page that explains user how to explore content:1. download an app2. get headset3. explore
Gallery login
Gallery
Gallery My Projects
Gallery
NO
YES
Get
AppStore
APPSTORE/PLAYSTORE
VIEW
VIEW
Type something
Gallery
Gallery My Projects logout
DESKTOP GALLERY
Type something
Get Early Access
Gallery
Gallery
DESKTOP GALLERY
LOGOUT
DOWNLOAD AN APP
!
2 / 5
Viewer
MOBILE VIEWER
LOGIN
Understand Identify Act Control+ + =
Example 1UI map for CoachingSpaces
1. Screenshots
2. Group & Link
sitename.comcoachingspaces.com
1 Home page
1
Click Login
sitename.com sitename.comsitename.com
Change password
Login
2
2 Login page
3
3 Change password
sitename.com4
4 Dashboard
coachingspaces.com
sitename.comcoachingspaces.com
coachingspaces.com
coachingspaces.comcoachingspaces.com
coachingspaces.com
coachingspaces.com
coachingspaces.com
My sessions
Shared with me
Shared by me
Recent
Trash
Activate
sitename.com
5
5 Dashboard: Create Folder
sitename.com
sitename.com
Mouse Over Rename
Move
6
6 Dashboard: Folder options
coachingspaces.com7
7 Dashboard: Session Options
Invitation acceptedEmail sent
On editing
Mouse over
coachingspaces.com
Move to Trash
Copy
Move
Rename
Share
Create Session
coachingspaces.com
coachingspaces.com coachingspaces.com
coachingspaces.com
Activate
coachingspaces.com
Details
Create Session
Details
coachingspaces.com
Details
8 Session
8
Invite to Session
Invite to Session
Mute off
Mute on
Video image off
9 Comunication Bar
coachingspaces.com
Edit not allow
Video call
Invite
Undo
Redo
Save image
9
Fill form
coachingspaces.comcoachingspaces.com
Save
coachingspaces.com
Click button
Details
Details
Go to Dashboard
Click on link
Drag to stageMouse OverClick on Panel
Details
10 Figures & Objects Panel
10
coachingspaces.com
Half Bow
HuggingChair Sit Extended arm
Full Bow
Lying
Sitting On Heels
Standing
coachingspaces.comcoachingspaces.com
Figure prospective
Skin Color
Object Inspector
Door Object Status
Object Texture
Object Opacity
Head Position
Actions
Hair ColorBody Color
Figure Inspector
Details
Details
Go to Dashboard
coachingspaces.com13
13 Metaplan Cards Panel
Add Card Type text Enter EnterAdd Card
coachingspaces.com
Metaplan Cards
coachingspaces.com
Drag & drop
coachingspaces.com
12 Images Panel
Enter search request
coachingspaces.com
Mouse OverImages Panel
Marker Panel
Close & Open Panel
Details
Drag to Stage
12
Sticker
Image Marker
Arrow
Text Marker
coachingspaces.com11
11 Markers & Cards Panel
Go to Panel Click Load
coachingspaces.com
Click LoadPast URL
Details
coachingspaces.com
Stage Options
17
17 Stage Options Panel
Snapshots
Snapshots
Change Stage
coachingspaces.com
16 Shapshots Panel
16
Mouse Over Save Change Stage
coachingspaces.com
Details Details
Mouse Over Recreate
15
15 Shared Notes Panel
Enter Text
Speech & Chat
14
14 Speech & Chat Panel
Enter Text
coachingspaces.com
Alt &Enter
Details Edit
18 Account Settings
coachingspaces.com18
Go to Dashboard
coachingspaces.com
coachingspaces.com
Activate Pay
Coach
Trial
Coachee
Sleeping Coach
Change photo
Edit Name
Change password
coachingspaces.com
coachingspaces.com
sitename.comcoachingspaces.com
coachingspaces.com
Activate
Choose File
Save
Switch to trial
coachingspaces.com
Activate
coachingspaces.com
coachingspaces.com
sitename.comcoachingspaces.com
Login Dashboard Session Account Settings
3. Result
Example 2UI map for CoSpaces
Example 2UI Map for CoSpaces
Summary:
The UI map is great – for analysis – for product planning – to get a common understanding
UI map Master the mess
Better world
Thank you!