web designer and developer

Meater

April 2016

"Meater is the first truly wireless smart meat thermometer. Along with the Meater app, it will help you cook the juiciest steak, chicken, turkey, fish or other meats perfectly every time for every occasion." - Meater

I worked with the Meater team and their BigCommerce platform to prepare for their website launch by building out and update responsive content, optimizing the site, and troublshooting issues.

I worked directly with a co-founder, project manager and a designer to build out and validate builds as well as to ensure we are on schedule.

Examples of the things I worked on includes: adding/updating content, managing navigations, ajusting responsive behaviors such as placement and sizing, building out anchor links to animate-scroll down to the correct section, creating hover states for icons and links (like the growing border), and building small side featuers like the pulsing down arrow to invite the user to view content further down the page. Below are examples of the multiple carousels I helped on developing.

Visit the Site

desktop:

  • Navigate through the different slides of the carousel using the icons
  • Carousel is also swipeable. Swiping through the slides will also auto select the corresponding icon

mobile:

  • Carousel works in a similar way as desktop. It can either be swipped between or the icons can be triggered to go to the correct section.
  • Same background image is clipped via CSS and used for mobile

desktop:

  • Carousel shows preview of next and previous slides, partially whited out. In the center displays a mobile device with the clear view of the app ui.
  • Left and right arrows are used to navidate through the different app ui screens. It will grey out if there is no more prev or next slides

mobile:

  • On mobile, the desktop carousel is simplified, without previews of the next and previous slides
  • A user can swipe between slides or use the navigation arrows

desktop:

  • Circular icons are used to navigate between the different slides
  • When hovered, the circular icon's background turns red
  • When clicked, the imagery in the first column updates as well as the description in the right most column

mobile:

  • The mobile carousel is drastically different from desktop-- the left most column is hidden, and the navigation icons are simplified to show just the icons and are positioned across the top of the section
  • The right most column is displayed full width below the navigation icons. A user can swipe to go between the slides, or they can utilized the icons and/or navigation arrows.

desktop:

  • This carousel displays the wireless features of Meater
  • A user can navigate through the sldies using the tabs in the grey area above
  • When the tabs are engaged, the corresponding slide appears and the imagery at the bottom of the description fades in from left to right. This occurs every time the slide is triggered.

mobile:

  • On mobile, this carousel appears in a similar format as desktop, with the exception that only the tab of the sldie you are on is visible in the grey area. There are right and left arrows to navigate to the previous and next slides. The slides can also be swipped between.
  • Like desktop, each time a user views a slide, the imagery fades in from left to right.