All Rights Reserved. © 2010-2020  Jing Yan
MAT works
past works
on sketchbook
about Eye

Overview

While Airbnb’s audio walks trying to create a new "neighborhood exploration experience" by connecting to places through essence, we would like to do it in a more imaginary way. 

PaperTown is a location-based story sharing application. It encourages you to see the world creatively by exploring and sharing fantasies about places.

Type

Android Mobile App 

04.2017-06.2017

Roles

Product Design

UX/UI Design

Front-End Development

Tools

Android Studio 

Adobe XD 

Adobe Illustrator

Story

April-1-2017 /  I found a big rock called "Father Crowley Monument" on Google Map in the middle of nowhere. 

This finding was like an easter egg.  Because before that every place I found on Google Map is real. Inspired by that, I took a picture of the rock besides, named it “Mother Susanna Monument” and posted it to Google Map. One day later, the place was successfully accepted and can be discovered by anyone in the world. This is the coolest experience I had using Google Map.  

 

Finding and hiding easter egg on other’s platform has a great pleasure, yet it is also unstable. (My “egg" got deleted  three month later. ) So I came up with this idea to build a platform that welcomes people to post their fantasies about places. These fantasies will be explored by others, the real places can be visited, and the imaginations will be continued by developing the story chain. 

Ideation

World exploring / There are dozens of traffic lights on your daily routine, they appear all the same to you. But after you heard one of them's bizarre history, this particular light will stand out to you and give you a different feeling. Next time you pass it, instead of ignoring it you might start to observe it and come up with new ideas. PaperTown transforms your mundane surrounding to a richer, more exciting environment.

 

Map based sharing / When you have a brilliant story about a place to tell, where should you post it? You might think of social medias like Facebook, Instagram, or WeChat. However most of the social media streams are time-based instead of location-based, and the viewers are usually limited to your friends or followers. Your story might gradually fades away let alone being continued by others. PaperTown keeps track of your story based on google map and enables you to share the fantasy with next visitor.

 

Collective story telling / When you get inspired by a cool post, you might want to add your own imagination. On the other side, it is also fascinating to see your original story developed in a way you never expected. PaperTown includes a feature of story-solitaire that encourage you to develop a story collectively and through different perspective.

Information Architecture​

1st Clickable Prototypes / developed with Adobe Experience Design

https://xd.adobe.com/view/de65b128-b40c-446f-8cc0-66520f53158e/screen/6ae59dde- 8c12-4f4b-8dba-24c039da1ab7/search-page?fullscreen

We ran a quick usability test based on the clickable prototype we made, and here are the results we found out. 

Based on the results, we updated the app information architecture and user flow. 

MVP I Development Demo / developed with Android Studio

https://youtu.be/DuXDD4o9v_A

MVP II  Design Iteration

2nd Clickable Prototypes / developed with Sketch and Invision

https://invis.io/8BEO7VFM4#/266210692_new-Splash_Screen

Backend Architecture

Third-Party Components

 

Picasso, Fresco - retrieve, display and cache images from remote data storage. 

Matisse - image picking activity

ButterKnife, PermissionsDispatcher - code injection to improve productivity

Realm - persistent storage management

 

Picasso 

http://square.github.io/picasso/

Fresco 

http://frescolib.org/

Matisse 

https://github.com/zhihu/Matisse

Butterknife 

http://jakewharton.github.io/butterknife/

Permissions Dispatcher 

https://github.com/permissions-dispatcher/PermissionsDispatcher

Realm 

https://blog.realm.io/realm-for-android/

 

 

// The project is developed with Android SDK, Adobe Experience Design, and Adobe Illustrator. 

 

Roles: UX Design, Interface Design, Front-End Development

 

Team: Jing Yan / Zhenyu Yang / Xuan Wang

CS 190I Android Development | instructor: Tobias Höllerer