The Grind Cafe was a self-initiated project that I used to practice UI design and product photography. I felt I had less experience in these fields than I wanted. However, I needed a brand to work with, first, and I really wanted to push myself to create something noticeably different than I had in the past.

To do this, I put myself in the position of a high-end cafe hoping to establish their brand and set up mobile ordering early in their lifespan. I wanted to create a quiet confidence for the brand, without feeling too high-class to even walk into. I set this tone first with the typography. When the type needed to be big, I wanted it to be softened, but not immature. When it needed to be smaller, I wanted it to be clear and confident. The combination of a soft serif face and stoic, legible sans. From here, I noticed that the lowercase "g" of the headline font (Latte) could be altered to create a pleasant, organic form, using imagery of steam rising from a hot cup of your preferred beverage.

Finally, we arrived at the color palette. Here, I really wanted to bring in more of a welcoming feeling, being concerned that the heavy use of uppercase letters in the typography would feel a little too intimidating. For this, I started with warm, earthy tones before shifting them more towards a pale rose. This shift helped stand out from the widely-seen brown-themed coffee shop, as well as shifting the focus away from the ingredients to make room for a focus on the prepared beverages themselves.

With the branding in place, I moved on to the mobile app, which I was far less confident in. However, I did have a handful of gripes with other mobile ordering apps that I was hoping to avoid with The Grind.

Primarily, I wanted to be sure that editing an order while it was in your cart was as simple as possible. Too often, I would have to go through the entire process. For this, I decided that an overlay to edit the item would keep them close to completing their checkout when they just want to change one thing about their item. If a user wants to change the item entirely, they can simply remove it from their cart to add another.

I also wanted to be sure that navigating through the menu offerings didn't feel claustrophobic. To phrase this another way, I wanted users to be able to easily swap between categories if they realized they wanted something different than they had originally ordered. One example where I addressed this can be found in the item customization screen. Here, I made sure that each beverage had the option to swap between multiple versions of it (for example, hot, iced, and frozen, if applicable) right on the item's page. Users would be able to change their beverage type right before they added it to their order.

Beyond these specific items, I really learned so much about making decisions and compromises throughout the design. Balancing simplification for the user experience without interfering with more intricate actions being accessible was a constant challenge throughout the project. Decisions like what to include in the bottom navigation, how users would customize their items and more often required a couple of days to think on before reaching a final decision.

The product shots were done in conjunction with the design of the mobile app, as they were needed for several key pages of the app. As mentioned in the branding, I wanted to be sure that there was a focus placed on the prepared beverages more so than the ingredients. We had already done this by avoiding a color palette that mirrored the earthy tones of coffee beans. By focusing the photography on the beverages themselves, rather than any associated ingredients, we could reinforce this focus.

For how the photography was approached, I wanted to focus on making the drinks feel like they were right in front of you, but still looking as good as they would taste. To do this, I used angles that showed the drinks sitting on a solid surface through realistic cast shadows showing the surface the beverages were resting on. For them to look as pristine as possible, I used a variety of image stacking techniques. First, I would take multiple photos from the same angle in the one lighting setup, stacking these in a Mean stacking mode to reduce noise as much as possible. Then, I would alter the lighting setup slightly, doing the same, until I had about 4-5 different noise-reduced photos with different lighting. I would then stack these images, allowing me to mask in lighting based on what looked best for specific parts of the drink. This allowed me to really dial in specific parts of the drink where lighting proved tricky, like the glass handles, the bottoms of glasses, and the spots where the beverage would meet the top of the glass.

These thought processes really helped the product photos work well with the context of the mobile app. I was able to show the products in a way that allowed them to stand confidently on their own. This promoted simplified layouts on the order screens while retaining a high-quality feel to the overall experience. The photos work together with the mobile app and the rest of the branding to reinforce a quiet, confident, and warming brand voice.