a scene of a bathtub

Allo

banner of our app screenshot of the map in-app tablet screenshot of the recognition scene in-app screenshot of the of the information scene in-app

AR Cité

Creators: Augusto Mota Pinheiro, Kngfu & Dawson College
Start Date: ~ 04/2021
End Date: N/A
Medium & Tools: Unity | Flutter | Express | NodeJS | Docker | Miro | Asana | Github

Project Summary

Back in April of 2021, Reisa Levine, a teacher in Media Production at Dawson College, reached out to me with an exciting opportunity! She recently received a grant from the federal government to fund her newest project: an augmented reality app that showcased different cultural and historic parts of downtown Montreal.

Wanting to create an educational experience above all (both during development and use), with the help of Kngfu, a Montreal-based creative company, and myself, we've been creating a virtual reality experience that will enable users to explore the city and its history.

Created in Unity, the app will be available on the Play Store and Apple App Store.

first mockups of the app more mockups of the app even more mockups of the app mockups of the home screen mockups of the information screen mockup of the home screen the first version of the ingest tool the web version of the ingest tool the latest web version of the ingest tool screenshot of the external documentation

My Role

Originally, I was tasked with developing the app following the designer's mockups and specifications (examples above).

I implemented different features like location based audio and semi-interactive map, the entirety of the media UI on recognition, making scene transitions, localization (between English and French), loading of cloud-stored media (photo, video, audio), implementing a cache system, image gallery on information screen, among other things.

As I gained more confidence, I started having more autonomy in the team and in the development pipeline as well as in contributing during meetings. Not only did I work on the main app, I also introduced 2 important initiatives: an ingest tool (which started with a Windows only application and became a web based Flutter application) so that non-tech-savvy members of the team could upload media and content and external documentation of every script in the main app and in the ingest tool. (both pictured above)

Thanks to my now expanded autonomy and confidence, as well as having introduced these extra resources, my role also expanded into a mix of DevOps, Software Development and Product Design.

closest to you section on the home page CTA when near a target interactive map to find locations recognition page during a recognition recognition page with content cards being displayed user editor with its access level and basic information home page of the ingest tool with all of the sites in the 'dev' environment navigation and important links redesigned location editor showing a tooltip and some editable information redesigned pre-content and content list content gallery editor with re-orderable images, general information and the image's respective urls

My Contributions

On August, we launched the app on the Play Store and the App Store for a quiet release, principally for Reisa Levine's class, however we continue working on it to improve it as most as possible. Our goal is to eventually release it publicly and possibly make the structure of the app open-source!

For example, I created the marketing screenshots for the stores, I added a map with all locations (powered by Mapbox), a hamburger menu for additional information (FAQ, Privacy Policy, etc), UI improvements and effects (tablet-specific UI, shadows, animations, etc), Google Analytics and general improvements all around (more speed, better UX, more consistency, etc).

All of that not accounting for the improvements on the ingest tool: cleaner UI, a permission role-based access system, manual edit (and backups) of the locations through JSON files, help links for more information, tooltips everywhere, re-orderable lists for image galleries, rich text support, pre-upload field validation and a whole lot of quality of life improvements! It has become a piece of software on its own and I'm quite proud of what it has become :)

One of the biggest changes I implemented before release was a fully custom storage API to replace Firebase Storage (which was not working well for us) written with Express and hosted on a new Docker server implemented by me. The other, was creation of 2 separate environments for content: a "dev" space where content could be tested without being publicly available and a "prod" space where content was live and public for all.

first team planning board MVP timeline and features sketch buggy UI screenshot buggy camera feed and debug UI

What I Learned & How I Could Be Better

Since this is my first time working on a big team project, there was a lot to learn!

The most important things were:

  • Achieving milestones together is much more rewarding than by myself.
  • However, having everyone in sync and on the same page can be quite the challenge, particularly if everyone has distinct roles.
  • Expressing your thoughts about an idea or concept should be a priority in communicating.
  • Finally, even if it's difficult, patient communication (through planning boards and other tools) is key to success, specially in larger teams.

There are also things that I would've done differently, like focusing less on the tiny little details and more on the big picture. It's mostly for myself, so that I can have healthier work/life balance.