theonlymariatheonlymaria

Whirlpool Connect to Care App

ROLE: UI/UX

I was part of the pitch team and responsible for the design of the addition of the “Connect to Care” section of the Whirlpool Smart Appliances app. Connect to Care asks consumers to donate money to Habitat for Humanity. Each time they do a load of laundry with Whirlpool Smart Appliances a small donation is made to those in need. The idea for this app was based on the fact that in America, laundry is still something not everyone can afford. I worked along side Senior Product Designer. You can download the app here.

The Approach: Focus on the goal

Although our brief indicated to just add a pop up after a load of laundry was initiated asking users if they wanted to donate to Habitat for Humanity, we decided to develop the functionality further in order to accomplish the goal. We were thrilled by the opportunity to create something more meaningful.

The Framework: Setting the design direction

Through sketching and storyboarding, I generated ideas about the arrangement of UI, functional and data elements, and interactive behaviors.

Detailed Design: Introducing...Connect to Care

The look and feel stayed consistent to what was being designed for the campaign. The main screen was designed to allow users to get a detailed overview of what Connect to Care is. In the final design Connect to Care was a tab always visible for users.

Screen Shot 2017-01-22 at 5.42.50 PM.png

Over $100,000 were donated in the first 3 months.

Intercom Blog Redesign

ROLE: UI, UX, Visual Design.

I was responsible for defining the information architecture, interaction pattern and visual language for the blog. The final deliverables included: wireframes, UI mockups, presentations and visual design guide.

Project goal: Intercom wanted to introduce a new design for their blog that would showcase their podcast, books, their world tour: Inside Intercom and weekly posts from employees. The goals for the blog redesign included: easy discoverability of articles within different verticals, increase newsletter sign ups, ability to promote Intercom product features, books, and podcasts and easy consumption of material being published.

You can see the live blog here.

Issues with the old design:

Lack of visual hierarchy: The structure of the page lacked visual hierarchy —from the size of the navigation banner to the hero image, buttons, blurbs and icons. The lack of hierarchy caused users to consume less articles —many would not scroll past the headline of the third article.

Navigation: Upon scroll, the user no longer had access to the navigation, without going all the way back up to the top. Also, when reading an article, there was no easy way to navigate to other verticals.

Load time: The lack of pagination caused articles to load very slowly, therefore causing users to drop off.

I designed the flow and ui of the new Intercom blog. I explored various homepage layouts and article pages that would make it easier for the user to discover content from different verticals. The top navigation remains sticky throughout the experience allowing the user to quickly jump from one category to the next. The use of never ending scrolling also allowed the user to continue reading another article when reaching the end of one. Overall, there was a sharp focus on how readers navigate a blog and what’s important to them. You’ll see things like estimated reading, viewing and listening times and progress bars as you read through articles. Lastly, we wanted the blog to look and feel like a magazine. The content being published is more akin to a high-quality editorial publication, rather than another run of the mill corporate blog.

I paid close attention to hierarchy, typography and illustration in order to create a connected and organized experience. To increase visual impact and give the homepage a sharper point of view, I focused on one lead article, followed by secondary and tertiary articles. To build out this hierarchy, it was essential to have a solid grid in place to form the backbone of the design and give pages their structure.

The redesign creates hierarchy within articles, allows users to consume more articles at once, and allocates space for Intercom product branding. The sticky nav allows users to quickly navigate from one vertical to the next. Having "newsletter signup CTA" in the sticky nav bar also caused increase sign ups. Lastly, the use of pagination allowed articles to load at a much faster pace. Visit the blog here.

HomePage_0009_active categories podcast article mouse over.jpg

Shuddle Branding, Website and UI Design

ROLE: BRAND, ART DIRECTION, UI

Designed and produced print, web and tv material to create awareness for Shuddle. Shuddle is a ride share service for kids in the bay area. Below is a product video created to help inform potential new customers about the service.

Shuddle Explainer Video

I worked on the UI and overall design of the Shuddle website. You can view the live site here.

Below are more pages from the website I designed. You can view the live site here.

Below are screens that I designed within the app. They carried a consistent look to what was being produced on the website and print. The middle screen shows a playful approach to an extension of Shuddle that we played around with called, ShuddleMe. Kids could book their own rides within the app and then "frame their ride" by taking a selfie and using one of 5 backdrops that I designed to post their selfie to social.

I also designed Shuddle Swag to give out at events right before back to school. The swag was very popular among kids.

Whirlpool Campaign Website

ROLE: BRAND, UI, UX

Designed website and logo for Whirlpool "Every Day, Care" campaign website. I also defined the look of the photography and worked with photographers to produce a unique and warm photographic visual identity for the brand. Visit the live website here

Developed wireframes for the campaign website. The website lived within the overall brand site, whirlpool.com.Download Wireframes

Comcast Interactive Home Display Design

ROLE: BRAND, UI, ART DIRECTION

This interactive display lives in retail stores such as, Best Buy and HH Gregg. It houses home security equipment, brochures and dual touch screens that inform consumers about XFINITY services. Through the touchscreen consumers can explore XFINITY Internet, TV, Voice and Home Security.

XFINITY TV Learn Interactive Screens.

ROLE: UI, BRAND, ART DIRECTION

