I'm most intrigued by the merging of form and function unique to user interface design. I developed an application meant to accompany users during museum visits for a UX course. The app allows users to quickly snap a photo of their favorite works to immediately access quick information on a given piece. I outline each step of the UX process, from mind mapping and user personas to wireframes and final mockups.
The splash page of motif, a museum companion application I developed, in its natural habitat at the Broad Museum.
In this initial mind map, I explored the possible functions and uses of a museum application and pocket guide.
I then conducted user research by asking friends and acquaintances with varying interest in art and tech savviness to complete a Google Form. The qualitative and quantitative research proved that there was definitely a space in the museum app market for motif.
These user personas represent types of people most likely to use a museum application, from art aficionados to the selfie-obsessed. Their backgrounds, interest in art and quotes highlight user motivations and desires.
The user personas are then traced in user scenarios. Each moment of opportunity in the scenarios is marked with a lightbulb.
The app map lays out all the possible views a user can navigate to within the application. The user flows outline possible page-to-page experiences of any given viewer.
These are wireframes after a few iterations and rounds of feedback. I used Balsamiq, which was a great way for me to focus on function over form.
(1) This is the introductory loading page, which would ideally rotate through a few different notable pieces with each loading.
(2) The app immediately opens to a camera to allow the user to immediately scan the piece-in-question. Users can then accept or retake the image.
(3) The art explanation view features collapsable sections of interest, including essential facts, timeline, more about the artist, what they're known for, similar works nearby, and general motifs/tags.
(4) The scans + favorites tabs allow users to track their scanning history, along with which pieces they would like to quickly reference in the future by "favoriting" them.
(5) The motifs + discover tabs helps users understand their preferences and find new works they'd like. In motifs, users can see a concise digest of their scanning history: location, artist, movement and motif. Under discover, the application suggests new works for you to learn about by works, artists, and museums.
The splash and introductory page are simple, memorable, and clue the user in to the app's uses. All the UI's were made using Sketch.
Once a painting has been scanned, a user is immediate directed to pertinent, digestible information for use while at a museum. Sections include Need-to-Know, Timeline, About the Artist, Known For, Similar Work Nearby, and Motifs (tags). I used two portraits of women for the mockups, Mona Lisa and Green Stripe.
These are mockups of the more polished final views for the Scans + Favorites page and Motifs + Discover page.
These are the icons I developed for motif's UI using Illustrator. They're all simple, geometric, and have a thin outline treatment.
I did research to come up with the calculation for the output. I designed the burnt logo and used the typefaces VT323 and Anonymous Pro. Each range of results is shown with a different gradient background. I wanted to use colors that evoke the sun, skin, and potentially getting burned. I wanted burnt to be practical, useful, and a little cheeky.
As part of my Advanced Web Design course at CalArts, we were assigned to make a fake publication with 2 webpages for interviews or profiles. This was to learn how to have one CSS document apply to multiple HTML files.
For my interviews, I selected one from V Man featuring Frank Ocean interviewing Timothée Chalamet, and a Pitchfork piece on Vince Staples. Both of these interviews were some of my favorite in recent memory—they both feature great artists that I admire. Both interviews can be found here and here.
Each interview utilizes responsive design. I used Georgia for the navigation, headlines, and body text, and used Myanmar for the articulate logo, a publication I made up for the project.
advanced web design
As part of my Advanced Web Design course at CalArts, I coded all my projects from scratch, including this homepage that houses all my projects from the semester. All of these projects are live to view here. I intentionally chose a warm color palette to contrast with my typically cooler color choices, and used my favorite web-safe serif typeface, Georgia (which is the same typeface used for the body copy on this site).
As part of my Advanced Web Design course at CalArts, I had an assignment to help us learn how to use media queries in CSS by making fun, pithy web pages that somehow changed when the window is resized.
In adam, I took the famous Creation of Adam hands by Michelangelo and asked the user to “create adam.” By dragging the window until the fingers touch, a glowing orb and flowing water appear in the background. I love incorporating art historical references in my work. See it here.
I T ‘ S L I T features lo-fi graphics like the candle emoji and a pixelated match gif to let the user drag the window to light the candle. Figuring out how to use a gradient for the background was particularly trying but rewarding. See it here.
In squished, the user drags the window and slowly squishes the circle as it reacts in further of a panic. Fun but a little dark. See it here.
As part of an old new years resolution, I've made a playlist every month for the last 3 years in an attempt to stay current and always push myself to go beyond my comfort tracks and find new music. 3 years later, I have 36 playlists made up of 100+ songs that I happened to be into that month, which typically includes oldies, the newest tracks, and everything in between. Each of these playlists has a color or gradient cover that I selected for the mood of the month.
I also make playlists for moods or events, all of which also have covers that I design. The designs have become increasingly more complex; this year, I’ll be using my favorite art historical paintings that I think correspond to each month. My Spotify account can be found under cnavv.