Warden Process Book

WARDEN
PROCESS BOOK • BIBIANA BAUER
ADVANCED VISUAL IXD • SPRING 2018 • ERIN MALONE

TABLE OF CONTENTS
1. Project Brief
6. Ideation
2. Concept
7. Design
3. Clickable Prototype
8. Prototyping
4. Process
9. Outcomes
5. Research

PROJECT BRIEF
Using no words, design an app for a
professional who relies on weather
for their job on a daily basis.
COURSE
Advanced Visual IxD
TIMELINE
3 weeks
Erin Malone
PRIMARY SKILLS
TEAM
Individual
UX + UI
Iconography
Prototyping

Warden is a mobile app which
provides park rangers with
personalized weather forecasts
and daily field communication.

Clickable Prototype

RESEARCH

Inspired by all the great times and
experiences I’ve had visiting parks,
I decided to design a weather app
for Park Rangers for this project.

PARK RANGER
•Protect park lands
•Patrol campgrounds & trails
•Conduct tours & hikes
•Answer questions from guests
•Perform Search & Rescue
•Enforce fire & safety codes
https://study.com/articles/
Park_Ranger_Salary_Duties_and_Requirements.html

WEATHER FACTORS
TEMPERATURE PRECIPITATION HUMIDITY WIND

Extreme weather can cause
hazards which risk the safety
of park lands and visitors.

WILDFIRES

FLOODS

MUDSLIDES

DUST STORMS

TORNADOS

AVALANCHES

BLIZZARDS

HURRICANES

IDEATION

I began ideating by mapping
the app flow, then sketching
out some initial interactions,
and wireframing key screens.

APP FLOW DIAGRAM

1
2
3
4
12°
5
6
7

DESIGN

I explored three very different
visual design directions each
inspired by existing weather
services, maps, and nature.

STYLE TILE EXPLORATION #2

STYLE TILE EXPLORATION #3

STYLE TILE EXPLORATION #1

STYLE TYLE
#00792F
#959595
#FFFFFF

The iconography I used was
designed from the ground up
and tested with users to
validate their understanding
of each symbol and its use.

I started off with three variations on a set of icons. Through peer review, it
was evident that the second set was the most promising to move forward.

Second iteration on the icon set using the traditional icon grid resulting in
more natural forms with changes or additions made for location pin,
messages, temperature, bell, bookmark, heart, and satellite icons.

Through user testing I found
that the main point of confusion
for people was differentiation
between the icons for
“precipitation” and “humidity”.
Users weren’t immediately sure
about the calendar, satellite,
and temperature icons, but
understood after a second look.

I updated the calendar and humidity icons to be more recognizable.
The bookmark and bell icons were retired because their functionality
would be redundant with that of the heart and message icons respectively.

PROTOTYPING

For the first prototype iteration
I used a paper prototype to
validate the screen flow and
iconography in context.

Second Prototype
Screens Export

Final Prototype
Screens Export

OUTCOMES

WHAT I LEARNED
A major component of this project that lay outside of the brief was the
fact that I was using a new prototyping software, Adobe XD. Over the
course of the project it was my goal to gain mastery of the program as
something I could add to my designer toolkit, however, by the end of
the project I found that while there were perks to the software I spent
more time figuring out how to use each feature than actually using it.
This slowed down my design process and taught me that while there
is always value in learning something new, it may not be the best idea
to try it over the course of an entire project.

WHAT I WOULD DO DIFFERENTLY
One thing that did not become apparent to me until after the final
critique of this design project was my use of color—or lack thereof. I
have a tendency towards minimalism and so I was initially attracted to
the challenge of designing with a sparse color palette and honing in on
the principles I had seen with material design on Android devices. If I
were to go back and do another iteration of this design I would
experiment with more variation of color in the UI of the screens.