RoastMate is a mobile app commissioned by the Australian Meat and Livestock Association (MLA) that helps you create delicious, perfectly-cooked roasts every time.
If you’re like me, the thought of figuring out how long and how hot you should cook a 2.65 kilo rack of lamb to get a medium-rare chop makes you want to eat peanut butter and jelly sandwiches for the rest of your life. MLA commissioned this app as a friendly, no-pressure instruction manual to help people feel confident serving new cuts of beef, lamb, and veal for dinner.
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.
When I made this site, I decided it was the perfect time to learn CSS Grid. At the time of me writing this, 0ctober 2nd, 2018, CSS Grid only has partial support in IE 11.
Since I intend for this site to be an example of what I can do, and not a comprehensive commercial product, I’m ok with that sacrifice in usability, especially since signs point to IE11 eventually adopting full CSS Grid support.
So with that said, I’d recommend using a different browser, such as Microsoft Edge. If you got cursed by a witch or something and have to use IE, you can contact me at email@example.com or you can check out my
Linkedin, Dribbble, or Instagram.