I know braising is different from roasting whatever shut up you're not my dad.To make the app as friendly as possible, I decided to go for a clean but tactile aesthetic. It needed touch controls and real-world objects associated with the cooking process.
It took some extra collaboration with the developers, as well as evangelizing for non-critical but engaging features, but I’m very happy with the end result.
After each step of the prep process, the user is returned to the main menu screen. Here, the icons really helped reinforce what the user had completed and how far they had progresseed. Show, don’t tell.
Since RoastMate is kind of a meat-lovers-only deal, I decided to go all in and reference butcher-shop themes for the UI. I used white to reference butcher paper, red to mimic the kinds of old-timey stamps they’d put on paper-wrapped orders, and dotted dividers to evoke holes punched in the paper as tear marks. I wanted it to feel tangible and referential but clean and spare.
I wanted the interface to be as tactile as possible, so I designed the meat selection screen to be touch-based. Users have to drag one of the select options over the main “input” box and tap the right arrow to submit. I wanted to introduce the touch and drag features as soon as possible so it didn’t feel tacked-on at the end.
This one was fun to make. Forcing the user to input the weight by dragging the dial of a deli scale felt way more fun and personable than just defaulting to a system number dial. I also made the value enlarge and the tray depress as the weight increases. Using the value as a visual shorthand for the meat also let me use the red color literally without being graphic. The more I can use established facets of a design to convey a message, the better.
All these touch features required extra collaboration with the developers. I didn’t want to import a bloated touch-event library, so I worked with the lead dev to create a simple system where dragging across a predefined zone would interpolate a value between two extremes. Once I was able to reference that value in the view, I expressed it in CSS as translate and scale values. As a designer who knows how to implement code concepts, I take every opportunity to work with back-end devs.
Same deal with the doneness dial, which was based off a meat thermometer. I wanted to reference the physical objects associated with cooking and roasting as much as possible. I’m not a fan of apps and interfaces that take warm, physical processes and strip them of life. I think apps are a lot more fun to use when they embrace the human element.
Some early drafts of the meat-selection icons. I really like these and think they add a lot of personality, but we all agreed it was better if the user wasn’t reminded of the animal component in their meal.
