Phase 1 — Research & Discovery (applied to a

Zoo App)

1.1. Quick context: what is the Zoo App?

A short working description we’ll use for all research work:

●​ Mobile-first app for zoo visitors and potential visitors.​

●​ Core goals: increase ticket sales, improve on-site visitor experience, educate about
animals & conservation, provide wayfinding, enable event bookings, and offer
AR/enrichment experiences.​

●​ Key user groups: families with kids, school groups, tourists, local adults, zoo
staff/volunteers.

Keep this brief definition pinned — it focuses research choices.

1.2. Stakeholder interviews

Purpose: align business goals, constraints, success metrics, ops realities.

Who to interview (internal stakeholders)

●​ Zoo Director / Executive

●​ Head of Education & Conservation
●​ Marketing Manager
●​ Operations Manager (ticketing, gates)
●​ Head of Facilities (wayfinding, signs)
●​ Volunteer Coordinator / Keeper Liaison
●​ Mobile/App Dev lead (engineering constraints)
●​ Customer Service / Guest Experience lead
●​ Finance (budget targets, revenue model)
●​ Legal/compliance (privacy, child-safety rules)

How many: 1:1 with 6–12 stakeholders (depending on org size).

Format & duration

●​ 45–60 minutes, semi-structured.

 ●​ Record (with permission) + take notes; synthesize after each interview.

Interview script (template — copy/paste)

Open: “Thanks — quick context: we’re designing a visitor-facing mobile app. I want to
understand priorities, constraints, and success metrics from your perspective.”

Key questions:

1.​ What are the top 3 business goals you want the app to achieve in the next 12 months?
2.​ Who are the primary & secondary audiences we should prioritize?
3.​ What KPIs would make the app a success for you? (examples: ticket conversion rate,
average session length, dwell time in exhibits, membership sign-ups)
4.​ Are there technical or budget constraints we should know about?
5.​ What operational workflows might the app need to support (e.g., timed entry ticketing,
capacity controls, staff alerts)?
6.​ Any legal, privacy, or child-safety restrictions (e.g., COPPA, parental consent,
geo-fencing) we must follow?
7.​ What are the current biggest pain points in visitor experience today?
8.​ What existing systems must the app integrate with (ticketing provider, CRM, POS, digital
signage)?
9.​ Who will be the final decision-maker on UX choices? What is the approval process?
10.​Is there any existing research, analytics, or guest feedback we can review?
11.​What’s the target launch date or important milestones (seasonal events, school terms)?
12.​Are there metrics on current digital performance (website ticketing conversion, mobile
web users)?

Output from stakeholder interviews

●​ Stakeholder needs matrix (who wants what + priority)

●​ Aligned success metrics (a short KPI list)
●​ Constraints list (tech, legal, budget, timeline)
●​ Decision & approval map (who signs off)

1.3. Business & Market Research

Purpose: understand the competitive landscape, revenue models, and positioning.

Tasks

●​ Map direct competitors (other zoo apps, large aquariums, theme parks).
●​ Map indirect competitors (travel apps, museum apps, local events apps).
●​ Identify product differentiation opportunities (e.g., AR animal encounters, offline
wayfinding).
 ●​ Business model review: ticket-only, freemium (basic app free; paid premium
content/tours), membership features, donations.

Deliverables

●​ Competitor matrix with feature checklist (ticketing, maps, AR, membership, shop
integration, push notifications)
●​ Market gap analysis (what others do poorly that we can exploit)
●​ Potential monetization models + pros/cons
●​ Benchmark KPIs (typical conversion rates for attractions, average per-visitor revenue)

1.4. Existing data & analytics review

Purpose: learn from what’s already happening.

Sources to pull

●​ Website analytics (GA/GTM): page views, mobile % of traffic, funnel for ticket purchase.
●​ Current ticketing provider reports: mobile vs desktop conversions, peak times.
●​ Customer service logs: top complaints, frequent questions.
●​ Social listening: common visitor praises/complaints on socials & reviews.
●​ Onsite sensors / footfall data (if available): busiest exhibits, dwell times.

Key metrics to extract

●​ Current online ticket conversion rate (overall and mobile)

●​ Bounce rates on key pages (tickets, map)
●​ Most common search terms (from site search)
●​ Peak visitation hours/days and seasonal patterns
●​ Top 10 reasons for guest complaints

Deliverable

●​ Analytics summary with graphs (mobile vs desktop, drop-off points) and top 5
hypotheses explaining the data.

1.5. User research — plan & execution

Purpose: discover real user needs, behavior, mental models, and pain points.

Research goals (examples)

●​ Why do people visit the zoo? (education, leisure, social media, family day)
 ●​ How do visitors plan their visit (web, call, on-site)?
●​ How do visitors navigate on-site?
●​ What content do different user types want in an app?
●​ Acceptability of features (AR, location tracking, notifications)

Methods (mix of qualitative + quantitative)

1.​ Surveys — broad quantitative signals (N=300–1000 if online).

○​ When to use: measure awareness, desired features, device usage, trip planning
behavior.
○​ Example questions:
■​ How often do you visit zoos? (Never / Yearly / Quarterly / Monthly)
■​ How do you usually buy tickets? (On-site / Website / Third-party / Phone)
■​ Which features would you use? (map with live navigation, AR animals,
audio tours, event calendar, donate)
■​ Likert Q: Rate how important a kid-friendly scavenger hunt is (1–5).​

2.​ Contextual interviews / field visits — observe real behavior on-site (10–15
participants).
○​ Observe: family flow, where they pause, how they read signs, how they handle
kids.
○​ Ask to show ticketing process, map use, pain points.​

3.​ Remote usability sessions (for prototypes later), but initial remote interviews to
understand planning behavior (20–30 participants).​

4.​ Diary studies (for deeper experiences) — e.g., families record their visit day (3–8
families).​

5.​ Card sorting (for IA) — recruit 20–50 participants across user segments.​

6.​ Intercept interviews at zoo entrance/exits (short 5–10 minute) — fast feedback.​

Recruitment plan (screener template)

●​ Age: 25–55 for parents; 18–35 for tourists; teachers for school groups
●​ Visited a zoo in past 12 months: Yes/No (mix both)
●​ Have a child under 12: Yes/No (families group)
●​ Comfortable using smartphone apps: Yes
●​ For school groups: permission from school authority

Sample sizes (recommended)

 ●​ Surveys: 300–1000 (online + email lists)
●​ In-depth interviews: 15–25 (across segments)
●​ Field observations: 10–20 sessions (observe family, single adult, senior)
●​ Card sorting: 25–50
●​ Diary studies: 3–8 families (longer commitment)

Incentives

●​ Gift vouchers to zoo shop, free family ticket, small cash stipend — ensure amounts
match local norms.

1.6. Competitive UX analysis (hands-on)

Purpose: identify best practices and anti-patterns.

Components to analyze for each competitor

●​ Onboarding/first-run experience
●​ Navigation & IA (how they structure map, exhibits)
●​ Ticketing flow (steps, payment providers, timed-entry)
●​ Offline capabilities (does map work offline?)
●​ Accessibility features (captions, font size, color contrast)
●​ Push notification strategy (timely vs spammy)
●​ Value-add features (AR, scavenger hunts, audio tours)
●​ Integration with membership or donation flows

Deliverable

●​ Competitive analysis grid (features vs. competitors + UX notes)

●​ Screenshots gallery (annotated) of good/bad examples
●​ Short list of 5 features to copy, 3 to avoid

1.7. Synthesis — turning research into insights

Purpose: convert raw data into prioritized design problems and hypotheses.

Activities

1.​ Affinity mapping — group research notes, quotes, behaviors into themes.
2.​ Define top user needs & pains — e.g., “Families need quick ways to find child-friendly
exhibits and restrooms.”
3.​ Create proto-personas (later refined into full personas in Phase 2) — summary cards
with goals & frustrations.
 4.​ Opportunity mapping — map problems to potential app solutions and business impact
(Impact vs Effort).
5.​ Experience map / journey map — document pre-visit, arrival, on-site, post-visit flows,
emotions, pain points.

Sample insights (hypothetical examples)

●​ “Visitors get lost on large grounds — they rely on static maps and signage; 68% would
use a live wayfinding map.”
●​ “Parents plan visits around feeding times and activities; they want a schedule and push
reminders.”
●​ “Ticket drop-off occurs most often at payment screen on mobile — users abandon when
required to create an account.”

Prioritization framework

●​ Use RICE or MoSCoW to prioritize features: Reach, Impact, Confidence, Effort (RICE).
●​ Example: Live map R=high, I=high, C=0.7, E=medium → high priority.

1.8. Deliverables from Phase 1

Produce and share these artifacts with stakeholders:

1.​ Research plan & recruitment screener (document)

2.​ Stakeholder interview summary + decisions/constraints sheet
3.​ Competitive analysis + annotated screenshots
4.​ Analytics summary & top hypotheses
5.​ User research raw notes & synthesized affinity map
6.​ Top 6–8 insights with quotes (e.g., “I can never find the restrooms when my kid needs
them.” — parent)
7.​ Experience map (pre, onsite, post)
8.​ Opportunity map (impact vs effort)
9.​ Initial prioritized feature list and KPIs (e.g., increase mobile ticket conversion by
20% in 6 months; reduce ticket drop-off by 15%)
10.​Next-step recommendations — move to Define + IA (personas, journeys, sitemap) or
quick prototype testing for critical hypotheses (e.g., map usability)

Include filenames and suggested formats, e.g.:

●​ zooapp_research_plan_v1.pdf
●​ zooapp_affinity_map.fig (or image)
●​ zooapp_competitor_matrix.xlsx
●​ zooapp_insights_deck.pptx​
1.9. Risks, unknowns & mitigation
●​ Risk: Low recruitment of families during non-peak season.​
Mitigation: partner with local schools, advertise on social channels, offer family ticket
incentive.​

●​ Risk: Technical constraints from legacy ticketing vendor.​

Mitigation: early dev interviews; request API docs; scope integration options (deep vs
shallow).​

●​ Risk: Privacy concerns for location tracking.​

Mitigation: research legal requirements, design opt-in flows, clear privacy copy.

1.10. Timeline & milestones (example)

●​ Week 1: stakeholder interviews, analytics pull
●​ Week 2–3: surveys + remote interviews
●​ Week 3–4: field observations & intercepts
●​ Week 5: affinity mapping & synthesis
●​ Week 6: deliver research pack and presentation to stakeholders

Adjust timeline to your team size and seasonality (peak visitation months might be essential for
field observations).

1.11. Example KPIs to measure during/after Phase 1

●​ Research completion: N surveys, N interviews, N observations (target achieved)
●​ Hypothesis confidence: % of hypotheses supported by 2+ data sources
●​ Stakeholder alignment: stakeholder sign-off on research findings (yes/no)
●​ Baseline product metrics to compare post-launch:
○​ Mobile ticket conversion rate
○​ App adoption rate (downloads / website traffic)
○​ On-site map adoption (scans / opens)

