The Arb
Go outside & be inspired
The Arb is a pocket companion for Nichols Arboretum. A hypothetical app built for people who like to wander, stop, look, and learn something about where they are standing. You can check what is blooming this week, log a sighting when you spot something cool, find the nearest restroom or parking zone, and sign up for a walk with a botanist. Nothing flashy. Just a calm, friendly guide that makes the park feel a little more knowable.
AI Usage Statement
All work in this slide deck, as well as the version submitted prior, was made by hand. I took great care in trying to craft an experience that would not only look visually appealing, but make sense to the ‘hypothetical’ users who use this app. As such, I used an LLM to help me figure out only what type of data points a hypothetical app such as this would use for showing information. All atoms, molecules, organisms/components, visual related aspects of this application has been 100% hand crafted (manually). No LLM has been used to generate any screen.
If there are any questions about how these screens were made, please feel free to reach out. I'm happy to walk through my version history and share context from my past works to offer any reassurance needed.
That conversation, can be found at the following link: https://claude.ai/share/046e9828-1a36-4f8d-b35f-5940247b0d20
The Figma files can be found at: https://www.figma.com/design/g3ZzYDMeB47GPTqVxhHCIn/Arb-App?node-id=232-727&t=GGwknG9zj5qgYJrY-1
As seen from the LLM conversation, I have simply taken the data points and have tweaked it so that it may fit into my own app’s context. However, the graph representation, or ‘pie chart’ breakdown itself is of my own original thought.
What Claude gave me, i.e, the data points I used for reference:
How I incorporated those data points, applied my own aesthetic, into my own design:
Water Quality
Forest Cover
100%
Composite
Water
Quality
74
out of 100
Composite Index
68.4
out of 100
Forest
Cover
61%
out of 100
Species Observed
342
observations
I manually created the row of components at the bottom (and of course, the graph from scratch)
01 • Concept
A quiet, warm guide for a walk in the park.
The Arb is meant to feel like the place it belongs to: outdoors, un-shiny, and a little bit slow in a good way. The visual language leans on warm cream, forest greens, and soft flower pinks so the app stays gentle on the eyes even when you are out in bright daylight.
Design Philosophy
The design is that of minimalism and warmth. The app exists to help. Big serif headers set the pace, open cream backgrounds give each page room to breathe, and the content does most of the heavy lifting: photos of fall trees, a peony close-up, a hand-drawn trail map.
Color
Cream as the base because it feels like paper in sunlight. Deep forest green for the brand and trusted actions. A softer sage green for primary buttons. Pink and amber pulled straight from the logo to add moments of warmth and play. Reds and blues only where they earn their keep: emergencies, information, and map pins.
Sign Up
Continue as Guest
01 • Concept (Continued...)
Typography
Two families doing very different jobs. IBM Plex Serif handles every major headline and big number, giving the app a slightly editorial feel, like a nature journal. Inter picks up the rest: labels, buttons, body copy, anything that needs to stay clean at small sizes.
Layout & Structure
A single column, mobile-first layout. Cards with generous corner radii group related info. A fixed bottom nav keeps Home, Explore, Nature, Journal, and More within thumb reach. Key calls to action sit at the bottom of each screen so users know where the page ends.
Visual Elements
The app uses real photographs. Then, there’s small illustrated flowers on the bloom map keep things friendly without leaning into cartoon territory. Icons are a single stroke weight and drawn in one style.
Tone of Voice
Plain, warm, short. Copy sounds like it was written by a real person. Labels like "What's in Bloom?", "My Favorite Trails", and "Go outside & be inspired" set the mood without shouting.
Composite Index
68.4
out of 100
Species Observed
342
observations
Forest
Cover
61%
out of 100
02 • Style Guide
Atoms, molecules, and the system behind the screens.
Every tile below is a real component from the app. Put them together and you get the mockups on the next page. Pulled apart, they make it easy to keep the product consistent as it grows.
Peony
Myrtle
Trout Lily
Crocus
Snowbloom
Blue Violet
Trillium
Daffodil
Typography
Header
Title
Header
Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Body
B1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
B2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
Caption
C1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
C2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
Labels
L1
Label 1
L2
Label 2
L3
Label 3
L4
Label 4
Color System
Primary
Brand
Forest Green
C:70
M:30
Y:75
K:35
R:44
G:82
B:52
#1F3D2E
Sage Green
C:45
M:10
Y:60
K:5
R:139
G:175
B:110
#8EB977
Cream
C:2
M:4
Y:6
K:0
R:249
G:244
B:238
#EFE6DB
Neutrals
Black
C:2
M:4
Y:6
K:0
R:249
G:244
B:238
#000000
White
C:2
M:4
Y:6
K:0
R:249
G:244
B:238
#FFFFFF
Accents
Rose Pink
C:10
M:52
Y:15
K:0
R:229
G:122
B:156
#E07A9B
Peony Pink
C:4
M:29
Y:0
K:0
R:245
G:184
B:208
#F4C5D3
Ochre Yellow
C:8
M:42
Y:80
K:0
R:244
G:160
B:61
#E89A4B
System
Brand
Alert
C:0
M:58
Y:64
K:16
R:214
G:89
B:77
#D6594D
Info Blue
C:74
M:40
Y:0
K:7
R:238
G:143
B:238
#3E8FEE
Elsewhere
C:42
M:57
Y:0
K:10
R:133
G:100
B:230
#EFE6DB
06 • Design Challenge
Report a Sighting.
A brand new screen built for the moment a visitor spots something and wants to tell or warn someone or authorities about it. That can be a rattlesnake on a path, a turtle sunning itself, or a nest worth keeping away from.
Home
Explore
Nature
Journal
More
Sightings
Report a Sighting
I saw a ...
Snake
A venomous rattlesnake native to North American wetlands.
Warning: Please do not approach the Massasauga snake, as it can be dangerous!
Turtle
A land-dwelling reptile with a hinged shell that closes.
Nest
A woven structure built to safely hold and incubate a clutch of eggs.
I saw it ...
Right Here
Elsewhere
I’d like to ...
Optional
Take Photo
Upload a Photo
Type out details here...
Record
Voice
Submit this Sighting
Home
Explore
Nature
Journal
More
Sightings
Report a Sighting
I saw a ...
I saw it ...
Right Here
Elsewhere
I’d like to ...
Optional
Take Photo
Upload a Photo
Type out details here...
Record
Voice
Submit this Sighting
Last updated March 2026