Designed dual screens to work together and provide an experience to teach customers about XFINITY TV with the goal of getting them to purchase a TV package. I designed the flow of the touchscreen display and worked with photographers to produce assets that were aligned with the brand. The main challenge with designing the touchscreen display was that our primary user base had very little knowledge of working a computer. The display had to be user-friendly, capture user's attention, and get them to sign up for one of the three XFINITY TV packages being offered.

I designed all icons used in the display.

Interactive Display Brand Guidelines: I defined the overall look and feel of the Xfinity interactive display.

The interactive display also housed packaging for the launch of Comcast's new service, XFINITY Home. The packaging had to be versatile to accommodate for new product launches.

Smart Appliances App and Website Design

ROLE: UI

The following three landing pages were created to inform consumers about Whirlpool's Smart Appliances. Each landing page shows how one can control, manage and be informed about their refrigerator, washer, dryer and dishwasher through the Smart Appliance App from Whirlpool. Consumers could actually interact with the app, mocked up on the phone, to learn more about the smart appliance app. I designed all three landing pages and mobile app screens.

Maytag Man Print Ads

ROLE: BRAND, ART DIRECTION

The Maytag Man launch print campaign used a heroic, polished photography style to support the idea that the appliances he represents are strong, dependable, hard-working... and good-looking.

Maytag changing picture launch kit

Whirlpool Instagram Videos

ROLE: ART DIRECTION

Stop motion Instagram videos created for Whirlpool social channels. I was the Art Director on the project. I concepted and storyboarded all animations.

Peace First Branding

ROLE: BRAND, UI

Peace First is a national nonprofit organization that exists to create the next generation of peacemakers. I worked on redesigning their logo as well as several pieces of promotional collateral such as brochures, posters, t-shirts etc. I also re-designed their website.

Purina Website Design

ROLE: ILLUSTRATION, ART DIRECTION

An interactive website created for Beneful's Dream Dog Park contest, with a working dream machine that lets you and your dog come up with lots of weird ideas together.

Whirlpool TV

ROLE: ART DIRECTION

Art directed and storyboarded Whirlpool brand tv spots.

I.L.O. U. Music Video official selection for the 2013 Independent Film Festival

ROLE: ART DIRECTOR

I was the Art Director for this music video by Tony Rogers for his song I.L.O.U from his Sycamore albulm. We wanted to create a road movie without cars. It was directred by Michael Starcevich. It was shot in around Plainfield, IL in the summer of 2012. It features cinematography by Miles Kerr, editing by Kenan Legg at Whitehouse Post and color correction and visual effects by Jeff Altman and Michael Anderson at Filmworkers.

XFINITY Joy To Your Toys Print

ROLE: BRAND, TYPOGRPAHY

The following showcases print that was created for the XFINITY Joy to Your Toys Campaign. I created a font that was playful and easy to read. It mimicked toys such as building blocks and played off the square/rectangular XFINITY electronic shapes.

Septembeard Print and UI Design

ROLE: BRAND, ILLUSTRATION, UI

I created the following app, website and posters for an annual charity event for Septembeard. Septembeard is a non-profit organization that encourages men to grow a beard for the month of September and raise money for prostate cancer. The app was designed so users could apply a beard to their face and post it to social media with the purpose of creating awareness about Septembeard in a fun way.

Website design to donate money to Septembeard.

The posters were screen printed and the beards were perforated encouraging people to put on a beard.

Whirlpool Print featured in LÜRZER'S ARCHIVE VOL. 6/2014

ROLE: BRAND, ART DIRECTION

4 consecutive page print ads created for Whirlpool's Every Day, Care campaign featured in LÜRZER'S ARCHIVE VOL. 6/2014 I was the art director on the photoshoot.

Xfinity HarryPotter App "Cram for the Final" and TV

ROLE: ART DIRECTION, UI

In 2010, "binge watching" was an emerging phenomenon. With the biggest and most up-to-date selection of movie franchises and TV series, Comcast had the opportunity to own this new form of content consumption . Our idea was to create an entire “Cram on Demand” section of Xfinity On Demand, starting with a “Cram for the Final” event to prepare people for the theatrical finale of the Harry Potter film series.

Cram For The Final App. An app was also created with the purpose of increasing new subscriber acquisitions, up-selling existing subscribers, increasing On Demand usage and owning "binge watching." It provided and interactive experience where users could interact with the movie being played On Demand and their iPad app which allowed them to unlock exclusive content and prizes.

CES Website for Whirlpool

ROLE: BRAND, UI

Designed website and logo for Whirlpool CES event. ces.whirlpool.com

CES Landing Page Wireframes. Developed wireframes. Download Wireframes

Bucketfeet Shoe Design

ROLE: ILLUSTRATION

Designed shoe for Bucketfeet's #madetostandout contest. I was 1 of 50 artists chosen around the world to design a shoe for the #madetostandout contest.

First Place winner of Print's Magazine Illustrator Elite- Top 24 Illustrations of 2013

ROLE: ILLUSTRATION

Mi Casa No Tu Casa, Featured in PRINT Magazine, August 2013 Issue. First Place winner of Print's Magazine Illustrator Elite- Top 24 Illustrations of 2013

Download Article

Logos I have designed

Shuddle Packaging

ROLE: BRAND

Packaging created for Shuddle drivers. Each driver received a kit with a Shuddle car badge, 2 static clings (inside a tube), instructions and a welcome brochure. The inside of the box is printed full bleed with a duo-tone pattern map. Shuddle is a ride-share service for kids in the bay area.