Zoo App
Goal: To understand who the users are, what they need, and how they behave, then define
actionable insights for the rest of the design process.

1.1. Define Research Objectives

Objectives for the Zoo App:

1.​ Identify target user groups and their goals.

2.​ Understand visitor behavior inside the zoo (physical and digital).
3.​ Learn pain points in existing zoo apps or ticketing systems.
4.​ Discover features most valued by users.
5.​ Validate assumptions for app functionality, AR experiences, maps, and donations.

1.2. Target User Segments

Through surveys, interviews, and secondary research, we define primary personas:

Persona Age Goals Pain Points Notes

Family Parents 30– Plan visit, buy Confused by zoo Need reminders,
45 tickets, track maps, long ticket easy navigation, AR
kid-friendly queues, missing interactions for kids
activities events

School 10– Educational trip, Limited understanding Interactive, gamified

Students 18 learn about of animal info, short content works best
animals attention span

Zoo Enthusiasts 25– Explore exhibits, Lack of notifications Want notifications

40 rare animals for shows/events and detailed animal
info

Tourists 20– Quick visit, No guidance on Multilingual,

60 discover highlights must-see spots, map-centric UI,
language barrier offline access

Donors/Animal 25– Support animals, No transparent info on Need clear donation

Sponsors 50 track donations where donations go tracking, perks,
reminders
1.3. Data Collection Methods
1.​ Surveys
○​ Sent to past zoo visitors.
○​ Sample questions:
■​ How often do you visit the zoo?
■​ Which activities do you enjoy most?
■​ Would you use an app for navigation and tickets?
○​ Sample data: 400 respondents.​

2.​ Interviews
○​ In-person at zoo entrances and schools.
○​ Sample insight:
■​ Parents struggle finding restrooms and cafés.
■​ Students want interactive content about animals.​

3.​ Observation
○​ Shadowed visitors using paper maps.
○​ Key findings:
■​ People spend 15–20 min searching for exhibits.
■​ Lines for tickets create frustration and bottlenecks.​

4.​ Competitive Analysis​

○​ Analyzed apps: San Diego Zoo, Bronx Zoo, Singapore Zoo.

○​ Key takeaways:
■​ Interactive maps are highly valued.
■​ AR experiences increase engagement with kids.
■​ Ticket pre-booking significantly improves experience.​

5.​ Analytics & Secondary Data​

○​ Zoo’s historical data: peak hours, most visited animals, event attendance.
○​ Findings:
■​ Tiger, Lion, and Penguin zones most visited.
■​ Weekends: 40% higher foot traffic.
■​ Popular events: Feeding times and animal shows.

1.4. Key Insights & Pain Points

Observation Insight Solution Direction

Visitors spend time searching Navigation is a pain Interactive map with AR wayfinding
for exhibits point

Long ticket queues Frustration and In-app ticket booking with QR code
delays

Students need educational Short attention span Gamified AR experiences & animal
content info cards

Families want reminders for Often miss feeding Push notifications & in-app
shows times reminders

Donors unclear on donation Low engagement Track donations & provide perks
impact inside app

1.5. User Personas (Detailed Examples)

Persona 1 — Emma, Parent

●​ Age: 34
●​ Location: Kathmandu
●​ Family: 2 kids, aged 5 and 7
●​ Goals: Buy tickets online, plan activities, track feeding events, find kid-friendly spots
●​ Pain Points: Paper maps confusing, queues stressful, kids get restless
●​ Preferred App Features: Interactive map, reminders, AR games

Persona 2 — Raj, Student

●​ Age: 15
●​ Location: Lalitpur
●​ Goals: Learn about animals, complete school assignment, fun interaction
●​ Pain Points: Information overload, boring traditional content
●​ Preferred App Features: AR animal interactions, quiz gamification, quick access to
animal facts​
Persona 3 — Maya, Donor

●​ Age: 28
●​ Goals: Adopt or donate to animals, track progress
●​ Pain Points: No transparency on how donations are used
●​ Preferred App Features: Donation tracking, reward system, animal status updates

1.6. User Journey Mapping (Example: Family Visit)

Step Actions Thoughts Pain Points Opportunities

Pre-visit Searches zoo “I hope I can plan Unclear ticket Online ticketing,
info online well” options in-app planning

Arrival Shows ticket, “Where’s the lion?” Confused Interactive map, AR

enters zoo maps guidance

During Visits exhibits “I want to see the Missed shows Push notifications,
visit feeding time” reminders

Activities Kid-friendly “Will my kids enjoy Waiting time, Gamified content,

activities this?” boredom quizzes, AR

Post-visit Share “I want to support No easy Donation tracking,

experience & tiger conservation” donation perks & updates
donate process

1.7. Feature Prioritization (MVP)

Based on research, these features are high priority for launch:

Feature Priority Reason

In-app Ticketing High Reduces queues

Interactive Map High Navigation pain point

Animal Info Cards High Educational purpose

Event/Feeding High Families often miss shows

Reminders

AR Interaction Medium Engages students & kids

Donation Tracking Medium Drives donor retention

Favorites & My Zoo Medium Encourages engagement & repeat

visits

Gamification / Quizzes Low Nice-to-have for students

1.8. Deliverables for Phase 1

1.​ Research Summary Report
○​ Includes survey data, interview insights, observation notes, and competitive
analysis.​

2.​ Personas
○​ Emma (Parent), Raj (Student), Maya (Donor), etc.​

3.​ User Journey Maps

○​ Full flow for each persona.​
 4.​ Feature Prioritization Table
○​ Clear roadmap for MVP.​

5.​ Pain Points & Opportunities Table

○​ Actionable insights for UX/UI decisions.​

6.​ Stakeholder Presentation

○​ Visual summary of findings for approval before moving to Phase 2 (Information
Architecture).

🧭 PHASE 2 — DEFINE
Goal: transform research insights into clearly defined who, what, why, and how success is
measured — i.e., Personas, Empathy Maps, Journey Maps, Problem Statements, and
Value Propositions.

2.1. Consolidate and Cluster Research Data

Before producing artifacts, we organize findings from Phase 1 into meaningful themes.

Method: Affinity Mapping

●​ Collect every observation, quote, survey response, and analytics insight.

●​ Group similar findings into clusters under sticky-note themes such as:
○​ Planning & Booking
○​ Navigation / Wayfinding
○​ Education & Engagement
○​ Family Logistics
○​ Accessibility / Facilities
○​ Conservation Awareness​

Example cluster (Family segment)

Raw Quotes Theme

“We got lost near the Reptile House.” Navigation

 “My kids got tired halfway and we couldn’t find rest areas.” Facilities

“We missed the penguin feeding — didn’t know the timing.” Schedule
Awareness

“We want to learn about animals but the signs are too Education Content
small.”

After clustering, we summarize insight statements:

●​ “Families struggle with navigation and miss key events because information is not timely
or easily accessible.”
●​ “Parents desire digital tools that keep kids engaged (AR, scavenger hunts).”
●​ “Visitors are unaware of the zoo’s conservation work.”

These insight statements guide all persona and journey map construction.

2.2. Create User Personas

Definition: A persona is a fictional yet evidence-based archetype representing a key user
segment. It focuses on goals, behaviors, pain points, and motivations.

We’ll create three main personas for the Zoo App.

🧒 Persona 1: “The Family Planner” — Primary Persona

Attribute Detail

Name Anita Shrestha, 36

Role Working mother, primary trip planner for family

Family Husband + two kids (ages 5 & 9)

Location Kathmandu

Tech Use Android phone, frequent mobile app user (banking, delivery, school
apps)

Visit Frequency 1–2 times per year, mostly on holidays

Goals - Make the zoo trip easy & fun for kids

- Avoid long ticket queues

- See popular animal shows

- Find restrooms & food easily

Frustrations / Pain - Hard to find way inside zoo

Points
- No alerts for feeding times

- Kids get bored between exhibits

- Paper map tears easily

Motivations Family bonding, learning for children, convenience

Quote “If I could plan our zoo visit and keep my kids excited, that would
make my weekend!”

Success Metric Trip felt smooth, kids engaged, no stress, on time for events

🎒 Persona 2: “The School Organizer” — Secondary Persona

 Attribute Detail

Name Mr. Ramesh Thapa, 42

Role School teacher coordinating field trips

Group Size 25 students + 2 assistants

Tech Use Laptop for planning, smartphone on-site

Goals - Book group tickets easily

- Manage students efficiently

- Provide educational materials

Pain Points - Paper ticketing cumbersome

- Students scattered inside zoo

- Lack of digital learning content

Motivations Smooth group logistics + educational outcome

Quote “If the app helps me organize groups and track activities, I can focus on
teaching, not chaos.”

🌍 Persona 3: “The Tourist Explorer” — Tertiary Persona

 Attribute Detail

Name Lucas Becker, 28

Role German backpacker visiting Kathmandu

Goals - Discover must-see animals

- Get directions easily

- Learn facts in English

- Share photos quickly

Pain Points - Language barriers

- Limited time

- No digital navigation

Motivations Exploration, learning, sharing on social media

Quote “I’d love a quick self-guided tour that works offline.”

Persona Deliverable Checklist

Each persona document should include:

●​ Profile summary
●​ Photo/avatar
●​ Demographics & devices
●​ Needs/goals
●​ Pain points & frustrations
●​ Typical behaviors​
 ●​ Preferred features
●​ Environment/context (on-site vs at home)
●​ Primary scenarios of use
●​ Quote and success metrics

Save files as:

●​ zooapp_persona_familyplanner.pdf
●​ zooapp_persona_teacher.pdf
●​ zooapp_persona_tourist.pdf

2.3. Empathy Maps (for Primary Persona)

Purpose: build emotional understanding of user experience.

Example — Empathy Map for Anita (Family Planner)

Quadrant Insights

Says “I just want everything ready before the trip.”

“Kids can’t wait to see the tigers.”

Thinks “Will there be enough parking?”

“Hope there’s an app that helps us navigate.”

Does Checks zoo website, buys tickets online, packs snacks, uses phone camera
constantly.

Feels Excited but anxious about managing kids; relief when things go smoothly.

From this empathy map, design implications emerge:

●​ Provide pre-trip planning tools (schedule, ticket booking, route preview).​

 ●​ Offer in-app reassurance (live map, event reminders, rest area info).​

●​ Keep visual, child-friendly design tone (illustrations, friendly language).​

2.4. User Journey Mapping

Goal: visualize the full end-to-end experience for each persona, identifying opportunities for
improvement.

We’ll map for the Family Planner (primary persona).

Journey Map: “Anita’s Family Zoo Visit”

Stage Actions Touchpoint Emotions Pain Opportunities

s Points

