Industrial Design

Digital Design

Miscellaneous















Home
Résumé
Art Portfolio
Blog


Museo

Web Science Development - Group Project
Spring 2024


January - May 2024
5-Person 
Web Development, Brand and UI Design project 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.

 

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, although I did not work on the back-end or database design. 

Research &  Preparation


Museo was inspired by passport visa stamps, the US National Parks passports, and Japanese Eki Stampss. I valued their visual appeal and effective—yet inobtrusive—way of encouraging visits. As a museum enthusiast, I aimed to create a platform that embodies these qualities and promotes museum engagement.

The primary goals of Museo were the following:



Nod to Physical Media
Inspired by the charm of physical stamps and art, I aimed to translate the appeal of tangible media into a digital experience.

    Aesthetically Pleasing Design
     I wanted the project to have visually compelling design that reflects the artistic nature of the featured institutions.

      Encourage Museum-Going
      Museo was designed to incentivize visits to museums, attend exhibits, and foster an appreciation for arts and sciences.

      Pitches & Brand Design

       
      I sketched logo concepts in Procreate and finalized the design in Figma. I also created a brand identity guide to ensure a cohesive visual identity throughout the project. 

      Additionally, I developed two sitemaps: one for the MVP and another for the Ideal Product. This approach provided a clear structure for the project's development.




      Wireframing

       
      I began by sketching wireframes for the home, profile, and landing pages in Procreate. These wireframes laid the foundation for the app’s layout and user flow.


      I then translated these sketches into detailed mockups using Figma, taking in group feedback and refining the design to enhance usability and visual appeal. This process ensured a clear and effective representation of the app’s interface before development.

      Illustrated Materials


      I created stamp illustrations for the art museums, while another team member designed stickers for the science museums. I began with a moodboard of inspiration, then sketched rough drafts by hand and finalized the designs in Procreate.


      Final Product


      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.  While I was less involved in the back-end development, the team's efforts were crucial for the project's overall functionality.


      Conclusion


      Overall, the project was a success, with the team collaborating effectively and using GitHub to manage tasks and keep everyone aligned. Although the final product included fewer features than planned and the friends system was not fully implemented, the front-end simulation provided a glimpse of its potential. I’m pleased with the outcomes of my contributions, including the UI design, stamp creation, and overall visual design.