Archive

Role // Personal Project
Duration // Mar 2023
Tools // Figma              
I developed a mobile app UI+prototype for Archive: an app where art lovers can take pictures of any street-art and receive info about the art’s artist, location, and backstory. 

Ideation

Design Inspiration

To improve my wire-framing, prototyping, and design thinking skills, I wanted to develop a product that not only solves a problem I specifically face, but would also solve a problem a general user may face.

Looking through my camera roll, I found photos I’d taken of intriguing street-art in LA, Berkeley, etc. I realized it would take a lot of effort to learn about the art’s background. And, there are definitely art lovers out there just as curious about art they stumble across. Thus, I resolved to create a mobile street-art Archive.

At its core, my product represented exploration and preservation - very similar to the principles of museums. However, while museums focuses on art of the past (or near past), my product focuses on street-art: art that’s living and breathing on the sidewalks and buildings of today.

Thus, I took inspiration from modern art museums for color schemes, and emphasized modern through font choices (Futura, Helvetica) and a clean minimal interface. 
ps: this pic is from my friend melissa when we went to sf chinatown together - i can’t find my pic :(

Initial Sketches

In my first sketches, I drew out a basic interface and the main interaction of Archive (taking photo  street-art info). I focused more on making sure I conveyed my product’s main theme through its visual design. 

In my fully-fleshed out final sketch, I made the interface more minimal with less buttons. I also condensed the interactions so it’d be easy for me to follow and implement within Figma. The dark bolded arrows highlight the main user interactions. 
Final Design: emphasizing interactions
Early Sketches: brainstorming

The Mockup

Loading + Home Page
Camera Page
Profile + Settings Page


Final Product





Try out the Figma prototype here!


What I Learned
1. More Figma prototyping features!

2. Product ideas can be simple! We are only human after all :)

3. Aesthetic and functional design choices should always connect directly with the core values of the product.
Next Steps
1. Add more interactive features to the profile/settings page.

2. Convert my mockup into code to create a tangible product!