1. Pre-Visit Searches Website, Curious → No clear Integrate ticketing

Planning “Zoo Google, Determined show & schedule in app;
Kathmandu social media schedule; quick info
tickets”, slow summary.
checks mobile site.
timings,
decides on
Saturday.

2. Ticket Buys family Ticketing Relieved Forced to In-app guest

Purchase ticket online. website create checkout & wallet
account; integration.
poor
mobile UX.

3. Arrival & Finds Phone Excited QR App-based QR

Entry parking, wallet, gate scanner with offline
shows digital scanner delays; fallback; welcome
ticket at gate. poor screen on entry.
signage.
4. Exploring Walks around Physical Mixed: Gets lost; Real-time map &
the Zoo with family. maps, signs curious + misses “Now Happening”
frustrated tiger notifications;
feeding; scavenger hunt
kids bored game.
between
exhibits.

5. Rest & Looks for On-site Tired Can’t find Map filters for
Meals café or picnic boards nearest “food/restroom”;
area. café or AR wayfinding.
restroom
quickly.

6. Reads signs, Animal Engaged Text too In-app stories,

Education & explains to signage briefly small; info audio for kids, AR
Engagemen kids. not facts.
t kid-friendly.

7. Leaving Checks time, Parking, Happy but Forget Post-visit prompt:

the Zoo exits. souvenir exhausted donation “Support our
shop option. animals” / share
trip photos.

8. Post-Visit Shares Social Satisfied No digital Create digital “My

Reflection photos, plans media, app memory Zoo Journey”
next trip. log. album.

Design Insights from Journey Map

●​ Each stage exposes opportunities for digital assistance.​

●​ Key emotional dips = best opportunities for UX design:​

○​ Navigation confusion → need for live map.​

 ○​ Missed events → need for notifications + schedule view.​

○​ Fatigue → need for facilities info + rest markers.​

○​ Missed conservation engagement → need for post-visit follow-up.

2.5. Define Problem Statements

We translate insights into concise problem definitions that guide ideation.

Format: User + Need + Insight / Why

“[User type] needs [something] because [insight/evidence].”

Examples for Zoo App:

1.​ Parents with young kids need an easy way to navigate and find child-friendly spots,
because printed maps are hard to read and they often get lost.​

2.​ Visitors need to get real-time alerts for shows and events, because they frequently
miss them due to lack of reminders.​

3.​ Teachers need a group coordination tool, because managing 25 students across large
areas is stressful.​

4.​ Tourists need offline information and English content, because mobile data coverage
is limited.​

5.​ Zoo management needs to increase digital ticket sales, because on-site queues
cause crowding.​

Deliverable

Create a slide or document listing top 5–7 problem statements, each tagged by:

●​ Persona relevance​

●​ Business impact (high/medium/low)​

●​ Supporting evidence (quote/stat)​

●​ Suggested success metric (e.g., reduce navigation-related complaints by 30%)​

2.6. Define Value Propositions & Hypotheses
Value Proposition Canvas

Match what the product offers to user pains and gains.

User Pain Points Desired Gains How Zoo App Delivers

Segment

Families Navigation confusion, Fun, stress-free day Smart map, notifications, AR

missed events scavenger hunt

Teachers Coordination chaos Organized, Group management tool,

educational trip educational content

Tourists Language barriers Easy self-guided Multilingual audio, offline

exploration mode

Core Value Proposition Statement

“The Zoo App transforms your zoo visit into an effortless, engaging experience —
with live maps, event reminders, and fun learning tools that keep every visitor
connected to animals and conservation.”

Hypotheses (for validation later)

●​ If we implement a live map + event reminders, then users will spend more time exploring
and report higher satisfaction.​

●​ If we add AR learning games, then family dwell time per exhibit will increase.​

●​ If we enable quick digital ticket purchase, then mobile conversion will rise by 20%.​
2.7. Define Success Metrics / KPIs
Each persona-driven problem leads to measurable outcomes.

Goal Metric Baseline Target

Improve navigation % visitors using map feature 0 % (no app ≥ 60 % within 3

experience yet) months

Reduce missed shows % of users attending 40 % 70 %

scheduled shows

Increase ticket Mobile purchase conversion 10 % 25 %

conversions

Boost engagement Avg. session time / dwell per N/A +30 %

exhibit

Raise donations Post-visit donation N/A 10 % of active

click-through users

2.8. Deliverables from Define Phase

1.​ Personas (PDF or FigJam): 3 detailed persona cards.​

2.​ Empathy Maps (at least for primary persona).​

3.​ Journey Maps (1 primary, optionally secondary).​

4.​ Problem Statement Sheet with priority & success metrics.​

 5.​ Value Proposition Canvas.​

6.​ Design Hypotheses List.​

7.​ Metrics Table (baseline + targets).​

8.​ Define Phase Summary Deck — a concise presentation for stakeholders, showing
“who we design for, what their journey looks like, and what we’ll solve next.”​

File naming convention:

●​ zooapp_define_personas.fig
●​ zooapp_journeymap_family.pdf
●​ zooapp_valueprop_canvas.pptx
●​ zooapp_define_summary_v1.pdf

2.9. Outcomes & Readiness for Next Phase

By the end of Define:

●​ Everyone (stakeholders + design team) agrees on who the users are, what they need,
and which problems to solve first.​

●​ The next step is to transform these insights into structure — the Information
Architecture (IA) that organizes the app’s content and navigation model.

Zoo App
Goal: Translate the user research insights into a clear content hierarchy, navigation
structure, and screen flow, ensuring users can find and interact with features efficiently.

2.1. Key Principles

1.​ User-centered: Navigation matches user mental models (parents, students, tourists).
2.​ Simplicity: Avoid unnecessary complexity; prioritize top tasks (tickets, map, animal
info).
3.​ Discoverability: Important features like AR, events, and donations should be visible and
accessible.
4.​ Scalability: IA should support future features (new animals, events, gamification).​
2.2. Top-Level Structure
Based on research, the app’s main navigation (bottom navigation bar) should have five core
sections:

Section Purpose Key Features

Home Entry point, highlights, Featured animals, upcoming events, ticket

key CTAs shortcuts, AR preview

Map & Navigation & discovery Interactive zoo map, exhibit markers, route
Explore planning, filters (family-friendly, feeding times)

Events & Schedule & reminders Today’s events, upcoming shows, feeding times,
Shows add reminders

Learn / Educational content Animal cards, photos, AR interactions, quizzes,

Animal Info conservation info

My Zoo / Personalization & Tickets, favorites, donations, past visits, settings,

Profile history notifications

2.3. Detailed Hierarchy & Screen Flow

1. Home Screen

●​ Sections
○​ Header: Logo, Search, Notifications
○​ Hero Carousel: Featured animals/events
○​ Quick Access Grid: [Buy Ticket, Explore Map, Events, AR Explore, My Zoo]
○​ Today’s Highlights: Event cards, feeding times​

●​ Flows​
 ○​ Tap ticket → Ticket Purchase Flow
○​ Tap event → Event Details → Set Reminder
○​ Tap map → Map & Explore section

2. Map & Explore

●​ Main Features​

○​ Interactive map with markers for exhibits, facilities (restrooms, cafés)​

○​ Filters: Animals, events, family-friendly, AR​

○​ “Find Nearest” feature: Uses GPS​

○​ Route planner: Guides users to exhibit​

●​ Flows​

○​ Tap marker → Exhibit Detail Modal → Options: View Info / Set Reminder / AR
Explore​

○​ AR FAB → Launch AR for nearby animals​

3. Events & Shows

●​ Main Features​

○​ List of events (Today / Upcoming / Weekly)​

○​ Event card: Title, time, location, description​

○​ Reminder button​

●​ Flows​

○​ Tap event → Event Details → Add Reminder​

○​ Back → Home or Map navigation​

4. Learn / Animal Info

●​ Main Features​

○​ Categories: Mammals, Birds, Reptiles, Aquatic, Endangered​

○​ Search & filter: Animal name, type, rarity​

○​ Animal card: Name, photo, facts, feeding time, AR icon​

○​ AR & Quiz interactions​

●​ Flows​

○​ Tap animal → Animal Detail Screen​

○​ Animal Detail → Add to Favorites, View Map, AR Experience​

5. My Zoo / Profile

●​ Main Features​

○​ Tickets: Upcoming & past, QR code access​

○​ Favorites: Saved animals, exhibits, events​

○​ Donations / Adopt an Animal: History, status, rewards​

○​ Settings: Notifications, language, accessibility, profile​

●​ Flows​

○​ Tap ticket → Ticket Details → Scan QR​

○​ Tap donation → Track progress → Receive perks​

2.4. Secondary Navigation & Cross-Links

 ●​ Contextual links:​

○​ Animal cards → Map & Explore​

○​ Event card → Reminder → Home notification​

○​ Favorites → Quick access from Home​

●​ Search Bar:​

○​ Global search across animals, events, tickets, AR content​

●​ CTA Placement:​

○​ Buy Tickets always visible on Home & Map sections​

○​ Reminders highlighted on event or animal detail screens​

2.5. Sitemap / IA Diagram (Text Version)

HOME

├── Featured Animals

├── Featured Events

├── Quick Access

│ ├── Buy Ticket

│ ├── Map & Explore

│ ├── Events & Shows

│ ├── AR Explore

│ └── My Zoo

│
MAP & EXPLORE

├── Interactive Zoo Map

│ ├── Animal Markers

│ │ └── Animal Detail

│ │ ├── Info

│ │ ├── Photos

│ │ ├── AR Experience

│ │ └── Set Reminder

│ ├── Facility Markers

│ │ └── Info

│ └── Route Planner

EVENTS & SHOWS

├── Today

│ └── Event Detail → Add Reminder

├── Upcoming

└── Weekly

LEARN / ANIMAL INFO

├── Categories

│ ├── Mammals
│ ├── Birds

│ ├── Reptiles

│ ├── Aquatic

│ └── Endangered

├── Animal Search

└── Animal Detail → Map / AR / Favorites

MY ZOO / PROFILE

├── Tickets

│ └── Ticket Detail → QR Scan

├── Favorites

├── Donations / Adopt

└── Settings

2.6. Screen Flow Example — “Find a Tiger & Set

Reminder”
1.​ Home → Search: Type “Tiger”​

2.​ Search results → Tap “Bengal Tiger” card​

3.​ Animal Detail → Tap “Set Reminder”​

4.​ Tap “View on Map” → Map navigates to Tiger Zone​

5.​ Option: Tap AR → Launch AR mode​

2.7. Deliverables for Phase 2
1.​ Zoo App Sitemap / IA Diagram​

2.​ Navigation Hierarchy Table (Primary & Secondary nav)​

3.​ Screen Flow Diagrams (for top 5 key tasks)​

4.​ Wireframe Blueprint (preliminary layouts for core sections)​

5.​ Cross-Link Map (shows contextual navigation & shortcuts)​

