Snkrslktr App Brand / UI Design

Is there anything like a fresh pair of kicks? Forget the power tie… Nothing completes a fly outfit like a pair of the right sneakers, just tight and right.

The “sneakerhead” culture rose in the hazy glory of the 1980s, born of Basketball, songs like the Run DMC classic, “My Adidas” and the legendary Air Jordan brand. Its become a worldwide phenomenon encompassing tens of millions in sales and trade commerce. “SNKRSLKTR” (SNEAKER SELECTOR) is aimed at that target, giving sneakerheads a place to gather, strut, admire, sell and trade.

The brand itself offers an approachable, iconic take on the phenomenon, establishing a relatable visual language for the project. Our colors derive from the pop and simplicity of the original sneakers of the 1980s that birthed the movement while our custom glyphs underscore the sense of fun inherent in the mark. The app interface attempts to strike the balance between something high in utility and rich and layered in visual feel with a strong nod to the concept of the “quantified self.”

“Pop” is the focus in the kicks game and that’s our watchword here as well. Fun!

Shown Here: Mark, Wordmark, Colors, Glyphs, App Screens

– – – – – – – – – – – – – – – –

snkrslktr_app_full_reduced

Whole Foods Market / Instacart Shopping Experience

Delivery is revolutionizing the grocery industry. Instacart is at the forefront of that wave. Whole Foods Market is proud to be a select partner of the online grocery purchase and delivery solution provider.

These designs for a new customized WFM / Instacart Pilot Experience attempts to strike the balance that great e-commerce experiences do between simple, elegant brand-oriented design cues and user-centered design principles. When combined correctly, they create something that at once serves the needs of the brand while creating a system that is clear and seamless for our target audience and their goals. That was what I was going for here. I personally created these designs and have been working with the talented Instacart squad as we march towards fully realizing them through launch and iteration.

This is different than the Online Ordering experience that I have shown on here, as it is primarily focused on grocery and delivery ordering. It is designed to work in-concert with that Online Ordering experience from a design standpoint, however.

Shown Here: Full Desktop Design + Detail Views of the System, Tablet and Phone Versions As Well

– – – – – – – – – – – – – – – –

instacart_full

Midmodernism App Brand / UI Design

I am a huge devotee of the Mid-Century Modern movement. It was a time when design thinking was king, spurring optimism and creativity across the world. New and progressive approaches were everywhere and perhaps at no other time more than that period, did we strive for that perfect balance of utility and artistic form.

Our house is almost entirely vintage MCM (we have a little 70’s and 80s thrown in for good measure) and every piece we have acquired inspires us every day. Speaking from experience, the process of “doing” a house MCM is BIG fun. AND… It all starts with inspiration. That’s the impetus behind this app: “MIDMODERNISM.” These designs show how that focus comes to life in a way that attempts to strike that same balance that the movement attempted to :: utility made beautiful.

The brand itself draws from the clean, modern geometry of the style, using type, placement and form to create the staccato conversation of pattern so prevalent at that time. Our colors and our custom glyphs here are inspired by the period as well, driving home elegance, richness and whimsey in turns. The system itself leverages simplicity to achieve solid user interaction and seamless flow. In all, a fun and inspiring project inspired by an amazing time in design.

Shown Here: Mark, Pattern Sample + Colors + Glyphs + Inspiration Photos, App Screens

– – – – – – – – – – – – – – – –

midmod_app_full

Whole Foods Market “Values Matter 2.0” Experience

One steadfast theme of my work at Whole Foods Market has been evolution. It is the process of listening to both user needs and the ever-changing the needs of the brand and adjusting the product to match that keeps things alive and very well targeted.

Since I had posted the initial development of the Values Matter campaign here, I thought I would post its evolution as well.

Very recently, I led the creative for the first phase of a revamp of the campaign in the digital space along side partners across the marketing organization. I am sharing the new landing experience here. This will be a part of a large rich media push, content effort and storytelling initiative and will change as the campaign grows and progresses.

The design strategy here offers an immersive and cinematic approach to the content. This underscores the broad brushstrokes of the campaign at large while communicating both the richness and tactility of food and the dappled sun and warmth of a sunny summer’s day. I personally created the overall style for this phase of the campaign and have been thrilled to work with talented internal design support for input and to bring it to life.

This is a very bespoke approach, tailored to specific action goals and KPIs as well as the stories we are telling. It will evolve and change as the campaign winds its way through the summer.

– – – – – – – – – – – – – – – –

vm2_full

Whole Foods Market Flagship App

The Whole Foods Market App is a discovery engine. With almost 4000 recipes and the ability to search, filter and add them to a shopping list in addition to cooking guides and other rich content, it’s meant to be a tool to both enable that discovery as well as help users begin to actualize that discovery.

