iOS app · HCI & UI project

Step Terra

A walking app where your daily steps grow a living little island. You arrange it, decorate it, watch the weather roll over it, and sail out to friends’ islands across bridges. I designed it screen by screen.

6,485of 10,000 steps today, framed as “3,515 steps to go” instead of a failure.
86% happyThe island’s mood as one friendly number, shown next to its people and its cat.
5 tabsHome, Island, Shop, Community and Progress, each with an icon and a label.
9:41
Step Terra home screen: your island, 86% happy, a season banner, rain showers in the forecast and today's walk of 6,485 steps toward 10,000. Step Terra island screen: an isometric island in the rain with the hint 'Tap to select, hold an item to move it', an Add item button and your harvest basket. Step Terra shared sea: friends' islands in an ocean, with Amara's island joined to yours by a bridge.

The HCI lens

Six small decisions that make it feel kind.

Each one is something you can see in the screens. The crops below are cut straight from the app, so you can check the design against the claim.

01

Teach the gesture where it happens.

The island carries its own cue, “Tap to select · Hold an item to move it”, and a second line sits right under the scene: “Hold an item to drag it · tap to edit.” The same rule appears in two places, so the interaction can be learned without a tutorial.

Seen on: Island
02

Progress that never scolds.

The big number is what you’ve done (6,485), the goal sits quietly in the corner, and the gap is worded as “3,515 steps to go.” It’s a distance still to cover, not a shortfall to explain. The week is a row of tiles with today filled in.

Seen on: Home
03

The weather is part of the world.

A compact strip says “Rain showers · preview” with the next hours as three small icons, and the rain is visible on the island itself. The forecast becomes context for your next walk, echoing the calm weather communication I explored in AERI.

Seen on: Home, Island
04

Wellbeing as a feeling, not a score.

The island’s mood is “86% happy”, sitting next to the faces of the person and the cat who live there, and captioned “A living little world.” It reads as a mood, not a dashboard, which keeps the app from feeling like homework.

Seen on: Home, Island
05

Social without pressure.

Friends are islands in a shared sea you sail around by dragging. A bridge means a real connection (“Connected by your bridge”), groups have names (“Willow Walkers”), and locked islands show a lock instead of vanishing. These screens show presence and connection rather than rankings.

Seen on: Community
06

A world that talks back.

System events become small stories: “Pasha stopped to say hi to Amara.” A basket holds your harvest, and the copy nudges toward generosity: sell it, or give goods to neighbors. Specific, warm microcopy does the job a notification badge would do elsewhere.

Seen on: Island
The look

Warm, round and easy to read.

The palette is cream, forest green and sea teal. Cards are soft, labels are small capitals, and the numbers that matter are big.

Cream#f4f4ea
Forest#0e6e5c
Leaf#3fae7b
Sea#1c7e89
Mint#e2f4e8
Coin#fcf7dc
  • Small capitals set the context. “YOUR ISLAND”, “TODAY’S WALK” and “SEASON 1 · 58D LEFT” label each card before the content.
  • Big numerals carry the meaning. The step count is the largest number on Home, with its unit set small beside it.
  • The active tab is shown by shape and color, a filled pill behind the icon and a green label, not by color alone.
  • Primary actions are clear green buttons, like “Visit Amara” and “Add item”, with the cost in the label when there is one (“Raise · 800”).

Interested in the thinking behind it?

I’d love to talk about the interaction design, the weather ideas that carried over from AERI, or what to test next.