Project Title

Old Town Memory

Role

Product Designer

Duration

2023.4 - 2023.8

Team

Personal Project

Tools

Figma, Photoshop

overview

Context

What happened when the urban declined?

Town changed

Experiences and habits of somewhere cease

San Francisco

San Francisco

People separated

Lost contact with neighbors and friends who once knew

Detroit

Detroit

Memory not aroused

Memories of somewhere are no longer aroused and forgotten.

Chicago

Chicago

Solution

How to meet the nostalgic needs caused by urban decline?

Gamification Feature 1Gamification Feature 2

Find where old photos were taken

Old photos uploaded by users and released

Use clues, such as using AR to obtain clues from old shops, to pinpoint the original locations of old photos and enable users to 'check-in'

Find old friends through photos

Discover other users who have shared memories linked to the same location in old photos

Reunite with old friends who lost touch with by tracing shared locations and memories

Community Feature 1Community Feature 2
Collection Feature 1Collection Feature 2

Find beloved city artwork

Explore and collect city-themed artwork created and uploaded by other users and AI

Use points earned through completing tasks or contributing content to purchase artworks

Research

Interviewed residents affected by urban decline

20

Valid Questionnaire

12

Semi-structured Interview

3

Generation Groups

We focus on...

  • · Attitude and emotions toward urban renewal
  • · Personal memories tied to specific urban landscapes
  • · Behaviors and motivations related to urban exploration

Insights

Urban decline wipes out traces of personal memory

Limited tools and motivation to revisit memories

Motivation Icon

· Nostalgia unmet by existing tools

· Passive engagement with past (e.g., pass by, browse photos)

Desire to reconnect with long-lost acquaintances

Connection Icon

· Disconnection from old friends and long-lost acquaintances

· Lack of means to reestablish contact

Interest in hometown-themed visual content

Artwork Icon

· Enjoy place-based artwork

· Limited access to such content

Design Strategy

How to encourage users to relive old town memory?

Lack of products and motivation

Motivational design to encourage exploration

Desire to reconnect with long-lost acquaintances

Create opportunities for reconnection

Enjoy city-themed visual content

Virtual artwork collection and trade

Conceptualization

Concept Development Based on Three Strategic Directions

We developed six concepts and invited 11 out of 12 interviewees to evaluate and rate the perceived value of each. Meanwhile, we as designers assessed the feasibility of implementing each concept. The scoring was based on a 5-point scale.

Motivational DesignGamification

Concept A: Puzzle Solving & Check-In

· User can upload and publish old photos

· User can follow various clues (e.g., using AR to uncover hints from old shops) to locate where the photos were originally taken and check in at those locations.

Value Score: 3.82

Feasibility Score: 4

Concept A Screen 1Concept A Screen 2
ReconnectOnline Community

Concept B: Photo Sharing & Social Connection

· Users can upload photos that capture their personal memories of the venue. Others with shared or similar experiences can comment and engage in conversation.

Value Score: 3.64

Feasibility Score: 4

Concept B

Concept C: Collective Memory Forum

· Users can participate in themed discussions around historical city events and share old photos representing collective memories.

Value Score: 3.36

Feasibility Score: 4.5

Concept C
ArtworkCollection

Concept D: Re-creation by AI and users

· Users can upload old photos for AI to repair and recreate. They can download, edit, and republish the restored photos.

Value Score: 3.64

Feasibility Score: 3.5

Concept D

Concept E: Cooperative Modeling Platform

· Users can co-create 3D models to reflect changes in the venue over time using a shared platform.

Value Score: 3.64

Feasibility Score: 2

Concept E

Usability Testing Plan

12 Interviewees in 3 Groups

Testing Plan
12

Participants

3

Groups

We conducted three rounds of usability testing with 12 participants (labeled A–L), divided into three groups. Each group completed specific tasks and rated the prototype on a scale of 1 to 10.

Iteration #1

Searching in the area

A feature designed to help users identify the location where an old photo was taken within a defined area. The interface provides relevant tools and visual guidance.

Before Iteration1Before Iteration2

Problem

· Few users noticed the progress bar or tools

· Cannot use tools and the map simultaneously

Goal

· Make the progress bar easier to locate and use

· Ensure tools are usable alongside the map

1st Iteration

Adjust Progress Bar and Tools Information Hierarchy

1st Iteration

Improvement

· Progress Bar & Tools higher information hierarchy

· Make the map the primary focus of the layout

Problem

· Need access to the original old photo for reference

· Unable to view details while completing tasks

Goal

· Enable users to view the task-related old photo

· Provide access to task details

2nd Iteration

Add Task Details

2nd Iteration

Improvement

· Add an old photo reference within the task flow

· Add a section displaying task details

Iteration #2

Overlay old photo and camera footage

After capturing a photo, users can compare it with the historical photo by overlaying the two images. This allows users to visualize changes over time.

Before Iteration1

Problem

· The opacity-based overlay is hard to understand

· The interaction felt static and lacked engagement

Goal

· Make the overlay effect easier to comprehend

· Increase interactivity

1st Iteration

Introduce Movable Divider for Visual Comparison

1st Iteration

Improvement

· Replace with a side-by-side layered comparison

· Introduce a movable dividing line allowing to swipe between the old and new photos

Problem

· The divider's interaction prompt was unclear

· Users cannot grasp the photo contrast quickly

Goal

· Add labels for photos

· Add tips and visual prompts for using the divider

2nd Iteration

Add Visual Tips and Labels

2nd Iteration

Improvement

· Add labels for photos

· Add tips and visual prompts for using the divider

Testing Result

Improvement

27%

Rating Improvement ⬆️

67%

Good Reviews ⬆️

The comparison-based test results provide valuable insights:

Low-fi (A, B, C, D) Average Score: 7

1st Iteration (E, F, G, H) Average Score: 7.75

2nd Iteration (A - L) Average Score: 8.92

A-D Average: 9.25 E-H Average: 9 I-L Average: 8.5

Testing Results

Thanks for stopping by, let's connect!