✅ Phase 2 Completion Criteria

●​ Sitemap approved by stakeholders​

●​ Core user flows validated with personas​

●​ Screen hierarchy aligns with Phase 1 insights​

●​ Ready to move to Phase 3: Wireframing & Layout Design

🧩 PHASE 3 — INFORMATION
ARCHITECTURE (IA)
Goal:​
Organize and label all information in the app so users can intuitively find what they need —
without thinking.

IA ensures that:

●​ Navigation makes sense to all user groups (families, teachers, tourists).​

 ●​ Content is grouped logically, using users’ mental models rather than internal
organization.​

●​ The app structure supports both usability and scalability (future content expansion).​

3.1. Define the IA Objectives (Specific to Zoo App)

Objective Description

1. Simplify navigation Make it effortless to find exhibits, events, facilities, and services.

2. Reflect real-world Organize information the same way users think about their visit
mental models (e.g., “Animals → Mammals → Tigers” instead of “Departments →
Carnivores”).

3. Support key use Pre-visit (planning), On-site (navigation & engagement), and
cases Post-visit (sharing, donations).

4. Scalable for future Easy to add new animals, events, or features later.
content

5. Accessible & Labels and categories work across languages.

multilingual-ready

3.2. Content Inventory (Comprehensive Listing)

Before structuring, list everything the app will contain — all features, pages, screens, and
data.

Content Sources
 ●​ Existing zoo website​

●​ Event & ticketing systems​

●​ Signage and educational boards​

●​ Research findings (what users searched for)​

●​ Stakeholder-provided materials (marketing, conservation info)​

Example Content Inventory for Zoo App

Category Content Items

Tickets & Ticket types (adult, child, family, group), membership plans, QR
Membership codes, receipts, discounts, booking calendar.

Map & Navigation Interactive map, GPS tracking, “Near Me”, category filters (Animals,
Restrooms, Cafés, Play Zones, Exits), route planning, AR wayfinding.

Animals & Animal profiles (species info, diet, fun facts, conservation status),
Exhibits exhibit locations, feeding times, audio guide, AR experience.

Events & Shows Daily shows, feeding times, educational programs, upcoming
festivals, booking and reminders.

Visitor Services Restrooms, restaurants, souvenir shop, baby care, accessibility info,
lost & found.

Education & Learning resources, conservation programs, volunteer sign-up,

Conservation adoption/donation options.
 My Zoo / Account Saved animals, visited exhibits, tickets, favorite events, donations,
profile settings, feedback.

Support & Info FAQs, contact info, app feedback form, privacy policy.

Each item is tagged by:

●​ Content owner (who updates it)​

●​ Media type (text, image, AR asset)​

●​ Priority (critical, secondary, optional)​

Deliverable:​
zooapp_content_inventory.xlsx

3.3. Card Sorting (to understand user mental models)

Card sorting helps reveal how real users expect content to be grouped.

Step-by-Step Process

1.​ Prepare cards​

○​ Each card = one piece of content (e.g., “Tiger Info”, “Ticket Prices”, “Zoo Map”,
“Show Schedule”).​

○​ 40–60 cards is ideal.​

2.​ Choose method​

○​ Open card sorting (participants create their own categories) for early
exploration.​

○​ Closed card sorting (preset categories) for validation once preliminary structure
is formed.​
 3.​ Recruit participants​

○​ 20–30 across personas (families, tourists, teachers).​

○​ Conduct online via tools like OptimalSort or in-person with physical cards.​

4.​ Observe how they group and label cards​

○​ Note recurring group names (“Animals”, “Shows”, “Tickets”, “Map”, “Facilities”).​

○​ Record difficult or confusing items.​

5.​ Analyze results​

○​ Cluster cards using similarity matrix (percentage of users who grouped two
cards together).​

○​ Identify consensus categories and outliers.​

Example Card Sorting Insight

●​ Users consistently grouped “Feeding Times”, “Show Schedules”, and “Special Events”
under a single label: “Events & Shows”.​

●​ “Lost & Found” and “Accessibility Info” were always grouped under “Visitor Services”.​

●​ Tourists grouped “Animal Info” and “AR Experiences” together → new combined
category: “Animals & AR”.​

Deliverable:​
zooapp_card_sorting_results.pdf​
(includes similarity matrix + dendrogram visualizations)

3.4. Build the Initial Sitemap (Hierarchy Structure)

Using the card sort results, define the main navigation and secondary navigation hierarchy.

🗺️ Draft Sitemap for Zoo App

HOME
│

├── Tickets & Membership

│ ├── Buy Tickets

│ ├── Membership Plans

│ ├── My QR Ticket

│ └── Booking History

├── Map & Explore

│ ├── Live Map

│ ├── Exhibits (by Category)

│ │ ├── Mammals

│ │ ├── Birds

│ │ ├── Reptiles

│ │ └── Amphibians

│ ├── Facilities

│ │ ├── Restrooms

│ │ ├── Cafés

│ │ ├── Shops

│ │ └── Play Zones

│ └── AR Mode / “Discover Around You”

├── Events & Shows

│ ├── Daily Schedule

│ ├── Upcoming Events

│ ├── Set Reminders

│ └── Educational Programs

├── Learn & Conserve

│ ├── Animal Profiles

│ ├── Conservation Projects

│ ├── Adopt an Animal

│ ├── Volunteer / Donate

│ └── Blog / News

├── My Zoo (Personal Area)

│ ├── Saved Animals

│ ├── Visited Exhibits

│ ├── Donations

│ ├── Settings (Language, Notifications)

│ └── Feedback / Support

└── About & Help

├── FAQs

├── Contact Us

├── Privacy Policy

└── Terms of Use

Navigation Design Implications

●​ Primary tabs (bottom navigation): Home, Map, Events, Learn, My Zoo.​

●​ Secondary navigation (within sections): collapsible or scrollable categories.​

●​ Contextual shortcuts: e.g., “View on Map” button from an animal profile.​

Deliverable:​
zooapp_sitemap_v1.fig (visual flow diagram)

3.5. Navigation Model & Hierarchy Design

3.5.1. Navigation Levels

●​ Global Navigation: visible across all screens (bottom tab bar).​

●​ Local Navigation: within a section (e.g., tabs inside “Events”).​

●​ Contextual Navigation: links or buttons connecting related content (“See on Map”, “Add
to My Zoo”).​

●​ Utility Navigation: settings, help, language switcher, login/logout.​

3.5.2. Navigation Patterns

●​ Bottom Tab Bar (5 tabs):​

○​ Home​

○​ Map​

○​ Events​

○​ Learn​

○​ My Zoo​
 ●​ Search Icon (top-right): global search (animals, events, facilities).​

●​ Floating Action Button (FAB): “Scan QR” for on-site interactivity.​

●​ Breadcrumbs in secondary screens:​

Animals → Mammals → Tigers​

Design Rules

●​ 3-click principle: any content reachable within 3 taps.​

●​ Label categories using plain user terms, not internal jargon.​

●​ Avoid overloaded menus — prioritize discoverability through visuals.​

3.6. Taxonomy & Labeling System

Goal: create consistent and user-friendly naming.

Entity Label Rationale

“Exhibit” “Animal Zone” Matches user mental model; friendlier.

“Conservation Program” “Protect Our Animals” Emotional appeal, plain language.

“Facilities” “Nearby Services” More intuitive on mobile map.

“My Account” “My Zoo” Personal & memorable.

“Augmented Reality” “AR Discover” Simpler for families & kids.

All labels tested for comprehension across personas (survey or quick 5-second tests).​
Maintain a label glossary for developers and content editors.

Deliverable:​
zooapp_label_taxonomy.xlsx

3.7. Information Flow Diagrams

Once hierarchy is defined, create task-specific flow diagrams showing how users will move
through key pathways.

Example 1: “Find and Attend Animal Feeding”

1.​ Open app → tap “Events & Shows” → view “Daily Schedule”.​

2.​ Tap “Tiger Feeding” → see time + location.​

3.​ Tap “View on Map” → route preview shown.​

4.​ Tap “Set Reminder” → push notification added.​

Example 2: “Plan Visit and Buy Ticket”

1.​ Open app → Home → “Buy Tickets”.​

2.​ Choose date → select package → payment → success screen.​

3.​ App saves QR in “My Zoo → Tickets”.​

4.​ On arrival, open QR → scan at entry gate.​

Each flow diagram ensures no unnecessary friction or redundant steps.

Deliverable:​
zooapp_userflows_v1.fig

3.8. Testing the IA (Tree Testing)

Before wireframing, validate the IA structure via Tree Testing.

Process

1.​ Use tools like Optimal Workshop’s Treejack.​

2.​ Upload sitemap (text-only tree).​

3.​ Create tasks like:​

○​ “You’re looking for the elephant feeding schedule. Where would you go?”​

○​ “Find where to donate to help snow leopards.”​

○​ “Locate restrooms near your area.”​

4.​ Collect metrics:​

○​ Success rate (% who found correct path)​

○​ Time to first click​

○​ Path taken​

○​ Directness (shortest route vs actual route)​

Success Criteria

●​ ≥ 80% task success rate for core tasks.​

●​ < 20% users backtrack more than once.​

●​ Labels tested for clarity and translation (English/Nepali).​

Deliverable:​
zooapp_tree_test_report.pdf

3.9. Accessibility Considerations in IA

 ●​ Ensure navigation hierarchy is compatible with screen readers (logical order).​

●​ Add semantic tags to navigation elements (e.g., ARIA labels).​

●​ Avoid similar-sounding labels (“Shows” vs “Events” confusion).​

●​ Support right-to-left text for future multilingual expansion.​

3.10. IA Deliverables Summary

Deliverable Description

Content Inventory Master list of all app content.

Card Sorting Report Results of open & closed sorting

exercises.

Sitemap Hierarchical structure of app sections.

Navigation Model Global + local navigation systems.

Taxonomy & Label Glossary Naming conventions and rationale.

User Flows Step-by-step visual task paths.

Tree Testing Report Validation of IA clarity and findability.

File examples:
 ●​ zooapp_IA_sitemap_v1.fig​

●​ zooapp_userflows_v1.pdf​

●​ zooapp_navigationmodel.pptx​

●​ zooapp_tree_testing_results.pdf​

3.11. Readiness Checklist Before Next Phase

✅ Sitemap approved by stakeholders.​
✅ Labels validated via tree testing.​
✅ All core user tasks (buy ticket, navigate, find event, donate) mapped and confirmed.​
✅ IA scalable for new content (future animals/events).​
✅ Navigation pattern chosen (bottom tabs confirmed).

PHASE 3 — WIREFRAMING & LAYOUT

DESIGN (Zoo App)
Goal:​
Create low-fidelity wireframes to visualize screen layouts, prioritize content, and define
navigation flow for all core user tasks.

3.1. Wireframing Principles