I recently had the wonderful opportunity to lead a massive UX / UI redesign for that flagship app and am leading the process of reworking and augmenting it as we move forward. Whole Foods worked with the team at SapientNitro on the project in addition to our robust internal iOS team. I creative directed the entire project, both managing the agency creative relationship and our internal design resources while partnering with the tech resources leading the development process. As a part of the relaunch of the app, we created our first Android version as well.

The app itself is an immersive look at the recipes, guides and content within, leveraging rich photography, typography and bold color to draw users in. This was a big step forward for the 4 year old app. We are, however, already beginning a process of evolution of elements of this design system to both optimize, capitalize on any shortfalls and create further opportunities for engagement.

This evolution is part of an overarching cycle of rework and augmentation as the app marches forward. This is a key part of the project as it allows us to listen to user feedback and adjust to that feedback, making the app better in a cycle of constant deployment. I am leading the UX/ UI team making the design adjustments on all of those features and improvements moving forward. No project is perfect when launched, nor will it ever be, so this is a vitally important part of the process of continually meeting user need in more meaningful ways.

Shown Here: Sample Screens from iOS App for phone and tablet

– – – – – – – – – – – – – – – –

wfm_app_full

Whole Foods Market Online Ordering Experience

Convenience is the name of the game in retail. Every day, the team I lead attempts to answer this question ::

“What have we enabled users to do in seamless ways today that they couldn’t yesterday?”

That sense of seamless enablement is the impetus behind this relaunch of the Whole Foods Market Online Ordering system. Clean, clear and responsive, this redesign offers users a frictionless experience from desktop to tablet to phone. This is a sterling example of the power of taking a mobile first approach. I led all user interface aspects of this initiative in a very hands-on way and had the pleasure of working with the talented team at XOXCO and our internal tech team as the project came to life.

The rework resulted in a 137% increase in conversion and a 173% increase in revenue YOY. That’s big news.

This is different than the Instacart experience that I have shown on here, as it is primarily focused on in-store ordering, items like catering and prepared foods. It is designed to work in-concert with that Instacart experience from a design standpoint, however.

Shown Here: Full Desktop Design, Tablet and Phone Versions + System Details

– – – – – – – – – – – – – – – –

estore_full

Whole Foods “Values Matter” Digital Experience

For the first time in the 34 year history of the brand, Whole Foods Market has launched a national brand-driven campaign to communicate it’s truly unique value proposition. The traditional aspects of the campaign, (print executions and written tone) were developed directly by our “E Team” (think “C-Suite”) in tandem with an agency partner out of NYC, Partners and Spade. The campaign came down internally to the digital team with only about 4 weeks to launch a fully-integrated digital experience focused on deeper storytelling. A tall order for sure.

As the global Digital CD for the brand, I was a driving force for this phase of the campaign. I was lucky to be an integral part of a talented multi-disciplinary team, from concept through development and launch who were able to all aid in bringing this to life. For my part specifically, I drove concepting around the approach we took, created the visual concepts from which we executed our final launch deliverables, and ended up adjusting and creating many of those final deliverables directly. I also acted as Creative Director on the digital advertising portions of the campaign as well.

Because of our timeline and limited resources, we did also reach out to leverage some agency partners to help with execution and rapid creation of portions of the work, Electric Pulp, Cibo, Acquia and GSD&M were all a part of that group. In some cases, I was even playing “Photoshop Tennis” with the agencies directly, soooo they were solid collaborative partners in the process. Most importantly, our internal creative and development teams were also instrumental in helping with all of this. Big thanks to all of them for their efforts in helping the vision come to life!

The initiative has been LOVED by many audiences and we are currently replacing the main WFM home page with this experience. Though that was not the original plan, it is gratifying to see it so loved. To that end, stay tuned, I will be evolving this to ensure better affordance for users long term.

Here, I will share both the conceptual design prototypes I created at the outset of the initiative for our main landing experience as well as where those ended up in a final state across experiences. This gives a solid visual slice of the conceptual and executional aspects of the work. We are already looking at phase 02 for the experience. I will provide updates as they launch.

– – – – – – – – – – – – – – – –

CONCEPT 01 — Parallax scrolling experience designed to give a textured, layered view of the campaign’s messages and keep users engaged. This concept was not selected in favor of our other concept.

Shown Here: Home and Level 2 Pages at Desktop Resolution

valuesmatter_concept01_full


—–

CONCEPT 02 — A “quilt” of tiled information that allows users to not only explore deeper into our brand stories, but also to participate in the conversation themselves.

Shown Here: Home Page at Desktop Resolution

valuesmatter_concept02_full

—–

THE FINAL EXPERIENCE — You can see how the look and feel evolved. Please visit WHOLEFOODSMARKET.COM to interact with the full responsive experience.

