Motown Mural

Design and development

〰️

Design and development 〰️

Overview

Roles

Lead programmer UX Designer

Time taken

4 months

Problem Statement

Detroit's rich mural art often goes unnoticed, so users need an engaging, interactive experience to encourage them to discover and appreciate these hidden treasures.

Tools

Replit ( HTML, CSS), Figma, ChatGPT, Teachable Machine

Team

Prithvi, Aditi, Johanna, Aalynaice, Masha

Aim

The aim of the Motown Murals project, developed in our Studio 1 course, is to create a treasure hunt-based game app featuring Detroit's murals. This app provides a fun and engaging way to discover the city's most beautiful treasures, encouraging users to explore and appreciate the art while competing with friends by collecting points and sharing their best finds.

Process

Capturing the Essence of Detroit's Murals

With cameras in hand, we ventured through the bustling streets of Detroit, capturing the essence of the city's iconic murals. These visuals sparked the creative spirit that would fuel our app's design.

Collaborative 'Brain Dump' Session

Gathering around a sprawl of papers and digital screens, we delved into an intensive 'Brain Dump.' Hours spent sharing and refining ideas crystallized our vision, distilling the essential features that would make our app not just functional, but remarkable.

Individual Sketches, Collective Vision

Equipped with markers and imagination, each team member sketched out their interpretation of the proposed features. This exercise wasn't just about individual ideas; it was about weaving those ideas into a tapestry of collective vision.

Focused Debates, Agile Development

Our prep work was as much about collaboration as it was about creativity. Engaged in lively debates, we challenged each other on what was truly necessary for the Minimum Viable Product (MVP). This ensured a focused and agile development process.

Strategic Mapping in FigJam

Our digital canvas, FigJam, became a living blueprint of our project. Here, we meticulously outlined each endpoint, ensuring that our coding process would be as efficient as possible, with clear goals and milestones.

Coding with Guidance from ChatGPT

Leveraging the power of ChatGPT, we obtained HTML code that was both robust and efficient. This AI-assisted coding accelerated our development, helping us build with confidence and speed.

Training with Teachable Machine

To empower our app with intelligent features, we used Teachable Machine for model training. This tool simplified the process of creating models that learn and adapt, enabling our app to understand and interact with users in a more personalized way.

Crafting Code on Replit

Our coding journey was orchestrated within the versatile ecosystem of Replit. Here, our team's code came to life, interwoven with the innovative features and functionalities that set our app apart.

Prototype

Outcome

The outcome of the Motown Murals project was a successful proof of concept delivered during Industry Day. Using posters, we created an interactive experience where attendees had fun scanning and searching for murals, showcasing the app's potential and receiving positive feedback.

Throughout the project, I learned the basics of programming and CSS, which became valuable tools for conversing effectively with programmers. Additionally, I gained insights into prioritizing MVP screens for a proof of concept, ensuring a focused and impactful presentation. This hands-on experience was instrumental in developing my skills and understanding of the app development process.