Lightning Talk at push.conference 2016: http://push-conference.com/2016/speakers/marina-grechko/ It’s quite easy to lose control of your digital product, especially in our modern multi-device culture. But how can you reduce the complexity and oversee this mess? How can you determine how information is displayed and accessed throughout the application? There can be a solution — the UI Map. It’s an informational architecture tool that allows you to understand how a user navigates through your application coming from different entry points. It identifies the gaps in those journeys and helps you to understand the context of your content. In this talk, Marina will share her experiences from daily work. She will show you how you can apply UI Mapping to your process to create better digital products – for a better world.

1. UI mapping for a better world
Mastering the mess
Marina Grechko
UX Manager @ Delightex
20. Okt 2016 @push.conference

2. @marinagrechko
UX Manager for Delightex

3. www.cospaces.io
Our product—CoSpaces

4. Type something
Share
Studio: Stage
Type something
!
2 / 5
Studio: Viewer
Type something
Explore 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
Facebook
Login
Type something
Sign up/Login
Facebook
Signup
Type somethingGet started with CoSpaces
Welcome from CEO
Type something
Join Slack Team
Invitation from Slack
Type something
Okay
Faceebook
Access
Type something
View
itunes.apple.com
WEBSITE STUDIO
< back Project Name (Space)
DESKTOP VIEWER
Viewer Viewer: VR
Type something
Sign up
Blog
DELIGHTEX BLOG
Download CoSpaces app
Learn more Early Access
cospaces.io
Download CoSpaces app
Get Early Access
cospaces.io
Download CoSpaces app
Signup
Facebook
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
Faceb
MO
Login
Facebook
Login
COSPACES VIEWER
No wa
Create page w
that you can cr
yourself using
(tablet?) versio
Create page that explains user
how to explore content:
1. download an app
2. get headset
3. explore
Gallery login
Gallery
Get
AppStore
APPSTORE/PLAYSTORE
VIEW
Gallery
Gallery My Projects logout
DESKTOP GALLERY
Get Early Access
Gallery
Gallery
DESKTOP GALLERY
DOWNLOAD AN APP
LOGIN
UI Map

5. Type something
Share
Studio: Stage
Type something
!
2 / 5
Studio: Viewer
Type something
Explore 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
Facebook
Login
Type something
Sign up/Login
Facebook
Signup
Type somethingGet started with CoSpaces
Welcome from CEO
Type something
Join Slack Team
Invitation from Slack
Type something
Okay
Faceebook
Access
Type something
View
itunes.apple.com
WEBSITE STUDIO
< back Project Name (Space)
DESKTOP VIEWER
Viewer Viewer: VR
Type something
Sign up
Blog
DELIGHTEX BLOG
Download CoSpaces app
Learn more Early Access
cospaces.io
Download CoSpaces app
Get Early Access
cospaces.io
Download CoSpaces app
Signup
Facebook
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
Faceb
MO
Login
Facebook
Login
COSPACES VIEWER
No wa
Create page w
that you can cr
yourself using
(tablet?) versio
Create page that explains user
how to explore content:
1. download an app
2. get headset
3. explore
Gallery login
Gallery
Get
AppStore
APPSTORE/PLAYSTORE
VIEW
Gallery
Gallery My Projects logout
DESKTOP GALLERY
Get Early Access
Gallery
Gallery
DESKTOP GALLERY
DOWNLOAD AN APP
LOGIN
Understand Identify Act Control+ + =

6. Example 1
UI map for CoachingSpaces

7. 1. Screenshots

8. 2. Group & Link

9. 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.com
4
4 Dashboard
coachingspaces.com
sitename.com
coachingspaces.com
coachingspaces.com
coachingspaces.com
coachingspaces.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
Mouse Over
6
6 Dashboard: Folder options
Details
Login Dashboard
3. Result

14. Example 2
UI map for CoSpaces

15. Example 2
UI Map for CoSpaces

20. Summary:
The UI map is great
– for analysis
– for product planning
– to get a common understanding

21. UI map
Master
the mess
Better world

22. Thank you!