Main Page + Detail:

valuesmatter_final_desktop_full


Tablet and Phone Sizes + Detail

valuesmatter_final_tabletandphone_full

Whole Foods Market Wine Club Digital Brand + Experience

Whole Foods Market devotees already know that we sell some really great wines. Simply put, our curation team on that front is truly peerless. We’ve created a new WFM Wine Club subscription experience to capitalize on that unique expertise and to promote that offering, we have built a brand and responsive digital presence that communicates essence of the club is all about.

I acted as the design lead on the project from brand inception through digital design. I am telling that story here, showing both my design for the sub-brand’s mark and color palette as well as a bit of the process of how I brought the digital side of the project through concept to approval.

On that process :: I am a firm believer in taking a very Agile approach to the digital space. So often however, those agile principles are only applied to the development side of the equation. That’s a mistake, in my humble opinion. Agility can be applied through the creative concepting process as well, standing up multiple options that show the possibilities and allow for rapid iteration towards build. On this project, I took stakeholders through a style-tiling process, giving that balance of a solid view of potential futures while allowing us to iterate flexibly and quickly on the march to approval. That ended up being a pretty short march in this case. We were ready to head into full production design in just two meetings. That’s the process at its best!

Shown Here: Mark + Palette, Style Tiles and Final Site Home Design

– – – – – – – – – – – – – – – –

wineclub_full

STL Symphony Save Powell Hall Campaign

The Boston Symphony tweets: “Ha. Ha. Amazing. :-)”

The Riverfront Times says: “Save Powell Hall: Concert Marketing Doesn’t Get Any Better Than This”

From STLToday: “SLSO begs public: Save Powell Hall!”

An LA arts and music blog crows: “…By far, the best orchestral marketing and advertising effort I’ve seen lately — probably ever — is St. Louis Symphony’s “Save Powell Hall” campaign.”

STLMag.com states: If we don’t take action now, Powell Hall is going to explode.

And… The St. Louis Business Journal, too.

I love creating disruptive marketing solutions. I feel it’s been a hallmark of my career. This very recent campaign for the St. Louis Symphony was a wonderfully fun example of that.

I acted as the concept, design and copywriting lead for the campaign, creating the initial idea, flowing it out to a signature style for the campaign, penning copy throughout and creative directing any other moving parts with the Symphony’s internal team and contract specialists. The campaign featured postering, an engaging website that acted as a hub for the campaign, outdoor applications (both for billboards and metro transit stops) and a “viral-style” video shot by Brant Hadfield with SFX and production by Terry Coolidge.

All of the coverage for the campaign was gratifying to see, but the fact that sales were up was the real “reward,” here. In all, a fun and engaging solution for a gem of the nation’s arts landscape.

Shown Here: Campaign Video, Mark Design, Sample Poster & Wheatpasting, Website, Sample Outdoor Applications and Poster Concept

– – – – – – – – – – – – – – – –

scythian_savepowell_reduced

The Goddard School Video Microsite

This microsite for The Goddard School is a wonderful example of a laser-targeted solution for the digital space that puts users’ wants and needs directly at its center. Representing Phase II of a brand development / launch that I was very pleased to be an instrumental part of, this project is also a great example of how brands can come to life in very innovative and visceral ways.

Here’s how it works ::

Users select what is most important to them in an early childhood education solution for their child by clicking boxes next to qualities inherent in the Goddard experience. The qualities are all represented by branded iconography, both underscoring the brand style itself, but also encouraging users to interact and play with the intuitive interface. When users submit their choices, the system auto-stitches together a custom video showing them the true Goddard School experience based on their input. Each custom video is organized into chapters showing the qualities selected and featuring authentic video of real Goddard parents and teachers speaking to their real-world experiences. After each video users are then prompted to sign up for their own tour of a local Goddard School location. Tours are the primary conversion point for the schools and our go-to call-to-action for all outreach. Users were able to perform all tour scheduling functions on the site directly. The site is also responsive, resizing and adjusting the experience for the range of mobile screen sizes.

This was my concept and I was the design lead on the project. I also acted as hands-on creative director for the project as it moved into production and my ever-talented UPBrand team of creatives and video editors got involved.

Perhaps the best feedback one can receive for a project like this is that it’s working in spades for the client. The conversion numbers have been great here. A recent potential customer sent a follow up email to his local school after experiencing the site that read :: “If your school is half as impressive as your microsite, I know I’ll be sending my children to The Goddard School.”

PS — I can’t share a link to the site here as it is a private direct-marketing tool for each school.

Shown Here: Screens / Interaction Paradigm and Detail Images

– – – – – – – – – – – – – – – –

goddard_microsite_full