case study - Andrew Bernardo

Transcription

INTERACTIVE REAL TIME DATA VISUALIZATION
Project Document - November 3, 2014
Mont Tremblant Kiosk
|
Andrew Bernardo
DOCUMENT OVERVIEW
Mont Tremblant Kiosk | Andrew Bernardo
PAGE INDEX:
PAGE INDEX:
p. 3 - Problem Statement
p. 20 - Detailed Wireframes
p. 4 - Project Goals
p. 31 - PRELIMINARY DESIGN CONCEPTS
p. 5 - Competitive Analysis
p. 33 - Moodboard / Direction One
p. 8 - Trend Research
p. 35 - Moodboard / Direction Two
p. 9 - Target Audience
p. 37 - Moodboard / Direction Three
p. 10 - User Personas / User Stories
p. 39 - VISUAL DESIGN
p. 14 - WIREFRAMES
p. 41 - Final Visual Design Comps
p. 16 - Key Features
p. 48 - PROTOTYPING STORYBOARDS
p. 17 - Information Architecture
p. 49 - Animations Specifications
p. 18 - Base Grid System
p. 50 - Storyboards
p. 19 - Core User Experience Template
2
PROJECT STATEMENT
Finding out the best time to plan a trip can be daunting. By
providing all the information you would want to know about a
ski slope such as the weather, the number of slopes, the slope
difficulty, and so on will help anyone determine when and
where they would like to go on the mountain.
3
GOALS
1 Monitor the number of slopes and lifts that are currently
open on the mountain
2 Track the weather forecast (temp, snowfall, wind) and
other mountain overviews
3 Provide individuals with the knowledge on what trails are
better suited for their skill level
4
COMPETITIVE ANALYSIS
ON THE SNOW:
Compare several ski resorts
based on mountain statistics
such as base and top elevations,
vertical drop, length of longest
run, and area covered by snow
making.
5
MONT TREMBLANT
WINTER RESORT:
Contains an interactive map of
their mountain ski slopes as well
as a chart on average snowfalls,
open lifts, temperatures and
conditions.
6
GLACIER WORKS:
Explore the several peaks of
Mount Everest in a more three
dimensional setting which also
enables the user to learn specific
content on each peak.
7
TREND RESEARCH
Many ski slopes provide weather forecasts for the day or
snowfall predictions but they mostly fall into the form of charts
or lists. Very few sites contain interactive material in which you
can manipulate the data that is being shown.
8
TARGET AUDIENCE
This ski slope monitor will be in the form of an installation at
the actual ski slope. Since the data will be displayed as an
installation, the main users will be individuals at the mountain
who are either looking to find the most difficult slopes for the
day, the open slopes for the day, or the daily forecast.
9
USER PERSONA
Elise is in her late 20’s and works at a
law firm just outside of NYC. She
enjoys escaping the office whenever
she can find the time to go traveling
with her boyfriend of three years. The
two of them are both outdoor
extremists who love trying new things.
10
USER STORY
Elise and her boyfriend, Rudy, just traveled to Mount Tremblant for one of their
weekend trips and notice an interactive installation right before they leave the lodge.
Elise immediately runs over and checks the weather forecast for the day and to see
how bad the winds will be at the peak of the mountain. Once she finishes checking
the weather she quickly goes and scans the map of the mountain to check which
specific trails and lifts are open that day. Elise then quickly rotates the map to see
the other side of the mountain and the open trails one that side of the mountain.
Once finished, Elise and Rudy leave the lodge and decide to hit the slopes.
11
USER PERSONA
Howard is in his late 40’s and is both a
husband and father to a family of four.
Him and his wife, Nora, have two kids,
Mike and Amy, who are both in their
pre-teens. They enjoy going on family
trips each year and have gone skiing
since the kids were very young.
12
USER STORY
Howard, Nora, and their two kids have just arrived for their family vacation to Mount
Tremblant. The family has never been to Mont Tremblant before and it is the first
day of their extended weekend. Howard walks up to the interactive installation and
begins by selecting the Intermediate skill level because this will help filter some of
the trails from the map that are better suited for the kids. He then clicks on one of
the trails to view its name, distance and difficulty. Howard does this with several
others trails that he believes will be good starters for the kids. Now that he knows a
few of the trail names he wants the family to start with he sets out to find the family
and begin their vacation.
13
WIREFRAMES
|
Andrew Bernardo
WIREFRAMES OVERVIEW
These wireframes are a depiction of the Full UX scope of the
various interactions that will take place on this Mont Tremblant
Kiosk. These interactions include viewing the entire mountain,
checking the mountain’s weather, open lifts, and trails, as well
as customizing the view of the mountain.
15
KEY FEATURES
KEY COMPONENTS:
The main feature of the Mont Tremblant Kiosk will be an interactive map in
- Trails
which the user can customize in order to have a more personalized
- Lifts
- Weather
experience when interacting with the content. The kiosk will also show users
- Elevation
what the current weather is as well as an extended forecast for the week, the
specific trails and lifts open that day, and the number of people on the
mountain at that time.
16
INFORMATION ARCHITECTURE
Interactive
Map
Elevation
Vertical Drop
Base Height
Individual
Overview
Top Height
Total
Total
Total
Total
Distance
Admitees
Lifts
Trails
Length
Difficulty
Average
Skiing Time
Lift Capacity
Condition
Fresh powder
Icy Spots
# of Lift
Tickets Sold
Variety
Gondolas
Magic Carpet
3-Passenger
4-Passenger
High Speed
4-Passenger
# of This Kind
# of This Kind
# of This Kind
# of This Kind
# of This Kind
Weather
Lift / Wait
Times
Current
High
Snowfall
Temperature
Base
Low
Summit
Natural
Snow making
Wind
Magnitude
Direction
Weekly
17
BASE GRID SYSTEM
40PX
KEY COMPONENTS:
- 16x9 HDR Ratio
- 12 Columns
20PX
Mont Tremblant
Logo
12 COLUMNS
Weather Module
(Collapsed)
Interactive Map
- 40 pixel side margins
- 20 pixel gutter
- 60 pixel column width
Navigation Arrow
(Left)
Navigation Arrow
(Right)
Weather Module
(Extended)
16:9 RATIO
Skill Level Slider
18
CORE UX
1.1 Interactive Map Homepage
KEY COMPONENTS:
- Interactive Map
- Weather Module
-Collapsed View
-Expanded View
Gives the user an
overview of the
weather, open
trails and lifts, and
weekly forecast
This map of the
mountain allows
the user to view
the different trials
and lifts that the ski
resort offers
- Navigation Arrows
- Mont Tremblant Logo
- Customize Map Module
Allows the user to
change the current
mountain face that
they are viewing
By selecting your
skill level the
interactive map will
recommend trails
that best suit your
skiing abilities
19
WIREFRAMES
1.1 Interactive Map - South Side
Mont Tremblant
At the top of the
screen will be the
logo for Ski Resort
South Side
This will indicate
which interactive
map the user is
currently viewing
INTERACTIVE MAP:
This is an interactive map
for the Mont Tremblant
Ski Resort in Quebec,
Canada in which users
will be able to view
certain statistics about
the mountain as well as
customize the specific
trails and lifts that they
view on the mountain.
Weather Forecast
This is a collapsed
view of the daily
mountain report
which displays the
current weather
conditions
Mountain Map
This will be a map
of the mountain’s
trails and lifts
which will be
highlighted in a
color that
corresponds to
their respective
difficulty levels
Mountain Report
This button, when
clicked, will reveal
the full expanded
view of the current
mountain report
Navigation Arrows
In order to change
the current view of
the mountain from
South side to
North Side or Both
the user can click
these arrows
Skill Level
By selecting their
skill level the user
will be able to
customize which
type of trails they
are viewing
20
WIREFRAMES
1.2 Extended Mountain Report
EXPANDED INFO:
This is how the weather
module will look when the
user chooses to expand it
and show additional
information. For here the
user can click on the Lifts
or Trials link to see more
detailed information or
simply collapse the
module back up.
Weather Forecast
In the expanded
view the weather
forecast extends to
reveal information
on the number of
overall lifts and
trails versus the
number of open
ones as well as an
extended weekly
weather forecast
Lift Statistics
By clicking this
button the user
will be able to find
out which specific
lifts are open on
the mountain
Mountain Report
This button, when
clicked, will close
the full expanded
view of the current
mountain report to
revert back to the
collapsed view
21
WIREFRAMES
2.1 Screen Saver - Lifts
SCREEN OVERLAY:
If the user clicked on the
Lifts link then they would
be taken to this screen
which overlays the
interactive map and
displays more detailed
information on the Lifts
category of the mountain
report. This overlay
screen will also serve as a
screen saver which will
rotate through other
screens once the
interactive map has
reached a long period of
inactivity.
Open Lifts
This top number
and donut graph
displays the total
number of lifts
compared to the
number of open
lifts for the
mountain for that
specific day
Lift Breakdown
These numbers
are a further
breakdown of the
top number and
display how many
open lifts there are
for each different
lift category
TAP TO RETURN TO MAP
Return to Map
By tapping
anywhere on the
entire screen the
user will be able to
go back to the
interactive map
Last Updated
Due to the fact
that this data
could change
throughout the
day this last
updated shows
how current the
information is
22
WIREFRAMES
TRAILS MORE INFO:
If the user returns back to
the interactive map they
can also explore more
information on the Trails
for the mountain.
Trail Statistics
By clicking this
button the user
will be able to find
out which specific
trails are open on
the mountain
23
WIREFRAMES
3.1 Screen Saver - Trails
SCREEN OVERLAY:
If the user clicked on the
Trails link then they would
be taken to this screen
which overlays the
interactive map and
information on the Trails
category of the mountain
report. This overlay
screen will also serve as a
screen saver which will
rotate through other
screens once the
interactive map has
inactivity.
Open Trials
This top number
and donut graph
displays the total
number of trails
compared to the
number of open
trails for the
mountain for that
specific day
Trails Breakdown
These numbers
are a further
breakdown of the
top number and
display how many
open trails there
are for each
different trails
Return to Map
By tapping
anywhere on the
entire screen the
go back to the
interactive map
Last Updated
Due to the fact
that this data
could change
throughout the
day this last
updated shows
how current the
information is
24
WIREFRAMES
INTERACTIVE MAP:
If the user navigates back
to the interactive map
they can click the arrows
on the side of the screen
to change their view of
the mountain face.
Navigation Arrows
In order to change
the current view of
the mountain from
South side to
North Side or Both
the user can click
these arrows
25
WIREFRAMES
1.3 Interactive Map - North Side / Skill Level
CUSTOMIZE:
The user can select their
skiing skill level and the
interactive map will
automatically customize
the trails that are
displayed on the face of
the mountain.
Skill Level
By selecting their
skill level the user
will be able to
customize which
type of trails they
are viewing
26
WIREFRAMES
1.4 Interactive Map - Selected Skill Level View
INTERACTIVE MAP:
This is the interactive map
when the user has
selected a specific skill
level the view will change
with reveal a specific set
of trails and lifts. Those
trails and lifts will be
highlights on the map
while the others are
downplayed.
Customized View
Making a custom
selection highlights
those trails and
lifts on the map in
which the user can
click on for more
information
27
WIREFRAMES
1.6 Interactive Map - Trail Information
TRAIL INFO:
This trail name and skiing
distance will be revealed
when the user clicks on a
specific trail in order to
learn additional content
about that trail.
Trail Info
When the user
clicks on a trail this
information will
pop up and state
the trail name and
its distance
28
WIREFRAMES
4.1 Screen Saver - Ski Resort Logo
SCREEN OVERLAY:
This screen overlays the
interactive map and is the
first screen for the screen
savers that will rotate
through once the
interactive map has
inactivity.
Mont Tremblant
This is where the
logo for the Mont
Tremblant Ski
Resort will go
Return to Map
By tapping
anywhere on the
entire screen the
go back to the
interactive map
29
WIREFRAMES
5.1 Screen Saver - Weather Forecast
SCREEN OVERLAY:
interactive map and
information on the
weather for the
mountain. These overlay
screens will serve as a
screen savers which will
rotate through once the
interactive map has
inactivity.
Summit Temp
This top number
displays the
current
temperature for
the summit of the
mountain while
another screen
displays the
current base temp
Weekly Forecast
This shows you an
extended weekly
forecast for the
summit of the
mountain
Return to Map
By tapping
anywhere on the
entire screen the
go back to the
interactive map
Last Updated
Due to the fact
that this data
could change
throughout the
day this last
updated shows
how current the
information is
30
PRELIMINARY VISUAL DESIGN CONCEPTS
|
Andrew Bernardo
OVERVIEW
These three moodboards and initial design concepts explore
different typefaces, colors, and layouts of the mountain to see
which design direction is the best option.
1. Subtle Yet Playful
2. Cool And Sophisticated
3. Muted and Peaceful
32
MOODBOARD 1
DIRECTION ONE
Subtle Yet Playful
This direction is supposed to
provide a feeling of a white out
with a splash of color that fuels
the design with energy and
excitement.
KEYWORDS:
- Simplistic
- Splash of Color
- Sleek
33
COMP 1
DIRECTION ONE
Subtle Yet Playful
provide a feeling of a white out
with a splash of color that fuels
the design with energy and
excitement.
KEYWORDS:
- Simplistic
- Splash of Color
- Sleek
34
MOODBOARD 2
DIRECTION TWO
Cool And Sophisticated
provide more of a feeling of cold
that captures another side of the
mountain.
KEYWORDS:
- Chilled
- Sophisticated
- Atmospheric
35
COMP 2
DIRECTION TWO
Cool And Sophisticated
provide more of a feeling of cold
that captures another side of the
mountain.
KEYWORDS:
- Chilled
- Sophisticated
- Atmospheric
36
MOODBOARD 3
DIRECTION THREE
Muted and Peaceful
provide more of a feeling of
warmth through muted colors
but still embody the essence of
the mountain.
KEYWORDS:
- Surreal
- Warmth
- Serenity
37
COMP 3
DIRECTION THREE
Muted and Peaceful
provide more of a feeling of
warmth through muted colors
but still embody the essence of
the mountain.
KEYWORDS:
- Surreal
- Warmth
- Serenity
38
VISUAL DESIGN
|
Andrew Bernardo
OVERVIEW
These design are a depiction of the Prototyping UX scope of
the various interactions that will take place on this Mont
Tremblant Kiosk. These interactions include viewing the entire
mountain, checking the mountain’s weather report, open lifts,
and trails, as well as the customizable view slider.
40
HOMEPAGE
INTERACTIVE MAP:
This is an interactive map for the
Mont Tremblant Ski Resort in
Quebec, Canada in which users
will be able to view certain
statistics about the mountain as
well as customize the specific
trails and lifts that they want to
view on the mountain.
41
MOUNTAIN REPORT
EXPANDED MODULE:
When the user clicks on the
weather module to reveal more
information this is how the
expanded the weather module
will look. From here, the user can
then click for more information
on the trials or the lifts as well as
collapse the module.
42
SKILL LEVEL
1.4 Customizable View Slider
SKILL SELECTOR:
This slider presents the user with
the ability to select their skill level
to reveal the slopes on the
mountain that better fit their
abilities.
43
TRIAL INFO
1.5 Trail Information
SCREEN OVERLAY:
If the user clicks on a specific
trails then the name and distance
of the trail will be revealed. The
information will fades after a
while or disappear if the user
clicks anywhere on the screen.
44
SCREEN SAVER
3.1 Screen Saver - Ski Resort Logo
SCREEN OVERLAY:
interactive map and is the first
screen for the screen savers that
will rotate through once the
interactive map has reached a
long period of inactivity.
45
SCREEN SAVER
3.1 Screen Saver - Lifts
SCREEN OVERLAY:
If the user clicked on the Lifts link
then they would be taken to this
screen which overlays the
interactive map and displays
more detailed information on the
Lifts category of the mountain
report. This overlay screen will
also serve as a screen saver
which will rotate through other
screens once the interactive map
has reached a long period of
inactivity.
46
SCREEN SAVER
3.1 Screen Saver - Trails
SCREEN OVERLAY:
If the user clicked on the Trails
link then they would be taken to
this screen which overlays the
interactive map and displays
more detailed information on the
Trails category of the mountain
report. This overlay screen will
also serve as a screen saver
which will rotate through other
screens once the interactive map
has reached a long period of
inactivity.
47
PROTOTYPE STORYBOARDS
|
Andrew Bernardo
OVERVIEW
STORYBOARD SCOPE
These storyboards detail the animation that will capture a
single walk-through for one particular user and their
interactions with the content on this Mont Tremblant Kiosk.
The user will view the trails, weather, and customize module.
ANIMATION
Ratio: HDTV 1080 24
Duration: 30 – 40 seconds
49
STORYBOARDS
1.1 - Loading Screen
1.3 - Homescreen
The animation will load up with one of the screen savers that displays
the logo for the Mont Tremblant Ski Resort.
The user taps on the interactive screen in order to engage with the
content at hand.
Once the touch screen becomes active, the first movement will be the
mountain subtly rotating on the screen to show the interactivity.
1.4 - Homescreen
1.5 - Homescreen
1.6 - Homescreen / Mountain Report
Then the other content on the screen (trails, lifts, mountain report,
and skill selector) will animate in all at the same time.
The user will then tap the full mountain report to see what additional
content they will be given.
From here the user will scan the additional content they are given
and go to click on the additional information about the trails.
50
STORYBOARDS
1.7 - Screensaver / Trail Details
1.8 - Homescreen / Mountain Report
1.9 - Homescreen / Skill Level
The numbers will scale up to reveal the numbers shown here and
once the user is finished they will tap to return to the map.
From here they will be returned to the interactive map and the user
will click to collapse the full mountain report.
For here the user will select their skill level to reveal the slopes on the
mountain that better fit their abilities.
2.0 - Homescreen / Skill Level
2.1 - Homescreen / Trail Information
Now that the user is displayed with trails that better suit their abilities
they click on a trail to learn more.
The name and distance of the trail is revealed when the user clicks on
the trail and then the information fades after a while.
To end out the animation the screen savers that displays the logo for
the Mont Tremblant Ski Resort will come back on to the screen.
51

case study - Andrew Bernardo

Transcription

Similar documents

Mont-Tremblant - NosAdresses.com

tremblant - Kaplan International

Spring Break Ski Trip 2016 February 28th to March 4th

Brochure Sacoa Mini

On September 6, a hiker made a macabre discovery at the foot of the

activity card

MountainHouse.net