2019 Dare Mighty Things Hackathon

Ulta’s first Hackathon

This year Ulta teamed up with the Google Cloud Chicago team to create a fun challenge for our first-ever hackathon! The hackathon was part of the Dare Mighty Things conference, if you’re unfamiliar with this great Chicago conference, check out http://daremightythings.co. McDonald’s co-sponsored the event and graciously hosted the hackathon at their Chicago headquarters – my dream of having unfeathered access to their fountain drink machines came to fruition!

We supplied the participants with multiple sample data files, representing our complete product catalog, store inventory, and store details and challenged them to create a voice-powered experience. The winners would receive up to 5 Google Stadia Founder’s Edition package.

Of the 53 teams involved, 15 chose to work on our challenge and we were delighted with the results. Some of the entries included: Google Assitant for Ulta, Product Recommendation for Ulta, Speech Analysis Platform to make Conversation Smarter.

There were also some pretty interesting team names: “Big Brother is Watching,” “I Like Chicken,” “Nuggets,” “Hopper”, “Ultrasist,” “Sushi Sahworma,” “Serving Looks,” “@therealDMI2019,” “ISU Seniors,” “Team Van,” and “Kangaroos”.


Joe Rago kicking things off!
The quick site we threw together to host data files and info

Dynamic images with Scene7 (Adobe Marketing Cloud / Experience Manager)

https://images.ulta.com/is/image?layer=0&size=800,800&color=ffffff&opac=0&layer=1&src=Ulta/2552761&size=656,656&layer=2&src=Ulta/push_banner_pdp_lowstock_V4&size=800,800

Using query params we can instruct Scene7 to construct a dynamic image for us. The above example creates a single composition from two images. You can see things like background color, opacity, image source, and size.

In the above example I’m making the middle layer slight smaller to maintain a safe area/margin. Scene7 will scale from center, but there is also an anchor point option if needed.

Adobe Photoshop CC Extension – Panel (HTML/JavaScript)

Video overview of a Photoshop extension I built to help with some common workflows for our photo studio folks at work. Built entirely in HTML/JavaScript using any code editor of your choice (e.g. not using eclipse and that adobe provided tooling)

Use the resource below to get started. Some key callouts I learned in development:

  • add a debug refresh button to reload your extension’s content when updating html/js file
  • when making changes to the .jsx file, disable/enable the extension to see changes reflected
  • use defaults write com.adobe.CSXS.8 PlayerDebugMode 1 to side load an unsigned extension (make sure you restart/log out/or kill process for changes to take effect)
  • put your extension dir in /Users/$user/Library/Application Support/Adobe/CEP/extensions/ – if this path doesn’t exist you can create it
  • watch out for ruler units – ensure your logic considers the user’s ruler units before doing arithmetic. Some sample code I’ve seen and have used suggest doing:
    1. origRulerUnitPrefs = app.preferences.rulerUnits; //save original
    2. app.preferences.rulerUnits = Units.PIXELS; //set
    3. //do logic
    4. app.preferences.rulerUnits = origRulerUnitPrefs; //restore original

Resources:

https://github.com/Adobe-CEP/Getting-Started-guides/tree/master/Client-side%20Debugging

https://www.adobe.com/content/dam/acom/en/devnet/photoshop/scripting/photoshop-cc-scripting-guide.pdf

Sketch plugin to automatically update image layers using JavaScript

One day a few of my peers on the creative team came to me with a request/challenge – could I build a Sketch plugin that streamlines keeping image assets up-to-date in their comps? After a few iterations, I believe I settled on a solution for them, see the [narrated] video below for details.

  • assign local/remote URLs to image layers
  • data is saved at the document level and persists (see sketch file format for more info about this)
  • upon menu item click, or document open, grab layer object via saved layer ids and update image data with associated URL
  • no need to iterate through layer hierarchies (slow/wasteful), no need to rename layers, no need to keep directories in a specific structure
  • Document Settings – for saving data
  • Actions – for listening for document open, etc.
  • From Native – for getting document from action context

If you have any further questions about this, please reach out!

More info – https://developer.sketch.com

Another plug-in:

Custom Urban Airship Message Center Templates

Key Technologies: HTML, CSS, JavaScript (with jQuery), UA Console

To make a better guest experience I was asked create some new html templates to be used in our app’s message center (powered by Urban Airship). Although this used technologies I already knew, there was a ton of specialized learning to understand how all the pieces fit together.

Some key callouts were: understanding how the html entities needed to be prepared/attributed in the template creation process so that the UA CMS sees them as editable fields, exploring how the UA webview creates a JS bridge and passes a UA object to be used by template at run-time, and how the template itself reaches out to UA for user specific data with the help of data passed in the CMS process.

End result
Original email
Custom editable fields within UA CMS

Ulta Smart Mirror kiosk app built on top of Electron

High-level overview:

  • Informative walk-by video
  • Browse products by featured category, add products to a collection and then text yourself that list
  • Scan products and get information/reviews quickly with the built in UPC scanner
  • Learn about our rewards program and text yourself a link to sign-up
  • Play around with the build in lights and lighting presets
  • Watch how-to tutorials videos
  • Try on virtual lipstick
  • When all else fails, use it as a mirror!
Video overview of features (screen capture over rendering)
Full view. Tap for larger view.

Visualizing lipstick virtually with ARKit! Our interns Summer project.

Key Technologies: Swift, ARKit 2, Cinema 4D

I had the distinct pleasure to help with this year’s intern project – a proof of concept app to test out viewing virtual makeup with augmented reality.

We chose to model a popular Nar’s lipstick that was visually interesting, and had some great colors.

  • Created the mesh and animation sequence in Cinema4D / took accurate measurements to endure model closely matched its real-world counterpart
  • Exported as Collada file
  • Imported into Xcode and converted to SceneKit file
  • Textured in SceneKit
  • Changing the mesh material at runtime to show off different lipstick shades
  • Added scene lights for realistic plane shadows