Museo
Webapp for tracking museum visits with digital stamps.
Museo is a web app for tracking museum visits with digital stamps, offering a modern twist on the charm of physical media.It allows users to collect and view hand-drawn stamps from various museums, track their visits, and keep their museum experiences organized and exciting.
Period: January - May 2024
Role: Brand and UI Designer, Front-End Developer
Programs: Figma, HTML, CSS, React.JS, Procreate
Advisor: Brian Callahan
Brief
Given only the requirement to utilize the MERN technology stack (MongoDB, Express.js, Node.js, and React), this was an open-ended web development project.
My Role
As the lead designer for the Museo project, I was responsible for the brand design, creating wireframes and prototypes, and conceptualizing the product. I made all key decisions regarding the UI design and assisted with front-end coding.
Research & Definition
Concept Research
Looking into current-day problems our project could address, I discovered that post-pandemic, museum attendance has been declining. Brainstorming playful ways to incentivise museum attendance, and inspired by the US National Parks passports and Japanese Eki Stamps, I pitched the concept of a Museum Stampbook.
Design Goals
As the project’s lead designer, I defined a set of goals for the project design:
Nod to Physical Media: Translate the charm of tangible media to a digital medium.
Playful & Strong Visual Design: The webapp should reflect the artistic nature of the featured institutions.
Keep It Simple: Intended to be used by all different age groups, the webapp shouldn’t be overcomplicated or hard to learn.
Ideation
Concept Research
To create a clear structure for the project's scope, I developed a Minimum Viable Product and Ideal Product sitemap.
Wireframe
I then sketched wireframes for the home, profile, and landing pages in Procreate to lay the foundation for the app’s layout and user flow.
Brand Design
To address the 3rd design goal, I created a basic visual identity guide, sketching logo concepts in Procreate and finalized the design in Figma. This helped to ensure stylistic cohesivity throughout the project.
Prototyping
Mockups
I then translated these sketches into detailed mockups using Figma, regularly taking in group feedback to inform the process. This ensured a clear and effective representation of the app’s interface before development.
Illustrations
I created stamp illustrations for the art museums, while another team member tackled the science museums. I began with a moodboard, then sketched rough drafts by hand and finalized the designs in Procreate.
Prototyping
We followed an iterative development process, incorporating feedback and critique throughout. I focused on the front-end, creating the landing page, profile page, and log-in page using React.JS, HTML, and CSS. The team adhered closely to the mockups, ensuring the design vision was realized. I was less involved in the back-end development, and the team's efforts were crucial for the project's overall functionality.
