NEW TURICUM
UI/UX Project
Summer 2024
Scenario
The Municipality of Zurich asks a humble designer to encourage more people to interact with the city, including cultural-historical sites, public transit, and local businesses.
Outcome
New Turicum is a design concept for a gamified role-playing exploration experience for the city of Zurich. The game nudges both tourists and inhabitants alike to complete quests, gain XP in various skills, and unlock meaningful, real rewards through the mediated exploration of Zurich.
| RESEARCH AND DISCOVERY
Why do people use Duolingo over other language learning apps even though it's worse? Why does my cousin spend 5 hours a day playing League of Legends? Why are moms in executive finance positions reaching Level 3147 in Candy Crush?
FACT
PEOPLE LOVE GAMES
How do people explore their city?
SURVEY #1
21 Responses — Convenience-based sampling
Browse Questions -->
* Most people explore new places only once a month or less
* There are a diverse variety of reasons to explore new places; historical interest, food, cultural experiences, socializing with friends, etc...
* Locals have trouble finding interesting new places; or even information on them.
COMPETITOR ANALYSIS
Pokémon Go The Elephant in the Room
Direct Competitor
MAIN TAKEAWAYS
* Users are encouraged to go out of their way to catch pokemon and battle trainers outside using innovative game design (virtual progression, challenges, AR)
* Users are encouraged to open the app through daily quests, events, local 'gyms', and push notifications
* The GPS-based live map shows exciting points of interest (POIs) and blends out unimportant information (buildings, etc)
Geocaching & Zurich City App
Indirect Competitors
* Geocaching encourages users to treasure-hunt locations for real rewards. It's gamified exploration, but not focused on the city specifically and provides no extra challenge, progression, or information
* The Zurich City App offers an interactive list of information about the city's offerings, but does nothing to nudge users to pursue them
MAIN TAKEAWAYS
|| DEFINE
What are people looking for in a gamified exploration experience?
SURVEY #2
17 Responses — Convenience-based sampling
MAIN TAKEAWAYS
* Respondents are generally interested in a gamified GPS exploration app
* Respondents are most excited about the following features:
* Real Life Rewards
* Local-cultural references
* Challenges, quests, achievements
* Interactive Map
* Social features
PERSONAS
Who will be playing?
In order to design within the right context, I created 5 specialized personas that represent a very diverse range of people, while incorporating the results from the survey.
MAIN PERSONA CATEGORIES
* Exploration Motivations
* Exploration Habits
* Exploration Frequency
* Gamification Preferences
* Pain Points
* Wants and Needs
USER JOURNEYS
How will users complete tasks in the game?
IMPORTANT DESIGN OPPORTUNITIES
* Suggested routes and destinations
* Filtering for certain destinations
* Use of local lingo
* Rewarding social features (more group XP)
* Badges and Achievements to show off
||| WIREFRAMING
What will it feel like to interact with the map?
DESIGN DECISION
2D — TOP DOWN
* Clear overview
* Far-away places visible
* Easier to code (overlaid map image)
3D — TOP ANGLE
* Less immediate clarity
* Much more immersive
* Focus on locations closer to player
* Harder to code (map camera, pan/zoom
interactions, etc...)
Main Menu Interactions
PROTOTYPE #1
In order to understand the main interactions available, I've created a prototype to link them all together
MAP SCREEN ACTIONS
* Access Main Menu
* Open Point of Interest (POI) on map
* Embark: let an algorithm find and suggest routes/POIs
* Filter by skill: Find the nearest POI that gives skill-specific XP
* Magic Vision: AR camera with POIs overlaid.
Menu Screens
PROCESS AND THOUGHTS
In terms of aesthetics, I was envisioning a menu that looks like opening an actual journal
This proved to be difficult to recreate in terms of UI, as the book-frame takes up too much space
I've opted for a simpler book-tab style interface that hints at the existence of a book frame
In the beginning, my wireframing was taking a lot of time and was more like hi-fi prototyping but with greys instead of color
But across the many screens I've developed a simpler and faster workflow
|||| HIGH-FIDELITY DESIGN
STYLESHEET
Defining the Aesthetic
INK — ZURICH CITY COLORS — ARCHIVES — MEDIEVAL MAPS — ETCHING & PRINT — ILLUMINATED MANUSCRIPTS — CALLIGRAPHY — PIXEL ART — PAPER — BOOKBINDING — COTTAGE CORE — DARK ACADEMIA
I WANT PLAYERS TO FEEL LIKE THEY ARE INSCRIBING HISTORY INTO THE CITY ITSELF
The colors were inspired by the look of dark ink and wax letter seals
The app background features a real map of Zurich printed by Jos Murer in 1576
ITERATIONS
How can I create a look and feel that is intuitive, expressive, and modular?
ATOMIC DESIGN SYSTEM MEDIEVAL RETRO-MINIMALISM
ATOMS
Material Design Library
* Consistent, neutral aesthetic for essential interactions
* Clarity and familiarity for users
* High-quality design standards
Open-source ornamented lettering for accentation
* Expressive and consistent decorative elements
* Coherent aesthetic
* bEAUTY
MOLECULES
Outlined call-to-action buttons
* In my UI, outlined means 'definitely interactive'
* Consistent clarity across screens
Responsive multi-property components at a Molecular level
* I try to make my components modular ASAP
* Color/shadow variants
* Icon instance swap
* Boolean layer visibility (chips, pills, subheadings, etc...)
* Size-responsive text input (Auto-Layout)
ORGANISMS
Primary intra-menu CTA Buttons
* Responsive selection buttons for submenus
* Highly modular components with instance-swap
and boolean properties allow devs to work
much more efficiently
SCREENS
Map (Main Screen)
Access Main Menu
Open Point of Interest (POI) on map
Embark: let an algorithm find and suggest routes/POIs
Filter by skill: Find the nearest POI that gives skill-specific XP
Open an expanded top-down map with all locations in the city
Magic Vision: AR camera with POIs overlaid.
Onboarding
Narrative introduction
Registration
Location Permissions
Choice of class; preliminary character customization
First quest: get to know the map
Reward
Main Menu
Character: Info, Customization, Skills, Achievements
Inventory: Gold, rewards, coupons, passes
Quests: Quest lines, daily quests, events
Townfolk: Create party, friends list, guilds
Emporium: Passes, tickets, cosmetics, potions (XP generation buff)
Settings: FAQ, notifications, location settings
How can I create an exciting and coherent UI across all screens while thoughtfully enveloping the content of each screen?
Public Character Profile
Character info and stats
Characters, tiered badges, and titles to unlock and exhibit
Skills section with detailed breakdown of skill levels and distribution
Separate achievements page
Townfolk
View friends list and profiles
Invite friends to party
Bonus XP for partying up
Browse, join, and create guilds
Quests
Complete quest lines (thematically/narratively related activities)
Tasks
Tasks-specific XP rewards
Quest Locations
Rewards
Today's Challanges and Events
Loose quests and challenges
Emporium
View Gold
Purchase passes and tickets (transportation, museums, events)
Purchase cosmetics, titles, characters with gold
Purchase potions that give skill-specific XP boosts and other buffs
NEW TURICUM
Your real-life RPG adventure begins right here in Zurich
DISCOVER THE CITY LIKE NEVER BEFORE!
COMPLETE QUESTS TO EARN GOLD AND XP!
EARN REAL LIFE REWARDS!
Your task as an explorer of New Turicum is to discover new places, participate in activities in and around the city, and compete with the townfolk for Gold and XP.
Get ready to discover the city like never before — are you up for the challenge?
PARTY UP TO GO EXPLORING WITH FRIENDS!
CUSTOMIZE AND SHOW OFF YOUR CHARACTER!
...at least that's what it would be like if it was real