1.​ Content first: Focus on placement and hierarchy, not color or style.​

2.​ User flow clarity: Ensure users can complete top tasks efficiently.​

3.​ Scalability: Components should be reusable for multiple screens.​

4.​ Annotation-ready: Wireframes include notes for designers/developers.​

3.2. Core Screens to Wireframe
Based on Phase 2 IA and Phase 1 user research, we wireframe the following primary
screens:

1.​ Home Screen​

2.​ Interactive Map & Explore Screen​

3.​ Animal Detail Screen​

4.​ Event / Feeding Show Screen​

5.​ Ticket Purchase Flow​

6.​ My Zoo / Profile Screen​

7.​ AR Interaction Launch Screen​

3.3. Wireframe Layouts (Text-Based Example)

1. Home Screen (Wireframe)

--------------------------------------------------

| LOGO SEARCH ICON NOTIFICATIONS |

--------------------------------------------------

| HERO CAROUSEL: Featured Animal/Event |

| [Image Placeholder] |

--------------------------------------------------

| QUICK ACCESS GRID |

| [Buy Ticket] [Map] [Events] [AR Explore] [Profile] |

--------------------------------------------------

| TODAY'S HIGHLIGHTS |

| Event Cards: Feeding Time, Special Show |

| [Card 1] [Card 2] |

--------------------------------------------------

●​ Wireframe Notes:​

○​ Hero carousel shows 2–3 featured animals/events.​

○​ Quick access grid ensures top tasks are reachable in 1 tap.​

○​ Highlights section emphasizes time-sensitive info.​

2. Interactive Map & Explore Screen

--------------------------------------------------

| BACK BUTTON SEARCH BAR |

--------------------------------------------------

| [MAP VIEW - Interactive, Zoomable] |

| [Markers: Animals, Facilities, Events] |

| Legend / Filter Buttons |

--------------------------------------------------

| BOTTOM DRAWER: Nearby Exhibits / Facilities |

| [Card 1] [Card 2] [Card 3] |

--------------------------------------------------
| FAB: AR Scan |

--------------------------------------------------

●​ Wireframe Notes:​

○​ Map is full-screen for visibility.​

○​ Bottom drawer shows nearest attractions dynamically.​

○​ Floating Action Button (FAB) launches AR mode.​

3. Animal Detail Screen

--------------------------------------------------

| BACK | FAVORITE ICON |

--------------------------------------------------

| IMAGE / PHOTO OF ANIMAL |

--------------------------------------------------

| ANIMAL NAME | CATEGORY | RARITY ICON |

--------------------------------------------------

| TABS: Info | Photos | AR | Quiz |

--------------------------------------------------

| ANIMAL FACTS / DESCRIPTION |

| FEEDING TIME / LOCATION |

| BUTTONS: View on Map, Set Reminder |

--------------------------------------------------
 ●​ Wireframe Notes:​

○​ Tab navigation separates different content types.​

○​ Clear CTA buttons for map & reminders.​

○​ AR icon indicates interactive option.​

4. Event / Feeding Show Screen

--------------------------------------------------

| BACK | FILTER ICON |

--------------------------------------------------

| EVENT LIST |

| Card 1: Event Name, Time, Location |

| Card 2: Event Name, Time, Location |

| Tap Card → Event Detail Screen |

--------------------------------------------------

| ADD REMINDER BUTTON |

--------------------------------------------------

●​ Wireframe Notes:​

○​ Cards highlight time-sensitive info.​

○​ Reminder button encourages engagement.​

5. Ticket Purchase Flow

--------------------------------------------------

| BACK |

--------------------------------------------------

| SELECT TICKET TYPE |

| [Adult + Qty] [Child + Qty] |

--------------------------------------------------

| PAYMENT OPTIONS |

| [Card] [Mobile Payment] |

--------------------------------------------------

| SUMMARY & CONFIRM |

| Total Price: $XX |

| CONFIRM BUTTON |

--------------------------------------------------

●​ Wireframe Notes:​

○​ Simple 3-step flow: Select → Payment → Confirm​

○​ Clear pricing and CTA for confirmation​

6. My Zoo / Profile Screen

--------------------------------------------------

| PROFILE PHOTO / NAME |

--------------------------------------------------

| TABS: Tickets | Favorites | Donations | Settings |

--------------------------------------------------

| TICKET LIST |

| FAVORITES LIST |

| DONATION STATUS |

| SETTINGS OPTIONS |

--------------------------------------------------

●​ Wireframe Notes:​

○​ Profile is centralized for personalization.​

○​ Tabs allow quick access to all personal data.​

7. AR Interaction Launch Screen

--------------------------------------------------

| AR VIEW (Camera Feed Placeholder) |

| Overlay: Animal Info Cards |

--------------------------------------------------

| BACK BUTTON |

| INFO ICON |

--------------------------------------------------

| CTA: Capture Photo / Start Quiz |

--------------------------------------------------

●​ Wireframe Notes:​

○​ Focus on immersive AR content.​

○​ Minimal controls for user focus.​

○​ Overlay cards provide additional information.​

3.4. Wireframe Notes & Annotations

●​ All screens follow a consistent spacing grid (16px base).​

●​ Buttons have minimum touch size 44x44px.​

●​ Icons are placeholders but indicate function and position.​

●​ Navigation hierarchy is consistent across bottom tab bar and contextual back buttons.​

●​ Screens are annotated with:​

○​ CTA actions (Buy, AR, Set Reminder)​

○​ Navigation flow​

○​ Content priority​

3.5. Wireframe Deliverables

1.​ Low-Fidelity Wireframes (PDF or Figma) for all screens​

2.​ Screen Flow Diagrams for key tasks:​

○​ Ticket Purchase​
 ○​ Find Animal & Set Reminder​

○​ Explore Map & AR Scan​

3.​ Annotated Wireframes showing CTA actions and navigation logic​

4.​ Navigation Flow Table with primary & secondary screens​

✅ Phase 3 Completion Criteria

●​ Wireframes approved by stakeholders.​

●​ Screen layouts support IA and top tasks.​

●​ Navigation and CTA placement clear for Phase 4 (Interaction Design).​

●​ Ready to move into Phase 4: Interaction Design (Clickable Wireframes &

Prototypes).

🎨 PHASE 4 — INTERACTION DESIGN (UX

DESIGN)
Goal:​
Transform the Information Architecture into interactive, intuitive, and usable design flows that
ensure smooth, efficient, and delightful task completion for all users.

4.1. What Interaction Design (IxD) Is

Interaction Design defines how users interact with the interface:

●​ How do they navigate?​

●​ What happens when they tap, swipe, or scroll?​

 ●​ What feedback do they get after an action?​

●​ How do transitions, states, and animations support usability?​

In short, it’s about behavior — not just how the app looks, but how it feels to use.

4.2. Inputs to This Phase

Before starting, ensure the following inputs from Phase 3 are ready and validated:

Input Description

✅ Validated Sitemap Defines the structure of the app.

✅ User Flows Core task paths (buy ticket, view animal info, find events).

✅ Navigation Model Bottom tabs, contextual links, FAB, search bar.

✅ Taxonomy & Labels Finalized names for sections and buttons.

✅ Personas & To guide interaction design decisions.

Scenarios

4.3. Step-by-Step Breakdown of the Interaction Design

Process
We’ll go extremely deep into each sub-phase.

4.3.1. Define Key Use Cases and Task Flows

Before sketching anything, define what the app must let users do easily.

Core Use Cases for the Zoo App

1.​ Buy a ticket before visiting.​

 2.​ Explore the live map and find nearby animals.​

3.​ Learn about an animal (info, photos, AR, feeding time).​

4.​ Check today’s events and set reminders.​

5.​ Navigate to facilities (restrooms, cafés, exits).​

6.​ Save favorite animals or donate.​

7.​ Access past tickets and donation history.​

Example: Task Flow — “Find a Tiger Exhibit & Set a Reminder for Feeding”

Step-by-Step UX Flow (Textual)

1.​ User opens the app → sees Home screen.​

2.​ Taps bottom nav: Map & Explore.​

3.​ Map opens centered on their GPS location.​

4.​ Uses search bar → types “Tiger”.​

5.​ Result appears: “Tiger Zone – Mammals Section.”​

6.​ Taps “Tiger Zone” → Exhibit Details open.​

7.​ Info includes “Feeding Time: 2:00 PM”.​

8.​ Taps “Set Reminder” → confirmation pop-up “Reminder Set”.​

9.​ Option: “View Route” → map zooms with walking path to zone.​

This flow ensures:

●​ Only 3–4 taps to complete the main goal.​

●​ Immediate visual feedback after each action.​

 ●​ Shortcuts (e.g., reminder, route) built contextually, not buried in menus.​

Deliverable:​
zooapp_taskflow_tigerfeeding.fig

4.3.2. Create Low-Fidelity Wireframes (Sketch Stage)

Now we translate flows into wireframes — rough, functional blueprints of each screen.

Principles for Low-Fidelity Wireframes

●​ Focus on layout and structure, not color or visuals.​

●​ Define hierarchy (what’s most important on screen).​

●​ Show all interaction elements (buttons, tabs, modals).​

●​ Easy to iterate — often drawn on paper or Figma grayscale.​

Example: “Home Screen” Wireframe (Zoo App)

Sections:

1.​ Header Area:​

○​ Zoo logo​

○​ Search icon (top-right)​

○​ Notification bell​

2.​ Hero Area (carousel)​

○​ Highlight: “New Penguin Exhibit!”​

○​ “Buy Tickets” CTA​

3.​ Quick Navigation Grid​

 ○​ [Animals] [Events] [Map] [AR Explore] [My Zoo]​

4.​ Featured Section​

○​ “Today’s Shows” (list of 3 cards)​

○​ Each card: Animal photo, time, “Add Reminder” button​

5.​ Bottom Navigation Bar​

○​ Home | Map | Events | Learn | My Zoo​

Example: “Animal Detail Screen” Wireframe

Structure:

●​ Top Bar: Animal Name (“Tiger”), Back arrow, Share icon.​

●​ Main Content:​

○​ Large hero image (Tiger)​

○​ Tabs: [Info] [Photos] [AR] [Feeding]​

○​ “View on Map” button​

●​ Sticky Bottom Bar: “Set Reminder” | “Add to My Zoo”​

Deliverable:​
zooapp_wireframes_lowfi_v1.fig

4.3.3. Define Interaction Patterns and Microinteractions

Interaction design focuses heavily on behavioral patterns.

Core Interaction Patterns for Zoo App

Pattern Description Example

Tap Basic selection Tapping an animal card opens its details

Swipe Horizontal Browse through Swiping between animal images or events
carousel

Long Press Opens contextual Long press on map marker → “Set

menu Reminder”

Pinch-to-Zoom Map zoom or AR Zoom into specific exhibit area

view

