We’re a team of creative minds, passionate about visual design, user experience, branding, illustration, and everything in-between. We craft fun and innovative experiences for tomorrow’s Walmart shopper.
Based on a hackday award winning (and patent pending) project, ‘Amazing on a Budget: College’ is a powerful new way for students and their parents to shop for everything they need going back to college. The mini-site launched as part of the FY14 Back to College campaign.
This project called for extensive sketching and prototyping, as the interaction concepts were so novel. Essentially, customers are using a wizard to select the types of products they need and attributes such as price and theme, then browsing matching products and tweaking their budget to make a custom bundle.
We explored several approaches to the customization, with varying levels of assistance and order. When wireframes were matured enough, we made them into clickable prototypes and tested them - first internally with colleagues, then formally with the User Research team.
Since our visual design phase started before the BTC campaign existed, we created our own teen-appropriate palette and used diagonals and engaging photography to make the site friendly and appealing.
These early designs led users quickly into solutions which helped them pick out product categories.
The Site Merchandising team wanted more exposure for the product categories they were creating, so for this iteration, we created a three-step process to guide users through the customization of their checklist.
At this point, we also incorporated branding done by the Creative dept. and some visual concepts from our exploratory work on the Walmart Tablet site project.
After two rounds of user testing, it was clear that the three-step process of checklist customization was too complicated for the landing page, and that we needed to re-prioritize the curated solutions. The eventual layout was much closer to our first iteration, and stylishly laid out a number of routes for users, making space for an introductory video at the top.
We made the video ourselves in the space of two weeks. This involved sketching storyboards, writing multiple script concepts, illustrating dozens of products, keyframe-animating in After Effects, then ultimately using CSS3/HTML5/jQuery to code a bespoke browser-powered animation.
This flagship project of the Innovations team showcases Walmart products, curated by merchant teams and crowd-sourced by Pinterest users. Users can discover amazing products through a bold and editorial-styled mini-site.
The brief from the Innovations team was to make product discovery engaging and delightful. The design was meant to feel like an interactive magazine so utilized bold typography and isolated photography. The products were sorted into a handful of channels which were carefully art directed.
The first version was commercially successful so we were tasked with expanding the site, allowing for more channel types, and flexibility featuring campaigns. We designed a versatile grid layout which supported multiple types of navigation on the landing page, and an organic product presentation on channel pages.
This phase of the project aimed to apply the Spark Studio to touch devices, starting with the iPad. While the existing site was tweaked to be responsive, we started to explore a dramatically different approach. In a few short weeks, we created an exciting set of concept designs and animations that set out our vision.
We started out with a brainstorming session, sketching flows and UI concepts on whiteboards and paper. We then iterated and fleshed out these ideas in Illustrator and Fireworks, and quickly got to the point where we needed a third and fourth dimension. We used 3D animation software, and a mix of hand-modelled and procedurally generated scenes to bring our ideas to life.
We then worked with an external engineering partner to make our concepts a reality, letting users explore the product channels in a 3D space using basic gestures and UI principles.
Mobile UI design
Social Calendar needed a native iPhone application, so we created a beautifully simple and engaging interface, a sub-brand, and a visual design language that deliberately takes Social Calendar in a new direction.
Our first task was to come up with a name - something more distinct than Social Calendar, and fitting for the demographic. After we researched the competition and brainstormed ideas, we settled on Greetings. The name is easy to understand and has resonance with the target market, women aged 35-50, who most frequently send greeting cards to their loved ones.
Our early brand exploration focused on monograms, as it was extremely difficult to represent the diversity of occasions and the functionality of the app with an illustrated approach. The final logotype appears deceptively simple, yet subtly infers postmarks and physical greeting cards.
We wanted the app to be intuitive and streamlined, showing a feed of friends’ birthdays and events that you might want to create greetings for. These initial UI concepts show the range we explored, going from minimal and clean to textured, with simulated paper surfaces.
The final app is easy for anyone to use, and simply shows events and associated activity with minimal distractions. There’s subtle details like soft shadows and interaction cues, to delight and assist users in a sophisticated way.
Replacing a difficult to use form in the auto section of Walmart.com with an intuitive and cleanly designed multi-step finder.
The first challenge with branding this new tool, was to make it appealing to everyone, shedding overtly masculine imagery. Our brand concepts use graphic conventions from auto marques with primary brand colors and a custom version of Myriad Pro - tweaked to smoothe some of the quirks in the lettering.
While earlier treatments used obvious depth and texture to life the logo off the page, the final version is flat, implying the marque structure and depth. This aligns more with Walmart’s increasingly straightforward visual language, while still forming a distinct identity.
This concept from an initial round of designs shows how we extended the early logo’s physicality, with pronounced depth and a rounded shape. Large photography and bold color blocking contrasts with subtle shading and the white background.
We softened the visual design as we developed the concept, ensuring that it was appealing to our target demographic, and perceived as easy to use. White space was increased and we streamlined the flow to further simplify the process.
We went through several iterations for the reverse-search and the progress indicator. Making sure that it provided clear instruction and feedback, and that user input was always as easy as possible.
The final UI design matches the flatter treatment of the final logo, with lighter structure and shading to keep users focused on the process. The heading type and element colors have a lot of common ground with existing walmart.com conventions but are subtly refined and expanded to aid usability on touch devices and to suit the spacious visual design.
The resulting design is unmistakably part of the Walmart brand, but emphasises characteristics that appeal to the target audience: it’s clean, friendly and modern.
After a successful in-store trial of interactive kiosks, the Smart Store team wanted to try a more tailored approach for the toy department.
These rudimentary wireframes
Our creative starting point was to think of the tablet as a kind of arcade cabinet, a physical object containing a custom interface. A lot of our early exploration dealt with simulated depth and appropriating that visual language.
Two competing concepts were developed for testing: a ‘wheel of fortune’ concept which spun the categories around, and a more traditional grid layout with category icons.
Testing around the office and in the store showed that the familiar grid of icons was more widely preferred and more intuitive. So our focus then shifted to branding and theming the interface, making it recognisably Walmart, but also suitable for its positioning in-store and the target market.
We created a cartoonish, semi-flat style which allowed for considerable license as we treated deliberately conventional UI elements. Mixing exaggerated depth with flat colors and a vibrant kid-friendly palette gave us a strong foundation to build a cohesive interface.
Trying to make the tablet more appealing to kids, we created a family of monster characters. Monsters are conveniently gender-neutral, and could be colored with the range of our palette, making integration seamless.
Although it was deemed too extravagant for shipping in final product, we animated the category page headings with the monster characters.
The final product realises the original arcade cabinet idea, but with a cartoony twist. The exterior ‘shroud’ comprises laser-cut plastic and a vinyl-printed skin, to mask the consumer-grade tablet behind.
With very little time, we were tasked with completely removing the holidays theming from the site. It was also a chance to shift the focus, incorporating learnings from the holiday period. The objective was to build a robust identity and a year-round destination for gifting, that was still clearly part of the Walmart brand.
Our objective was to create a site that felt like part of Walmart, but which reflected the fun aspects of gift-giving. The visual language trends toward colorful and bold typography, speaking directly to the user. Also, breaking out of the grid with photography and other page elements, gives the design a more modern feel.
With little in the way of time or resources to replace all the holidays theming, we booked the photo studio and set up a shoot with one day notice. We collected props ourselves, from our homes and from various shops in the bay area.
One the day of the shoot, we spent the entire morning wrapping these objects, chosen because of their distinctive shapes. We then worked with the photographer and stylists to compose an ensemble shot with all the props, plus some separate shots for feature graphic use.
We illustrated dozens of cover images by hand, giving these curated gift collections a personal touch, and a tangible visual theme. These shops were an important part of the vendor co-op relationship. When it became clear that the curation team was outpacing our production, we worked with engineers to create an algorithmic template which is still used.
Site-wide elements like the header and product grids are purposefully minimal, allowing for rich colors and graphic elements in different areas of the site. Landing pages are full-bleed and incorporate our custom photography in some places, and 3D-modeled scenes in others.
America’s Gift Headquarters
Powered by Social Genome, Walmart Gifts was created to help customers find the perfect gifts for their friends and family. The site launched as America’s Gift Headquarters in late 2012, working with The Martin Agency to build an online centerpiece of the holidays campaign.
These early sketches show how we brainstormed ways to include TMA’s mini-games and offer kids and their parents a compelling holidays shopping experience. The wishland idea was further developed by the agency, while we built out the core site.
We had a rigid playbook of assets and design themes, which it took some time to reconcile with our early UI designs. Once we’d implemented the color palette and illustrated elements, we then had to accommodate the new campaign content from TMA.
The launched site was bold and colorful, and deeply integrated into the holidays campaign. We used the elves to add more character to the page designs.
Shopycat was one of the first @WalmartLabs projects - a Facebook application leveraging our Social Genome technology. The app recommended gifts based on your friends’ interests and Facebook activity.
These rudimentary wireframes explored different ways of organising our gift recommendations and giftable occasions. A major challenge was figuring out how to explain why we recommended an item, bringing in social proof and graphical representations of what Social Genome was doing behind the scenes.
Shopycat needed a face and a personality, so one of our first tasks was to design the cat character for use in the logo and elsewhere as a mascot. These illustrations show some of that process, finding ways to make the cat friendly and gender-neutral.
When the product was live, we made the most of having a mascot, modifying the cat into a cupid character for Valentines and as a mom for mother’s day, along with Shopykittens.
Shopycat’s marketing was distinct from the Bentonville-initiated seasonal campaigns so we had license to tailor the seasonal messaging to our particular style and tone of voice.
Marketing collateral that we designed included email blasts, display ad units, landing pages and promotional units.
For Mother’s Day, we also created an alternative campaign, which was edgier and had more viral potential than our main campaign messaging (never released). The ‘Yo Mamma’ game was self-initiated, and built with the help of the Gifting team.
The first sets of wireframes
Classrooms by Walmart
Mlkshk artisan kogi post-ironic.
Classrooms was already a complex product when we got involved, and it was our job to add more advanced functionality and a completely new area of the site - the marketplace. We intensively wireframed, and prototyped the key flows to the degree that they could be tested.
The prototypes ended up being hand-coded so we could get a feel more complex interactions like dragging and dropping items. After several iterations and two rounds of testing, we had a process that was intuitive for new users and extremely powerful.
Our first work on this project was a quick re-imagining of the homepage which was originally built by an agency. Our redesign established a bold look and feel, and used concise, illustrated messaging to quickly explain the concept to new users.
This design laid the foundation for our subsequent visual design work - it’s considerably more visual than the original and has a more playful tone.
For the full site’s redesign, we experimented further with making a strong impression on landing, various art directions and layouts.
An important realisation was how well icons and pictograms worked alongside photography, and the off-white/paper background colour that contrasts with our deliberately diverse palette.
We designed the site to be fully responsive, and due to the engineering team’s limited resources, actually built the page templates and responsive behavior.
We introduced a new font into the mix - Archer has been used on Back to School packaging but never online in Walmart campaigns or on the site. We used it as a secondary display font to create a more academic feel and to contrast with the heavier weights of Myriad Pro.
We also created a set of illustrations to represent the generic store sections, and to breathe life into the palette. These flat-style illustrations are a microcosm of the broader design concept - bold colors with carefully applied shadows to create limited depth.