VanGo Project
Android App | 2017 | Full-Stack Android Developer + UX Researcher
Problem
Public art often serves to remind us of certain, significant eras of the city and symbolizes important themes that define the city. We walk by public art unknowingly every day, without knowing what they mean or represent. Many of us allow public art to fade into our periphery, and even when a piece speaks to you, you struggle to find information about it. In project VanGo, we [team mykrew of Centre for Digital Media] aimed to engage Vancouverites with their city through public art, by addressing the problems of discoverability and accessibility.
When we received VanGo from Microsoft Vancouver, it was a fully functional prototype. The user chooses an art piece to visit, goes to the site, takes a photo within capture range, which unlocks information about the art piece.
Our initial understanding of the project was that it needed a WOW! factor; sprinkles on an already baked cake to make it more engaging. But we quickly realized the experience lacked a target persona and that the existing features didn’t work in tandem.
Solution
"VanGo makes discovering public art an exploration for locals and tourists to unlock new art knowledge and cultural experiences in Vancouver."
We chose lay new foundations for VanGo, by redesigning the core experience and transforming its look and feel using an user-centred approach. We applied Nir Eyal’s Hook Model to reinvent and gamify the core loop to make it a sticky experience, and added new features that complement the essence of VanGo. Due to time constraint - we had only 12 weeks - we did not implement all aspects of our envisioned customer journey, notably a navigation system that guides the user to an art piece of interest. But as strong believers of user-centered design, we carried out extensive user research and testing at every step of the process to make informed design decisions. The outcome of this 12-week project is a fully-functional Minimal Viable Product.
My Role
In production, I assumed the role of a full-stack Android developer, I have ...
- Created UML diagrams from client source code to map out how the code works. These diagrams helped the development team move forward, since the client code base was undocumented.
- Integrated data in the back-end using SQLite.
- Communicated asset requirements to artists and collaborated with designers via tools such as Zeplin to transform the UI for VanGo.
- Collaborated with other developers on the team to combine and integrate code.
- Reviewed and improved other developers’ code.
- Implemented four fully-functional features:
Onboarding
Clear, simple instructions to help the user start exploring!
Unlocking
Informs user of new discovery.
Map Completion
Helps users reflect on discovery progress.
Bookmarks
Enables a customized experience.
In pre-production, my role was primarily a UX researcher. I have ...
- Carried out background research to identify user demographics, motivation, replay value, and benefits of mobile location-based games such as Pokémon GO and Ingress.
- Carried out research into competitors, i.e. existing location-based apps about public art.
- Collected quantitative data in various public spaces to identify a target persona.
- Created conceptual models clearly mapping relationships between key concepts in the envisioned user experience to facilitate good design.
- Participated in user testing as an observer to gain first-hand understanding of how users interact with VanGo and to identify bugs.
Technical Challenge: Drawing "Zones"
Ever play games like GTA or Fallout? Was your chest filled with excitement when you discovered a whole new area to explore? We were. That's why we divided the map of Vancouver into meaningful zones to encourage users to re-discover the city and explore its nooks and corners. Zones help break down discovery process into manageable chunks and group artworks together. The real challenge came in implementing zones in the Webview version of Bing Maps embedded in VanGo.
I drew zones using Google Earth, and used togeojson to convert data into JSON. The raw JSON was quite dirty- I wrote a script to process this data, saving hours of production time.
/**
* Parses and writes clean JSON into a file.
* @param {object} json - Object corresponding to dirty JSON.
*/
function cleanJson(json) {
var clean = [];
for (var x of obj.features) {
var coord = [];
for (i = 0; i < x.geometry.coordinates[0].length; i++) {
coord.push([x.geometry.coordinates[0][i][1], x.geometry.coordinates[0][i][0]]); // lats and longs
};
var name = x.properties.name;
var shape = {
"name": name,
"id": assignGUID(),
"coordinates": coord,
};
clean.push(shape);
};
clean = JSON.stringify(clean, null, " ");
// Write clean data to a JSON file
writeToFile(pathToSave, clean, null);
}
// ...
The clean JSON is used to create polygons (= zones!) which are overlayed on a Bing Map object.
/**
* Creates a polygon for each shape defined in JSON.
* @param {object} map - Microsoft.Map object to overlay the polygons.
* @param {object} json - JSON containing each zone's coordinates.
*/
function drawShapesFromJson(map, json) {
(json.map(elem => {
return new Microsoft.Maps.Polygon(elem.coordinates.map(coordinate => {
return new Microsoft.Maps.Location(coordinate[0], coordinate[1]); // lat and long
}))
})).map(shape => { map.entities.push(shape); });
}
// ...
A map of Vancouver showing 40 zones! Pretty, eh?
What I Learned
- Learned how to integrate data into an Android app using SQLite.
- Learned the components of Android Activity and Fragment lifecycles.
- Learned how to bind two Activities in an Android app using an Intent.
- Learned how to use the Fragment Transaction Manager to begin or swap Fragments.
- Learned how to store data in shared preferences as well as in SQL databases.
- Learned how to build UI by manipulating layout files, managing assets and using the Android resource selection system.
- Learned how to implement a variety of UIs using Views, such as ViewPager and RecyclerView.
- Learned how to use Visual Studio.
- Gained exposure to client management.
- Gained experience communicating with non-programmers, including project managers, artists and designers.