Scroll + Sticky Header Maintain context Animal name sticks while scrolling long
descriptions

FAB (Floating Action Quick scan action Scan QR near exhibit to unlock AR
Button) content

Modal Overlay Quick interaction “Reminder Set” confirmation or ticket

booking success

Feedback Types:

●​ Visual feedback: Button press animation, color change.​

●​ Auditory feedback: Subtle sound when scanning QR.​

●​ Haptic feedback: Light vibration for confirmations.​

Deliverable:​
zooapp_interaction_patterns_doc.pdf

4.3.4. Navigation Interaction Design

We now define how users move through the app screens.

Navigation Map

1.​ Primary: Bottom tab bar (Home, Map, Events, Learn, My Zoo)​

2.​ Secondary: Top tabs inside sections (e.g., “All Events”, “Today”, “Upcoming”)​

3.​ Contextual: Buttons linking related screens (“View on Map” → Map opens on that
exhibit)​
 4.​ Modal Navigation: For quick actions (donation, ticket purchase confirmation)​

Each navigation type has transitions:

●​ Bottom tabs → slide fade transition.​

●​ In-section navigation → horizontal slide.​

●​ Modal pop-up → upward slide with dimmed background.​

Deliverable:​
zooapp_navigation_flow.fig

4.3.5. Define States & Transitions

Every interactive element must have states:

●​ Default​

●​ Hover/Active (Pressed)​

●​ Loading​

●​ Success​

●​ Error​

Example: “Set Reminder” Button States

State Visual Behavior

Default Gray button Tap to set

reminder

Loading Spinner + “Setting…” Disable tap

Succes Green check + “Reminder Set” Feedback sound

s

Error Red border + “Try Again” Retry option

This level of definition ensures consistency in every microinteraction.

Deliverable:​
zooapp_state_transition_spec.xlsx

4.3.6. Create Mid-Fidelity Wireframes

Once layouts and interactions are confirmed, move to mid-fidelity (more refined structure, with
grid, spacing, and typography styles — but still grayscale).

Key Additions:

●​ Real UI components (buttons, inputs, tabs).​

●​ Actual text content (not lorem ipsum).​

●​ Defined spacing (using 8pt grid).​

●​ Usability-ready for testing.​

Deliverable:​
zooapp_wireframes_midfi_v1.fig

4.3.7. Prototype Interactions

Now we link screens and transitions in Figma or Adobe XD to simulate real user behavior.

Example Interactive Prototypes:

●​ Click-through path for “Buy Ticket”.​

●​ Swipe interaction for animal gallery.​

●​ QR scan animation simulation for AR mode.​

●​ Onboarding flow walkthrough.​

Deliverable:​
zooapp_prototype_v1.fig (clickable prototype)
4.3.8. Conduct Usability Testing on Prototype

Before moving to high-fidelity UI design, test whether the interactions make sense.

Testing Methods:

1.​ Task-based usability test​

○​ “Find today’s lion show.”​

○​ “Set a reminder for tiger feeding.”​

○​ “Locate restrooms nearby.”​

2.​ Moderated sessions​

○​ 5–10 participants (across personas).​

○​ Observe click patterns, hesitation, confusion.​

3.​ Metrics captured​

○​ Task completion rate (%)​

○​ Time to complete task​

○​ Number of wrong clicks​

○​ Qualitative feedback (“I expected it here…”)​

4.​ Iterate wireframes based on feedback.​

Deliverable:​
zooapp_usability_test_round1_report.pdf

4.4. Deliverables Summary

Deliverable Description

Task Flows Step-by-step logic of user actions.

 Low-Fi Wireframes Early screen sketches focusing on layout.

Interaction Patterns All gestures, behaviors, and responses defined.

Doc

Navigation Flow Map of transitions and hierarchies.

State Transition Spec Documentation of button, form, and feedback

states.

Mid-Fi Wireframes Usability-ready structure with real content.

Interactive Prototype Clickable flow for user testing.

Usability Test Report Findings from first prototype test.

4.5. Phase Completion Criteria

✅ Core task flows complete and validated.​
✅ Navigation and transitions defined.​
✅ Low- and mid-fidelity wireframes approved.​
✅ First usability test passed ≥80% success.​
✅ Ready to move into Phase 5: Visual Design (UI Design).

🎯 PHASE 4 — INTERACTION DESIGN

(Zoo App)
Goal:​
Transform static wireframes into clickable, interactive prototypes that simulate real app
behavior, allowing users and stakeholders to experience the navigation, flow, and interactions.

4.1. Objectives of Interaction Design

1.​ Validate user flows for top tasks (tickets, navigation, animal info).​
 2.​ Identify navigation bottlenecks or confusing transitions.​

3.​ Prototype micro-interactions (button taps, swipes, modal popups).​

4.​ Prepare for usability testing in Phase 6.​

4.2. Tools for Interaction Design

●​ Figma Prototype Mode – primary tool for creating interactive wireframes.​

●​ InVision / Marvel – alternative clickable prototype platforms.​

●​ Maze / Useberry – optional for remote usability testing with interactive prototypes.​

4.3. Key Interaction Flows

Based on Phase 3 wireframes, we focus on 5 primary flows:

Flow 1: Ticket Purchase

1.​ Home → Buy Tickets → Ticket Selection​

2.​ Payment → Confirmation → Ticket QR​

3.​ Navigation back to Home or My Zoo​

Interactions:

●​ Dropdown quantity selector​

●​ Tap buttons → visual press feedback​

●​ Confirmation modal with slide-in animation​

Flow 2: Explore Animal via Map

1.​ Home → Map & Explore → Tap Animal Marker​

2.​ Animal Detail → Set Reminder → View on Map​

3.​ Optional AR Launch → Return to Animal Detail​

Interactions:

●​ Tap map markers → pop-up modal​

●​ Sliding bottom drawer for nearby attractions​

●​ Toggle filters → dynamic map update​

Flow 3: Event Reminder

1.​ Home → Today’s Highlights → Tap Event Card​

2.​ Event Detail → Add Reminder​

3.​ Confirmation toast → Event appears in My Zoo → Notifications triggered​

Interactions:

●​ Button press with microfeedback​

●​ Toast animation for confirmation​

●​ Navigation back to Home or Event List​

Flow 4: AR Animal Interaction

1.​ Map / Animal Detail → Tap AR FAB​

 2.​ Camera feed with AR overlay​

3.​ Tap animal card → Quiz / Info​

4.​ Capture photo → Save / Share → Exit AR​

Interactions:

●​ AR overlay with minimal UI​

●​ Tap cards → slide-up panels​

●​ Photo capture animation​

Flow 5: Favorites & Donations

1.​ Home / Animal Detail → Tap Favorite​

2.​ My Zoo → Favorites List​

3.​ Donations → Select animal → Payment → Confirmation​

Interactions:

●​ Heart icon toggle animation​

●​ Payment confirmation modal​

●​ Progress bar for donation perks​

4.4. Interaction Design Components

Component Interaction

Buttons Press feedback (scale or color

change)
Cards Tap → Expand / Navigate

Tabs Swipe / Tap to switch content

Modals Slide-in / Fade animations

Map Markers Tap → Pop-up with CTA

AR FAB Floating → Tap → Launch AR

Toasts Slide-in bottom notifications

4.5. Clickable Prototype Structure

●​ Prototype Start: Home Screen​

●​ Navigation: Bottom tab bar + contextual back buttons​

●​ Dynamic Content: Filtered map markers, event lists, favorite updates​

●​ Interactions: Buttons, taps, swipes, modal popups, AR launch​

●​ Task Simulation:​

○​ Buy Tickets → Payment → QR Ticket​

○​ Explore Map → Find Tiger → Set Reminder​

○​ AR Interaction → Quiz → Return​

4.6. Deliverables for Phase 4

1.​ Clickable Prototype – fully interactive version of all core screens.​

2.​ Interaction Flow Diagrams – showing navigation and decision points.​

3.​ Annotated Interaction Specs – microinteractions, transitions, gestures.​

4.​ Task Scenarios for Testing – ready for usability testing in Phase 6.​
✅ Phase 4 Completion Criteria
●​ Clickable prototype allows full simulation of top 5 user flows.​

●​ Microinteractions and navigation are consistent and intuitive.​

●​ Prototype ready for usability testing and stakeholder feedback.​

●​ Supports Phase 5 (Visual Design) handoff with established structure and flow.​

🖌️ PHASE 5 — VISUAL DESIGN (UI

DESIGN PHASE)
Goal:​
Transform the wireframes and interaction blueprints into high-fidelity, visually appealing, and
consistent interfaces that communicate personality, hierarchy, and usability through color,
typography, imagery, and layout.

5.1. Inputs from Previous Phases

Before we start, the following deliverables from Phases 1–4 serve as our foundation:

Input Description

🧠 UX Research & Defines audience needs and context.

Personas

🗺️ Information Architecture Structural hierarchy and navigation.

🧩 Interaction Design Behavior, flow, and wireframes.

🎯 Usability Test Results Insights on what works and what needs visual clarification.

These ensure our design decisions are data-driven, not purely aesthetic.
5.2. Core Objectives of Visual Design
1.​ Enhance usability through visual hierarchy.​

2.​ Establish emotional connection aligned with the zoo’s mission (education,
conservation, family fun).​

3.​ Reflect brand identity (color palette, typography, iconography).​

4.​ Ensure accessibility and readability.​

5.​ Maintain consistency across all screens, components, and devices.​

5.3. Sub-Phases of Visual Design

We’ll go step by step into each of the major sub-phases:

1.​ Establish Brand & Visual Direction​

2.​ Create Moodboard & Style Exploration​

3.​ Develop Design System (UI Kit)​

4.​ Apply Visual Design to Key Screens (High-Fidelity UI)​

5.​ Define Visual Hierarchy & Layout Rules​

6.​ Add Motion & Micro-Interaction Guidelines​

7.​ Accessibility & Responsiveness Adjustments​

8.​ Handoff Preparation for Development​

5.3.1. Establish Brand & Visual Direction

First, define how the Zoo App should feel visually.

Brand Personality Keywords

●​ Friendly → For children and families.​

●​ Educational → Promotes learning and awareness.​

●​ Vibrant → Represents nature and wildlife.​

●​ Trustworthy → For payments, memberships, and donations.​

●​ Eco-conscious → Natural and organic visual tone.​

Brand Voice (Visual Tone)

Element Tone Description

Color Nature-inspired Greens, earthy browns, warm yellows.

Typography Modern yet playful Rounded sans-serif fonts (e.g., Poppins, Nunito).

Iconography Flat, outline-based Simple animal icons, clean line weights.

Imagery Real and High-quality photos of animals, kids learning, nature

engaging scenes.

Deliverable:​
zooapp_brandstyle_brief.pdf

5.3.2. Create Moodboard & Style Exploration

A moodboard helps visually align stakeholders before production begins.

Step-by-Step Creation

1.​ Gather references:​

○​ Animal photography styles (soft lighting, natural backgrounds).​

 ○​ Other zoo/nature/educational apps for inspiration.​

○​ Nature-inspired UI themes (greens, blues, earthy textures).​

2.​ Combine visual samples:​

○​ Color palette swatches.​

○​ Font samples.​

○​ UI layout inspirations.​

○​ Icon and illustration examples.​

○​ Example images of animals, leaves, wood textures.​

3.​ Present 2–3 moodboard variations:​

○​ Option A – “Natural & Calm”: Soft green tones, minimal typography.​

○​ Option B – “Vibrant & Family-Friendly”: Bright colors, playful icons.​

○​ Option C – “Modern & Elegant”: Deep contrast, sleek typography.​

4.​ Gather stakeholder feedback to lock the direction.​

Deliverable:​
zooapp_moodboard_v1.fig

5.3.3. Develop Design System (UI Kit)

A design system ensures consistency across every screen. It contains reusable UI
components, states, and visual standards.

Components and Tokens

1. Color Palette
Type Example Colors Usage

Primary #2C8A4B (Forest Green) Buttons, highlights

Secondary #FFC83D (Sun Yellow) Call-to-action, event
labels

Accent #F26B38 (Coral Orange) Alerts, highlights

Neutral #FFFFFF (White), #F5F5F5 (Light Gray), #333333 Backgrounds, text

(Dark Text)

Success/Erro #34C759 / #FF3B30 Feedback messages

r

2. Typography
Category Font Use

Heading Poppins Bold Page titles

Subheadin Poppins Medium Section titles

g

Body Nunito Regular Paragraphs

Caption Nunito Light Secondary info

3. Grid System

●​ 8pt spacing rule​

●​ 4-column grid for mobile, 12-column grid for tablet​

●​ Consistent padding: 16px per side​

4. UI Components

●​ Buttons (Primary, Secondary, Ghost)​

●​ Tabs & Navigation bars​

●​ Cards (Animal, Event, Donation)​

●​ Search bar​

●​ FAB (Floating Action Button)​

 ●​ Modals & Toasts​

●​ Inputs & Dropdowns​

●​ Progress indicators​

Deliverable:​
zooapp_designsystem_v1.fig

5.3.4. Apply Visual Design to Key Screens

We now design high-fidelity screens — pixel-perfect representations of the final app.

Example 1: Home Screen (High-Fidelity UI)

Visual Elements

●​ Background: soft gradient green → white.​

●​ Header: Zoo logo on left, search + bell icons on right.​

●​ Hero carousel: bright animal photos (e.g., pandas, lions).​

●​ Quick navigation icons (rounded, colorful, illustrated).​

●​ Cards for “Today’s Events” with color-coded time tags.​

●​ Rounded CTA button: “Buy Tickets Now”.​

Example 2: Animal Detail Screen

●​ Full-bleed image of animal (Tiger).​

●​ Tabs with visual icons (Info, Photos, AR, Feeding).​

●​ Large “View on Map” button.​

●​ Secondary tone colors to distinguish categories (e.g., green = mammal, blue = bird).​
Example 3: Map Screen

●​ Map with colored markers (Animal zones, Cafés, Restrooms).​

●​ Floating action button (AR Scan).​

●​ Bottom drawer showing nearby attractions with cards.​

Deliverable:​
zooapp_ui_highfi_v1.fig

5.3.5. Define Visual Hierarchy & Layout Rules

Visual hierarchy ensures users’ attention flows correctly.

Visual Principle Implementation

Contrast Bright CTA buttons on neutral backgrounds.

Size & Scale Large images for animals; smaller text for info.

Whitespace 16px minimum padding around major

elements.

Alignment Left-aligned text, center-aligned icons.

Color Primary green = actionable; yellow = highlight.

Emphasis

Deliverable:​
zooapp_ui_hierarchy_guide.pdf

5.3.6. Add Motion & Micro-Interaction Guidelines

Motion adds life and context to UI transitions.

Motion Element Description Duration

Button tap Quick scale + color pulse 150ms
feedback

Screen transitions Slide-in / fade 300ms

Map marker pop Bounce animation when 400ms

tapped

Success feedback Checkmark morph animation 200ms

AR scan success Flash + vibration 300ms

Deliverable:​
zooapp_microinteraction_specs.json

5.3.7. Accessibility & Responsiveness

Accessibility Design

●​ Color contrast ratio ≥ 4.5:1​

●​ Minimum touch target size: 44x44px​

●​ Text scaling support: 100–200%​

●​ Screen reader labels: ARIA roles for all interactive elements​

●​ Icon + text pairing for clarity in low literacy contexts​

Responsiveness

●​ Mobile-first design, adaptable to:​

○​ Tablets (2-column layouts)​

○​ Kiosk screens (large font, high contrast)​

○​ Dark mode compatibility (in design system)​

Deliverable:​
zooapp_accessibility_compliance_report.pdf

5.3.8. Handoff Preparation for Development

Finally, prepare all assets and documentation for developers.

Deliverables

●​ Component libraries (Figma variants)​

●​ Exported assets (SVG, PNG, icons)​

●​ Color, font, and spacing tokens (in JSON or CSS variables)​

●​ Design documentation (Figma annotations)​

●​ Developer link (Figma Inspect mode)​

Deliverable:​
zooapp_ui_handoff_package.zip

5.4. Deliverables Summary

Deliverable Description

Brand & Visual Direction Defines tone, color, and personality.

Moodboard Visual inspiration alignment tool.

Design System Library of all reusable components.

High-Fidelity UI Screens Final visual designs for all core flows.

Visual Hierarchy & Layout Guide Rules for visual consistency.

Microinteraction Specs Animation and feedback behaviors.

Accessibility Report Compliance with WCAG standards.

 Dev Handoff Package Assets, tokens, and documentation for
developers.

5.5. Phase Completion Checklist

✅ Visual direction approved by stakeholders.​
✅ Design system completed and componentized.​
✅ All high-fidelity screens finalized and tested visually.​
✅ Accessibility standards met.​
✅ Developer handoff completed.​
✅ Ready for Phase 6: Prototyping & Usability Validation (UI Testing Phase).

🧭 PHASE 6 — PROTOTYPING &

USABILITY VALIDATION
Goal:​
To create interactive prototypes of the high-fidelity designs, test them with real users (based
on our personas), gather data on usability, and identify UX/UI improvements before
development.

This phase ensures that the product is intuitive, efficient, and enjoyable to use — preventing
costly redesigns later.

6.1. Inputs from Previous Phases

Input Source
Phase

High-fidelity UI Screens Phase 5

Design System Components Phase 5

Interaction Flows Phase 4

 User Personas & Scenarios Phase 2

Usability Feedback (Low-Fi) Phase 4

These serve as the foundation for building interactive and test-ready prototypes.

6.2. Sub-Phases Overview

We’ll go through each of these in detail:

1.​ Define Prototype Objectives​

2.​ Select Prototype Type & Tools​

3.​ Build Interactive Prototype​

4.​ Create Usability Test Plan​

5.​ Recruit Participants​

6.​ Conduct Usability Testing Sessions​

7.​ Record Metrics & Observations​

8.​ Analyze Results & Identify Issues​

9.​ Iterate Design Improvements​

10.​Validation & Final Approval​

6.2.1. Define Prototype Objectives

Before prototyping, we clearly define what we want to learn and which flows we’re testing.

Example Objectives for Zoo App:

●​ Can users easily buy tickets and complete a purchase?​

 ●​ Do users understand how to navigate the zoo map?​

●​ Is the animal detail screen engaging and informative?​

●​ Can parents easily locate family facilities (cafés, restrooms, etc.)?​

●​ Are the AR and “Adopt an Animal” features discoverable?​

Each objective is tied to specific user tasks and success criteria.

Deliverable:​
zooapp_prototype_objectives.docx

6.2.2. Select Prototype Type & Tools

Depending on the stage, fidelity, and goals, we select the prototype type.

Prototype Type Fidelity Purpose

Low-Fidelity Simple flow testing (wireframes) Early concept testing

Mid-Fidelity Basic UI & flow Structure validation

High-Fidelity Interactive Fully designed, clickable prototype Final usability validation

For this phase, we use a High-Fidelity Interactive Prototype.

Tools Used

●​ Figma Prototype Mode — primary (interactive flows, transitions, overlays)​

●​ Maze / Useberry / Lookback — for remote usability testing​

●​ Notion or Airtable — for test planning and tracking​

Deliverable:​
zooapp_prototype_v1.fig
6.2.3. Build Interactive Prototype
We now link high-fidelity screens and create realistic interaction behaviors.

Prototype Features

1.​ Navigation Simulation​

○​ Home → Animal Detail → Map → AR Feature → Checkout.​

2.​ Real Interaction Feedback​

○​ Buttons, dropdowns, modals, and swipe gestures.​

3.​ Microinteractions​

○​ Animated button presses, smooth page transitions.​

4.​ Conditional Flows​

○​ E.g., if a ticket type is selected, show payment screen.​

5.​ Error States & Feedback​

○​ “Payment failed” → red toast message.​

Deliverable:​
zooapp_prototype_v2.fig (ready for user testing)

6.2.4. Create Usability Test Plan

The Usability Test Plan ensures structured testing and reliable results.

Components of the Plan

Section Description

Objectives What we want to learn

Target Users Persona-based (families, students, donors)

 Test Scenarios Tasks that represent real actions

Success Time on task, error rate, satisfaction score

Metrics

Method In-person moderated + remote

unmoderated

Tools Figma prototype + Maze

Duration 15–30 minutes per session

Example Test Scenarios

Scenario User Task Success Criteria

Buy Tickets Purchase 2 adult + 1 child ticket Task completed in < 2 min

Explore Animals Find info about the Bengal Tiger Locate within 3 taps

Use AR Feature Launch AR and scan lion zone Feature found & used correctly

Donate Complete an “Adopt an Animal” flow Donation success screen seen

Find Facilities Locate nearest restroom Found using map or filter

Deliverable:​
zooapp_usability_testplan_v1.pdf

6.2.5. Recruit Participants

We recruit 5–8 representative users per persona group (Jakob Nielsen’s model recommends 5
users per round).

Participant Groups
Group Description No. of
Users

Parents Visiting with kids 3

Students Using app for school trip 2

 Zoo Frequent visitors 2
Enthusiasts

Donors Interested in animal 1

adoption

Recruitment through:

●​ Zoo’s visitor email list​

●​ Social media posts​

●​ On-site kiosk invitations​

Deliverable:​
zooapp_usertesting_participantlist.xlsx

6.2.6. Conduct Usability Testing Sessions

Session Format

1.​ Introduction (2–3 min)​

○​ Explain purpose, consent, and ask users to think aloud.​

2.​ Task Execution (15–20 min)​

○​ Observe user interactions, note confusion or hesitation.​

3.​ Post-Test Interview (5 min)​

○​ Collect feedback on ease of use and satisfaction.​

Observation Points

●​ Where do users hesitate?​

●​ Which icons or terms cause confusion?​

 ●​ Is navigation intuitive without instructions?​

●​ Do users scroll naturally to expected content?​

Moderation Guidelines

●​ Avoid leading users.​

●​ Encourage verbalization.​

●​ Record session (if consented).​

●​ Take timestamped notes.​

Deliverable:​
zooapp_usertest_recordings.zip

6.2.7. Record Metrics & Observations

We collect both quantitative and qualitative data.

Quantitative Metrics
Metric Description Example
Result

Task Success Rate % of users completing task 90%

Time on Task Avg. seconds per task 95s

Error Rate Incorrect or failed actions 8%

System Usability Scale Standardized score (0–100) 83

(SUS)

Net Promoter Score (NPS) User likelihood to recommend +42

Qualitative Observations

●​ “Map icons are too small on mobile.”​

 ●​ “Didn’t notice the AR feature button.”​

●​ “Color contrast is low in sunlight.”​

●​ “Ticket purchase felt easy and smooth.”​

Deliverable:​
zooapp_usability_results_summary.xlsx

6.2.8. Analyze Results & Identify Issues

Categorize Findings by Severity
Severit Description Example Issue
y

Critical Blocks task completion Checkout button not visible on smaller

screens

Major Causes confusion or Similar icon for “Donate” and “Adopt”

delay

Minor Cosmetic or low-impact Card padding inconsistency

Each issue is logged with:

●​ Screenshot reference​

●​ User comments​

●​ Severity rating​

●​ Suggested fix​

Deliverable:​
zooapp_usability_findings_report.pdf

6.2.9. Iterate Design Improvements

Using insights from testing, we refine the prototype.

Example Iterations:

●​ Increase contrast ratio of buttons.​

●​ Replace AR icon with clearer “Scan Animal” label.​

●​ Add tooltips for icons in map view.​

●​ Make ticket “Continue” button sticky for easier checkout.​

●​ Improve visual feedback for donation confirmation.​

Deliverable:​
zooapp_prototype_v3.fig (final validated prototype)

6.2.10. Validation & Final Approval

After implementing improvements, we conduct a validation round (2–3 users).​
If all key tasks are completed successfully and no critical issues remain, the prototype is
approved for handoff.

Deliverables:

●​ Final Prototype (Validated)​

●​ Updated Design Documentation​

●​ Usability Report Summary​

●​ Stakeholder Sign-Off Sheet​

Deliverable:​
zooapp_prototype_final_validation.pdf

6.3. Deliverables Summary

 Deliverable Description

Prototype Objectives Clear testing goals

Interactive Prototype Clickable, high-fidelity model

Usability Test Plan Structured testing framework

Participant List Recruited test users

Test Recordings Raw observation data

Metrics Summary Quantitative test data

Findings Report Problems &

recommendations

Improved Prototype Final iteration post-testing

6.4. Phase Completion Checklist

✅ High-fidelity prototype created​
✅ Test plan executed with real users​
✅ Key metrics recorded and analyzed​
✅ UX/UI issues resolved​
✅ Prototype validated and approved

⚙️ PHASE 7 — DESIGN HANDOFF &

FRONT-END IMPLEMENTATION
Goal:​
To hand over all finalized design assets, specifications, and documentation to the development
team and collaborate during the front-end implementation to ensure the Zoo App’s design
system, usability, and interactivity are faithfully translated into code.

7.1. Inputs from Previous Phases

 Input Source
Phase

Validated High-Fidelity Prototype Phase 6

Design System (UI Kit + Tokens) Phase 5

Microinteraction Specifications Phase 5

Accessibility Guidelines Phase 5

Usability Findings Phase 6

These assets provide the blueprint for accurate implementation.

7.2. Sub-Phases Overview

We’ll go through each of the following stages in detail:

1.​ Prepare Handoff Deliverables​

2.​ Organize Design Files & Assets​

3.​ Create Design Specification Documents​

4.​ Export UI Components & Assets​

5.​ Establish Design Tokens (for Developers)​

6.​ Set Up Collaboration Tools & Workflow​

7.​ Conduct Developer Onboarding & Walkthrough​

8.​ Supervise Front-End Implementation​

9.​ Conduct Visual QA (Quality Assurance)​

10.​Iterate & Approve Final Build​

7.2.1. Prepare Handoff Deliverables
The first step is to package everything developers will need — clearly, consistently, and
accessibly.

Key Handoff Deliverables

File / Resource Purpose

Figma file (final prototype) Visual and interaction reference

Design system file Reusable UI components

Color, typography, and spacing For code variables

tokens

Assets (icons, images, illustrations) Ready for export

Interaction specs Transitions, animations, gestures

Accessibility guidelines For compliance during coding

Documentation Describes flows, naming conventions, and

logic

Deliverable:​
zooapp_design_handoff_package.zip

7.2.2. Organize Design Files & Assets

Before export, we clean and standardize the design workspace.

Steps for Proper Organization

1.​ Naming convention​

○​ screenname_element_state​

○​ e.g., home_btn_primary_hover, map_icon_restroom_active​

2.​ Layer grouping​

 ○​ Group similar components under frames or sections (Header, Footer,
AnimalCard).​

3.​ Version control​

○​ Tag major milestones (v1.0, v1.1 Final Approved).​

○​ Lock approved screens in Figma to prevent edits.​

Structure folders​
​
/ZooApp_Design
/HighFidelity_Screens
/DesignSystem
/Icons
/Illustrations
/Exports
/Documentation

4.​

Deliverable:​
Organized Figma & asset library ready for developer export.

7.2.3. Create Design Specification Documents

Developers need exact measurements, padding, fonts, and behaviors.​
This is handled through Figma Inspect or dedicated documentation.

Design Spec Document Includes

Attribute Example

Spacing 16px horizontal margin, 8px vertical gap

Typography Poppins Bold, 24pt, line-height 1.2

Color #2C8A4B (Primary Green)

Button Radius 12px

 Shadow 0px 2px 8px rgba(0,0,0,0.1)

Icon Size 24x24px

Animation Timing 150ms ease-in-out

Deliverable:​
zooapp_designspec_v1.pdf

7.2.4. Export UI Components & Assets

Every reusable visual element is exported in developer-friendly formats.

Export Rules
Asset Type Format Notes

Icons SVG Scalable, editable

Illustrations SVG or PNG Depending on complexity

Images WebP / JPEG ≤ 300KB for mobile

(optimized)

App Logos PNG (varied resolutions) For splash & app icon

Lottie Animations JSON For microinteractions

Deliverable:​
/ZooApp_Exports/ folder with all optimized assets.

7.2.5. Establish Design Tokens

Design tokens are variable definitions for color, typography, spacing, and states — ensuring a
single source of truth between design and code.

Example: JSON Design Tokens

{
"colors": {
"primary": "#2C8A4B",
 "secondary": "#FFC83D",
"accent": "#F26B38",
"neutralLight": "#F5F5F5",
"textDark": "#333333"
},
"font": {
"heading": "Poppins-Bold",
"body": "Nunito-Regular"
},
"spacing": {
"base": 8,
"small": 4,
"medium": 16,
"large": 24
},
"radius": {
"button": 12,
"card": 16
}
}

Deliverable:​
zooapp_design_tokens.json

Developers integrate this into their front-end framework (React Native, Flutter, etc.) to ensure
visual consistency.

7.2.6. Set Up Collaboration Tools & Workflow

A smooth workflow between designers and developers prevents miscommunication.

Recommended Tools
Purpose Tool

Design review & inspect Figma

 Feedback & issues Jira / Linear / Notion
tracking

Version control GitHub

Communication Slack / Teams

Documentation Confluence / Notion

Example Workflow

1.​ Designer uploads Figma link → Developer inspects spacing/colors.​

2.​ Developer commits coded component.​

3.​ Designer verifies pixel accuracy.​

4.​ Bugs or mismatches logged in Jira → iterated until approved.​

Deliverable:​
zooapp_devcollab_workflow.md

7.2.7. Conduct Developer Onboarding & Walkthrough

A collaborative walkthrough ensures all team members understand the design rationale.

Walkthrough Session Agenda

●​ Overview of app goals and brand principles.​

●​ Review of design system and component logic.​

●​ Demonstrate microinteractions and transitions.​

●​ Accessibility rules (contrast, labels, tap zones).​

●​ Q&A with front-end team.​

Deliverable:​
zooapp_devwalkthrough_presentation.pptx
7.2.8. Supervise Front-End Implementation
The design team collaborates during development sprints to ensure fidelity.

Collaboration Practices

●​ Weekly design-developer syncs​

●​ Component validation checklist per screen​

●​ Slack channel for design clarifications​

●​ Real-device testing for scaling and contrast​

Focus areas:

●​ Color accuracy​

●​ Font alignment and rendering​

●​ Button states and animations​

●​ Layout consistency across screen sizes​

Deliverable:​
zooapp_dev_sprintreviews_notes.docx

7.2.9. Conduct Visual QA (Quality Assurance)

After the app is built, the design team performs a visual QA pass on staging builds.

Visual QA Checklist
Check Description

✅ Layout Accuracy Elements align with Figma specs

 ✅ Color Consistency Brand colors correctly applied

✅ Typography Font weights and sizes correct

✅ Padding & Margins Match grid spacing rules

✅ Animations Timing matches prototype

✅ Responsiveness Proper scaling on mobile/tablet

✅ Accessibility Contrast, labels, focus states

verified

Tools used:

●​ PixelSnap / Figma Mirror (for pixel comparison)​

●​ Stark / Axe (for accessibility audits)​

Deliverable:​
zooapp_visualQA_report.pdf

7.2.10. Iterate & Approve Final Build

Based on QA results:

●​ Designers suggest corrections.​

●​ Developers apply adjustments.​

●​ Once visual parity >95%, final approval is granted.​

🎉
Final milestone:​
Zoo App v1.0 (Design-Aligned Build) Approved

Deliverable:​
zooapp_designapproval_certificate.pdf
7.3. Deliverables Summary
Deliverable Description

Design Handoff Package All finalized assets & documentation

Organized Asset Library Structured Figma & export folders

Design Spec Document Detailed UI property sheet

Design Tokens Bridge between design & code

Collaboration Workflow Defines design-dev process

Developer Walkthrough Deck Orientation & Q&A support

Sprint Review Notes Implementation progress logs

Visual QA Report Review of design fidelity

Final Build Approval Stakeholder confirmation

7.4. Phase Completion Checklist

✅ All design assets and specs prepared​
✅ Developers fully onboarded​
✅ Design tokens integrated into code​
✅ Visual QA completed​
✅ Final implementation approved